?三．高級選擇器

在前面學(xué)習(xí)六種最常規(guī)的選擇器，一般來說通過這六種選擇器基本上可以解決所有 DOM 節(jié)點(diǎn)對象選擇的問題。但在很多特殊的元素上，比如父子關(guān)系的元素，兄弟關(guān)系的元素，特殊屬性的元素等等。在早期 CSS 的使用上，由于 IE6 等低版本瀏覽器不支持，所以這些高級選擇器的使用也不具備普遍性，但隨著 jQuery 兼容，這些選擇器的使用頻率也越來越高。

層次選擇器?:

在層次選擇器中，除了后代選擇器之外，其他三種高級選擇器是不支持 IE6 的，而

jQuery 卻是兼容 IE6 的。

//后代選擇器

$('#box p').css('color', 'red');               //全兼容

jQuery 為后代選擇器提供了一個(gè)等價(jià) find()方法

$('#box').find('p').css('color','red');        //和后代選擇器等價(jià)

//子選擇器，孫子后失明

#box > p {

color:red;                            //IE6 不支持

}

$('#box > p').css('color', 'red');              //兼容

IE6

jQuery 為子選擇器提供了一個(gè)等價(jià) children()方法：

$('#box').children('p').css('color', 'red');        //和子選擇器等價(jià)

//next選擇器(下一個(gè)同級節(jié)點(diǎn))

#box+ p {

color:red;                               //IE6不支持

} 

$('#box+p').css('color','red');  //兼容IE6 

jQuery為next選擇器提供了一個(gè)等價(jià)的方法next()：

$('#box').next('p').css('color','red');                    //和next選擇器等價(jià)

//nextAll選擇器(后面所有同級節(jié)點(diǎn))

#box~ p {

color:red;                                                     //IE6不支持

}

$('#box~ p').css('color', 'red');                      //兼容IE6 

jQuery為nextAll選擇器提供了一個(gè)等價(jià)的方法nextAll()：

$('#box').nextAll('p').css('color','red');              //和nextAll選擇器等價(jià)

層次選擇器對節(jié)點(diǎn)的層次都是有要求的，比如子選擇器，只有子節(jié)點(diǎn)才可以被選擇到，孫子節(jié)點(diǎn)和重孫子節(jié)點(diǎn)都無法選擇到。next和nextAll選擇器，必須是同一個(gè)層次的后一個(gè)和后N個(gè)，不在同一個(gè)層次就無法選取到了。

在find()、next()、nextAll()和children()這四個(gè)方法中，如果不傳遞參數(shù)，就相當(dāng)于傳遞了“*”，即任何節(jié)點(diǎn)，我們不建議這么做，不但影響性能，而且由于精準(zhǔn)度不佳可能在復(fù)雜 的HTML結(jié)構(gòu)時(shí)產(chǎn)生怪異的結(jié)果。

$('#box').next();                          //相當(dāng)于$('#box').next('*');

為了補(bǔ)充高級選擇器的這三種模式，jQuery還提供了更加豐富的方法來選擇元素：

$('#box').prev('p').css('color','red');       //同級上一個(gè)元素

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

nextUntil()和prevUnitl()方法是選定同級的下面或上面的所有節(jié)點(diǎn)，選定非指定的所有元素，一旦遇到指定的元素就停止選定。

$('#box').prevUntil('p').css('color','red');    //向上找同級兄弟,不是指定P元素，如果是p，遇到則停止

$('#box').nextUntil('p').css('color','red');  //同級下非指定元素選定，遇到則停止

siblings()方法正好集成了prevAll()和nextAll()兩個(gè)功能的效果，及上下相鄰的所有元素進(jìn)行選定：

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

//等價(jià)于下面：

$('#box').prevAll('p').css('color','red');

 //同級上所有元素選定

$('#box').nextAll('p').css('color','red');    //同級下所有元素選定

警告：切不可寫成“$('#box').prevAll('p').nextAll('p').css('color', 'red');”這種形式，因?yàn)閜revAll('p')返回的是已經(jīng)上方所有指定元素，然后再 nextAll('p')選定下方所有指定元素，這樣必然出現(xiàn)錯(cuò)誤。

理論上來講，jQuery提供的方法 find()、next()、nextAll()和 children()快于使用高級選擇器。因?yàn)樗惴ㄓ兴煌?，高級選擇器是通過解析字符串來獲取節(jié)點(diǎn)對象，而 jQuery 提供的方法一般都是單個(gè)選擇器，是可以直接獲取的。但這種快慢的差異，對于客戶端腳本來說沒有太大的實(shí)用性，并且速度的差異還要取決了瀏覽器和選擇的元素內(nèi)容。比如，在 IE6/7 不支持 querySelectorAll()方法，則會使用“Sizzle”引擎，速度就會慢，而其他瀏覽器則會很快。