?三．高級選擇器

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

層次選擇器?:

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

jQuery 卻是兼容 IE6 的。

//后代選擇器

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

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

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

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

#box > p {

color:red;                            //IE6 不支持

}

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

IE6

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

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

//next選擇器(下一個同級節點)

#box+ p {

color:red;                               //IE6不支持

} 

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

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

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

//nextAll選擇器(后面所有同級節點)

#box~ p {

color:red;                                                     //IE6不支持

}

$('#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');    //向上找同級兄弟,不是指定P元素，如果是p，遇到則停止

$('#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”引擎，速度就會慢，而其他瀏覽器則會很快。