常规选择器

简单选择器

在使用jQuery选择器时，首先必须使用“$()”函数来包装我们的 CSS 规则。而CSS 规则作为参数传递到 jQuery 对象内部后，再返回包含页面中对应元素的 jQuery 对象。随后，我们就可以对这个获取到的 DOM 节点进行行为操作了。

ID选择器：$('#div')    获取一个ID为div元素的DOM对象

类选择器：$('.div')     获取所有class为div的所有DOM对象

元素选择器：$('div')   获取所有div元素的DOM对象

注意：ID在页面只允许出现一次。

进阶选择器

群组选择器：$('span,em,.box')    获取多个选择器的DOM对象

后代选择器：$('ul li a')                  获取追溯到的多个DOM对象

通配选择器：$('*')                         获取所有元素标签的DOM对象

还有一种选择器，可以在ID和类(class)中指明元素前缀，比如：

$('div.box')     //限定必须是.box元素获取必须是div

$('p#box div.side')    //同上

类(class)有一个特殊的模式，就是同一个DOM节点可以声明多个类(class)。么对于这种格式，我们有多 class 选择器可以使用，但要注意和 class 群组选择器的区别。

$('.box.pox').css('color','red');    

多 class 选择器是必须一个 DOM 节点同时有多个 class，用这多个 class 进行精确限定。而群组 class 选择器，只不过是多个 class 进行选择而已。

高级选择器

后代选择器：$('ul li a')          获取追溯到的多个DOM对象

子选择器：$('div p')              只获取子类节点的多个DOM对象

next选择器：$('div + p')        只获取某节点后一个同级DOM对象

nextAll选择器：$('div ~ p')    获取某节点后面所有同级DOM对象

在 find()、next()、nextAll()和 children()这四个方法中，如果不传递参数，就相当于传递了“*”，即任何节点。

$('#box').next();     //相当于$('#box').next('*');

为了补充高级选择器的这三种模式，jQuery 还提供了更加丰富的方法来选择元素：

$('#box').prev('p');         //同级上一个元素

$('#box').prevAll('p');     //同级所有上面的元素

nextUntil()和 prevUnitl()方法是选定同级的下面或上面的所有节点，选定非指定的所有元素，一旦遇到指定的元素就停止选定。

$('#box').prevUntil('p');     //同级上非指定元素选定，遇到则停止

$('#box').nextUntil('p');     //同级下非指定元素选定，遇到则停止

siblings()方法正好集成了 prevAll()和 nextAll()两个功能的效果，及上下相邻的所有元素进行选定：

$('#box').siblings('p');  //同级上下所有元素选定

//等价于下面：

$('#box').prevAll('p');  //同级上所有元素选定

$('#box').nextAll('p');  //同级下所有元素

属性选择器

$('a[title]')  获取具有这个属性的 DOM 对象

$('a[title=num1]') 获取具有这个属性=这个属性值的DOM对象

$('a[title^=num]') 获取具有这个属性且开头属性值匹配的 DOM 对象

$('a[title|=num]') 获取具有这个属性且等于属性值或开头属 性值匹配后面跟一个“-”号的 DOM 对象

$('a[title$=num]') 获取具有这个属性且结尾属性值匹配的 DOM 对象

$('a[title!=num]') 获取具有这个属性且不等于属性值的 DOM 对象

$('a[title~=num]')获取具有这个属性且属性值是以一个空格分割的列表，其中包含属性值的 DOM 对象

$('a[title*=num]') 获取具有这个属性且属性值含有一个指定 字串的 DOM 对象

$('a[bbb][title=num1]') 获取具有这个属性且属性值匹配的 DOM