jQuery中的基本选择器用法学习教程(3)

$('#box').children('p').css('color', 'red');//和子选择器等价 //next 选择器(下一个同级节点) #box + p {//IE6 不支持 color:red; } $('#box+p').css('color', 'red');//兼容IE6

jQuery 为next 选择器提供了一个等价的方法next()：

$('#box').next('p').css('color', 'red');//和next 选择器等价 //nextAll 选择器(后面所有同级节点) #box ~ p { //IE6 不支持 color:red; } $('#box ~ p').css('color', 'red');//兼容IE6

jQuery 为nextAll 选择器提供了一个等价的方法nextAll()：

$('#box').nextAll('p').css('color', 'red');//和nextAll 选择器等价

层次选择器对节点的层次都是有要求的，比如子选择器，只有子节点才可以被选择到，孙子节点和重孙子节点都无法选择到。next 和nextAll 选择器，必须是同一个层次的后一个和后N 个，不在同一个层次就无法选取到了。在find()、next()、nextAll()和children()这四个方法中，如果不传递参数，就相当于传递了“*”，即任何节点，不建议这么做，不但影响性能，而且由于精准度不佳可能在复杂的HTML 结构时产生怪异的结果。

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

为了补充高级选择器的这三种模式，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');//同级上下所有元素选定 //等价于下面： $('#box').prevAll('p').css('color', 'red');//同级上所有元素选定 $('#box').nextAll('p').css('color', 'red'); //同级下所有元素选定

警告：切不可写成“$('#box').prevAll('p').nextAll('p').css('color', 'red');”这种形式，因为prevAll('p')返回的是已经上方所有指定元素，然后再nextAll('p')选定下方所有指定元素，这样必然出现错误。理论上来讲，jQuery 提供的方法find()、next()、nextAll()和children()运行速度要快于使用高级选择器。因为他们实现的算法有所不同，高级选择器是通过解析字符串来获取节点对象，而jQuery 提供的方法一般都是单个选择器，是可以直接获取的。但这种快慢的差异，对于客户端脚本来说没有太大的实用性，并且速度的差异还要取决了浏览器和选择的元素内容。比如，在IE6/7 不支持querySelectorAll()方法，则会使用“Sizzle”引擎，速度就会慢，而其他浏览器则会很快。有兴趣的可以了解这个方法和这个引擎。选择器快慢分析：

//这条最快，会使用原生的getElementById、ByName、ByTagName 和querySelectorAll() $('#box').find('p'); //jQuery 会自动把这条语句转成$('#box').find('p')，这会导致一定的性能损失。它比最快的形式慢了5%-10% $('p', '#box'); //这条语句在jQuery 内部，会使用$.sibling()和javascript 的nextSibling()方法，一个个遍历节点。它比最快的形式大约慢50% $('#box').children('p'); //jQuery 内部使用Sizzle 引擎，处理各种选择器。Sizzle 引擎的选择顺序是从右到左，所以这条语句是先选p，然后再一个个过滤出父元素#box，这导致它比最快的形式大约慢70% $('#box > p'); //这条语句与上一条是同样的情况。但是，上一条只选择直接的子元素，这一条可以于选择多级子元素，所以它的速度更慢，大概比最快的形式慢了77%。 $('#box p'); //jQuery 内部会将这条语句转成$('#box').find('p')，比最快的形式慢了23%。 $('p', $('#parent'));

综上所属，最快的是find()方法，最慢的是$('#box p')这种高级选择器。如果一开始将$('#box')进行赋值，那么jQuery 就对其变量进行缓存，那么速度会进一步提高。

var box = $('#box'); var p = box.find('p');

注意：使用哪种方案呢？其实，使用哪种都差不多。这里，推荐使用jQuery 提供的方法。因为不但方法的速度比高级选择器运行的更快，并且它的灵活性和扩展性要高于高级选择器。使用“+”或“~”从字面上没有next 和nextAll 更加语义化，更加清晰，jQuery 的方法更加丰富，提供了相对的prev 和prevAll。毕竟jQuery 是编程语言，需要
能够灵活的拆分和组合选择器，而使用CSS 模式过于死板。所以，如果jQuery 提供了独立的方法来代替某些选择器的功能，推荐优先使用独立的方法。
属性选择器 CSS 模式   jQuery 模式   描述  
a[title]    $('a[title]')    获取具有这个属性的DOM 对象  
a[title=num1]    $('a[title=num1]')  

获取具有这个属性=这个属性值的DOM 对

象

 
a[title^=num]    $('a[title^=num]')  

获取具有这个属性且开头属性值匹配的

DOM 对象

 
a[title|=num]    $('a[title|=num]')  

获取具有这个属性且等于属性值或开头属