首页 > js学习 > js基础知识 > jQuery的DOM节点选择器
2016
12-16

jQuery的DOM节点选择器

jQuery最核心的组成部分就是:选择器引擎。它继承了CSS的语法,可以对DOM元素的标签名、属性名、状态等进行快速准确的选择,并且不必担心浏览器的兼容性。jQuery选择器实现了CSS1~CSS3的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择。

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

简单的选择器有ID选择器、元素标签名和类(class):

$('div'):获取所有div元素的DOM对象

$('#box'):获取一个ID为box元素的DOM对象

$('.box'):获取所有class为box的所有DOM对象

为了说明ID返回的是单个元素,而元素标签名和类(class)返回的是多个,我们可以采用jQuery核心自带的一个属性length或size()方法来查看返回的元素个数。alert($('div').size());//3;或者alert($('div').length);//3

jQuery选择器的写法与CSS选择器十分类似,只不过他们的功能不同。CSS找到元素后添加的是单一的样式,而jQuery则添加的是动作行为。最重要的一点是:CSS在添加样式的时候,高级选择器会对部分浏览器不兼容,而jQuery选择器在添加CSS样式的时候却不必为此烦恼。

#box>p{color:red;}//CSS子选择器,IE6不支持

$('#box>p').css('color','red');//jQuery子选择器,兼容了IE6

jQuery选择器在获取节点对象的时候不但简单,还内置了容错功能,这样避免像JavaScript那样每次对节点的获取需要进行有效判断。

那么对于缺失不存在的元素,我们使用jQuery调用的话,怎么去判断是否存在呢?因为本身返回的是jQuery对象,可能会导致不存在元素存在与否,都会返回true。

if($('#pox').length>0){$('#pox').css('color','red');}//判断元素包含数量即可

除了这种方式之外,还可以用转换为DOM对象的方式来判断,例如:

if($('#pox').get(0)){}或if($('#pox')[0]){}//通过数组下标也可以获取DOM对象

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

.box.pox {color:red;}//双 class 选择器,IE6 出现异常

$('.box.pox').css('color', 'red'); //兼容 IE6,解决了异常

衍生的其他选择器,和css的选择起很相似,如:

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

后代选择器:$('ul li a') 获取追溯到的DOM对象,jQuery为后代选择器提供了一个等价find()方法:$('#box').find('p');

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

子选择器:$('#box > p');//只获取下一级的DOM对象,jQuery为子选择器提供了一个等价children()方法:$('#box').children('p');

同级选择:$('#box+p');//获取下一个同级DOM节点,jQuery 为next选择器提供了一个等价的方法next():$('#box').next('p');

所有同级节点:$('#box ~ p');//获取所有同级DOM节点,jQuery为nextAll选择器提供了一个等价的方法 nextAll():$('#box').nextAll('p');

在find()、next()、nextAll()和 children()这四个方法中,如果不传递参数,就相当于传递了“*” ,即任何节点,我们不建议这么做,不但影响性能,而且由于精准度不佳可能在复杂的HTML 结构时产生怪异的结果。

为了补充,jQuery 还提供了更加丰富的方法来选择元素:

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

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

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

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

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

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

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

属性选择器(如果是css,IE6会不支持属性选择,但是用jQuery的话是兼容的):

$('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对象

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。