創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司，專注成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)站營(yíng)銷推廣，域名申請(qǐng)，雅安服務(wù)器托管，綿陽服務(wù)器托管有關(guān)企業(yè)網(wǎng)站制作方案、改版、費(fèi)用等問題，請(qǐng)聯(lián)系創(chuàng)新互聯(lián)。

層次選擇器

高級(jí)選擇器方法：

find()、children()、next()、nextAll()、prev()、prevAll()、siblings()、nextUntil()、prevUntil()

這些方法如果不傳遞參數(shù)，相當(dāng)于傳遞了('*')，即所有節(jié)點(diǎn)。如果傳遞了參數(shù)，例如

find('p'), next('a')，則表示選擇指定的標(biāo)簽元素。

find()：選擇正在處理的元素的后代元素, 包括子節(jié)點(diǎn)、孫子節(jié)點(diǎn)......

find('p')：選擇正在處理的元素的后代元素中的p元素

例如：

//HTML代碼
<p>p0</p>

<div id="box">
    <p>p1</p>
    <p>p2</p>
    <div>
        <p>p3</p>
    </div>
    <a href="">aaa</a>
</div>

<p>p</p>

//JS
$('#box').find('p').css('color', 'blue')

//被選擇的元素為
<p>p1</p>
<p>p2</p>
<div>
    <p>p3</p>
</div>

children()： 選擇正在處理的元素的所有兒子元素，不包含孫子元素和重孫子元素

children('p')： 選擇正在處理的元素的所有兒子元素中的<p></p>元素，不包含孫子元素中的p元素和重孫子元素中的p元素

next()： 選擇正在處理的元素的同級(jí)元素的下一個(gè)元素，遇到則停止選擇

next(‘p’)： 選擇正在處理的元素的同級(jí)元素下一個(gè)元素，如果該元素是p元素，則選擇，如果沒有下級(jí)元素或者下級(jí)元素第一個(gè)不是p元素，則不選擇

例如：

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

nextAll()：選擇正在處理元素的同級(jí)下的所有元素，相當(dāng)于nextAll(‘*’)

nextAll('p')：選擇正在處理元素的同級(jí)下的所有p元素

prev()和prevAll()正好和next()、nextAll()相反,是向上選擇

siblings()：選擇正在處理的元素的同級(jí)的所有上面的元素下面的元素，例如：

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

它等于

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

nextUntil(‘p’)：選擇正在處理元素的同級(jí)下的所有元素，直到遇到p元素后停止選擇。如果同級(jí)下沒有p元素，則選擇所有元素。

例如：

//HTML代碼
<p>p</p>
<p>p</p>
<div id="box">div</div>
<a href="">aaa</a>
<div>div</div>
<input type="" value="提交">
<p>p</p>
<p>p</p>
<p>p</p>

//JS代碼
$(function(){
    $('#box').nextUntil('p').css('color', 'red')
})

搜索到的元素為

<a href="">aaa</a>
<div>div</div>
<input type="" value="提交">

選擇器快慢比較：

$('#box').find('p')：這條最快，使用的是原生的getElementById、ByName、ByTagName和querySelectorAll()

$('p', '#box' )：jQuery會(huì)自動(dòng)把這條語句翻譯成$('#box').find('p')，這會(huì)導(dǎo)致一定的性能損失，它比最快的形式慢了5%~10%

$('#box').children('p')：這條語句在jQuery內(nèi)部，會(huì)使用$sibling()和javascript的nextSibling()方法，一個(gè)個(gè)遍歷節(jié)點(diǎn)，他比最快的大約慢50%

$('#box >p')：jQuery內(nèi)部使用Sizzle引擎，處理各種選擇器。Sizzle引擎的選擇順序是從右到左，所以這條語句的先選p，然后再一個(gè)個(gè)過濾出父元素#box，這導(dǎo)致它比最快的形式大約慢70%

$('#box p')：這條語句與上一條是同樣的情況，但是，上一條只選擇直接的子元素，這一條可以選擇多級(jí)子元素，所以他的速度更慢，大概比最快的慢了77%

$('p', $('#box))：內(nèi)部會(huì)將這條語句翻譯成$('#box').find('p')，比最快的形式慢了23%

綜上所述，最快的是find()方法，最慢的是$('#box p')這種高級(jí)選擇器。如果一開始將$('#box')進(jìn)行賦值，那么jQuery就對(duì)其變量進(jìn)行緩存，那么速度回進(jìn)一步提高。

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

注意：我們應(yīng)該推薦使用哪種選擇器方案呢？其實(shí)，使用哪種都差不多，這里我們推薦使用jQuery提供的方法。因?yàn)椴坏椒ǖ乃俣缺雀呒?jí)選擇器運(yùn)行的更快，并且它的靈活性和擴(kuò)展性要高于高級(jí)選擇器。使用"+"或"~"從字面上沒有next和nextAll更加語義化，更加清晰，jQuery的方法更加豐富，提供了相對(duì)的prev和prevAll。畢竟jQuery是編程語言，需要能夠靈活的拆分和組合選擇器，而使用CSS模式過于死板。所以，如果jQuery提供了獨(dú)立的方法來替代某些選擇器的功能，我們還是推薦優(yōu)先選擇使用獨(dú)立的方法。

屬性選擇器

例子：

//HTML代碼
<a href="" title="a1">a1</a>
<a>a2</a>
<a>a3</a>
<a>a4</a>
<a href="" title="a5">a5</a>

//JS代碼
$('a[title]')    //選擇定義了title屬性的a標(biāo)簽元素

$('a[title=a1]') //選擇title值為a1的a標(biāo)簽元素

$('a[title^=a]') //選擇title屬性值以a開頭的a標(biāo)簽元素

$('a[title$=a]') //選擇title屬性值以a結(jié)尾的a標(biāo)簽元素

$('a[title|=a]') //選擇title屬性值以a開頭，并且后面有一個(gè)“-”的a標(biāo)簽元素，例如:<a href="" title="a-1">a1</a>

$('a[title!=a1]') //選擇有title屬性，但值不等于a1的a標(biāo)簽元素

$('a[title~=a1]') //選擇具有title屬性，且屬性值是以一個(gè)空格分割的列表。
例如： 
<a title="num1 aaa bbb">aa</a>
$('a[title~=aaa]')可以匹配到，$('a[title~=bbb]')也可以匹配到，$('a[title~=num1]')也可以匹配到

$('a[title*=aaa]') //類似于正則表達(dá)式，選擇具有title屬性，且屬性值中包含aaa字符串的a標(biāo)簽元素

$('a[bbb][title=a1]') //多屬性選擇器，選擇具有bbb屬性，并且title屬性值為a1的a元素標(biāo)簽

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章名稱：jQuery高級(jí)選擇器-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://www.2m8n56k.cn/article40/dgheeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、定制網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站營(yíng)銷、搜索引擎優(yōu)化、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)