您好,登錄后才能下訂單哦!
層次選擇器
高級(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元素,則選擇,如果沒(méi)有下級(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í)下沒(méi)有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)把這條語(yǔ)句翻譯成$('#box').find('p'),這會(huì)導(dǎo)致一定的性能損失,它比最快的形式慢了5%~10%
$('#box').children('p'):這條語(yǔ)句在jQuery內(nèi)部,會(huì)使用$sibling()和javascript的nextSibling()方法,一個(gè)個(gè)遍歷節(jié)點(diǎn),他比最快的大約慢50%
$('#box >p'):jQuery內(nèi)部使用Sizzle引擎,處理各種選擇器。Sizzle引擎的選擇順序是從右到左,所以這條語(yǔ)句的先選p,然后再一個(gè)個(gè)過(guò)濾出父元素#box,這導(dǎo)致它比最快的形式大約慢70%
$('#box p'):這條語(yǔ)句與上一條是同樣的情況,但是,上一條只選擇直接的子元素,這一條可以選擇多級(jí)子元素,所以他的速度更慢,大概比最快的慢了77%
$('p', $('#box)):內(nèi)部會(huì)將這條語(yǔ)句翻譯成$('#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í)選擇器。使用"+"或"~"從字面上沒(méi)有next和nextAll更加語(yǔ)義化,更加清晰,jQuery的方法更加豐富,提供了相對(duì)的prev和prevAll。畢竟jQuery是編程語(yǔ)言,需要能夠靈活的拆分和組合選擇器,而使用CSS模式過(guò)于死板。所以,如果jQuery提供了獨(dú)立的方法來(lái)替代某些選擇器的功能,我們還是推薦優(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)簽
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。