jQuery 初体验

什么是JQ？

一个优秀的JS库 写越少的代码，做越多的事情

JQ的好处？

• 简化JS的复杂操作
• 不再需要关心兼容性
• 提供大量实用方法

JQ官网

• http://jquery.com/

jquery的版本

jQuery 分 2 个系列版本 1.x 与 2.x，主要的区别 在于 2.x 不再兼容 IE6、7、8 为移动端而优化，由于减少了一些代码，使得该版本比 jQuery 1.x 更小且更快。

压缩版(compressed) 与 开发版(development)，我们在开发过程中使用开发版（开发版本便于代码修改及调试），项目上线发布使用压缩版（因为压缩版本体积更小，效率更快）。

如何使用JQ

1. 官网下载jquery.js文件
2. 导入jquery文件

选择元素

• $()
• css()

• 省略原生的循环操作

    
111
    
111
    
111
    
111

• $ 和 jQuery

  • $ === jQuery
  • $是jQuery的别名
  • 为了简便, 我们通常使用$

jQuery('#div1').css('background', 'red');

绑定事件

通过调用的jquery对象上的click方法来

$("div").click(function(){});

• this指向

指向触发事件的原生dom对象

$("div").click(function(){
    alert(this.innerHTML)
})

html()

作用和innerHTML类似，只是该方法可以给多个元素进行操作。

传递字符串参数表示赋值，返回jquery对象。

不传参数，就表示取值。

var $div = $('#div1');

$div.click(function(){
    alert(  $div.html()  );
});

JS与JQ关系

• jq也是js
• js原生dom对象与jq对象不能混用

alert(  $div.html()  );  //纯JQ写法

alert( document.getElementById('div1').innerHTML );  //纯JS写法

alert( $div.innerHTML );   //错误的
alert( document.getElementById('div1').html() );  //错误的

• 例子 : 选择颜色填充方块

取值与赋值的关系

我们知道原生js中取值与赋值是通过直接操作对象属性来实现的

比如说innerHTML 属性

oDiv.innerHTML;//取值
oDiv.innerHTML = 'text';//赋值

在jquery中,实现相同的操作

$div.html();//取值
$div.html('text');//赋值

可以看到是否取值或赋值是通过传入参数的个数决定的

具有相同特征的还有

• css()
• attr() 属性
• val() 值

等方法

$('#div1').css('color','red');
alert( $('#div1').css('color') );  //red


$('#div1').attr('title','hello');

alert( $('#div1').attr('title') );//获取title属性
alert( $('#div1').attr('class') );//获取class
alert( $('#div1').attr('data-index') ); //获取自定义属性

$('input').val('456');//设置value值
alert( $('input').val() );//获取value值

多元素取值

jq中查找到多个元素, 取值取第一个元素的值

    
001
    
002
    
003
    
004
    
005

属性选择器

css选择器中大多的语法都可以在jquery中使用

包括属性选择器

引号的问题

$('input[value=123]').css('background', 'red');
$('input[value="123"]').css('background', 'red');

上面的代码加不加引号都是正确的

什么时候必须加引号呢？

这个时候我们就必须加上引号

$('div[class="box box1"]').css('background', 'red');

JQ的链式操作

一步一步的操作：

var $div = $('div');
$div.html('bbbb');
$div.css('background', 'red');
$div.click(function(){
    alert('111');
}) 

链式操作 :

$('div').html('bbbb').css('background', 'red').click(function(){ alert('111' )});

注意: JQ中的可以链式操作的是针对设置的操作， 取值的操作不能进行链式操作

JQ实战小技巧

命名的规范

span

JQ的容错性

在原生js种， 如果没有找到相应的DOM元素， 执行后续操作会报错

在JQ中没有找到也不会报错， 最多是不执行任何的操作

这就是JQ的容错性

它是把双刃剑:

• 优点： 不报错， 不影响后续代码的执行
• 缺点： 不好调试

集合的长度

$()获取到的都是一个集合

集合中只有一个元素，它也是一个集合　$('#id');

它的结构很像数组，有下标， 有length

    
001
    
002
    
003
    
004
    
005

JQ实战小技巧

利用length判断元素是否存在

var $span = $('#span1');
console.log( $span.length );
$span.html('bbbb');

class的操作

• addClass()
• removeClass()
• toggleClass()

aaaaa

aaaaa

aaaaa

显示隐藏

• show()/hide()

div
div
div

我们用css()也可以达到相同的效果

div
div
div

但是如果我们把div换成span, 隐藏之后再显示会出问题

因为span的display默认为inline

span
span
span

使用show()/hide()就可以, show()和hide() 可以智能的判断display

节点的选择(兄弟节点)

next()

选择下一个兄弟节点

   
list item 1
   
list item 2
   
list item 3
   
list item 4
   
list item 5
   
list item 6

prev()

选择上一个兄弟节点

```html

   
list item 1
   
list item 2
   
list item 3
   
list item 4
   
list item 5
   
list item 6

nextAll()

选择下面所有的兄弟节点

   
list item 1
   
list item 2
   
list item 3
   
list item 4
   
list item 5

prevAll()

选择上面所有的兄弟节点

   
list item 1
   
list item 2
   
list item 3
   
list item 4
   
list item 5

siblings()

选择所有的兄弟节点

   
list item 1
   
list item 2
   
list item 3
   
list item 4
   
list item 5

参数的筛选功能

上述方法都可以传入一个选择器字符串作为参数，用于对结果进行筛选

//在集合中选择class为selectd的元素
$('item').next('.selected').css('background-color', 'red');
$('item').prev('.selected').css('background-color', 'red');
$('item').nextAll('.selected').css('background-color', 'red');
$('item').prevAll('.selected').css('background-color', 'red');
$('item').siblings('.selected').css('background-color', 'red');

下标

• eq()

    
list item 1
    
list item 2
    
list item 3
    
list item 4
    
list item 5