jQuery進階選擇器

層次選擇器

進階選擇器方法：

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

這些方法如果不傳遞參數，相當于傳遞了('*')，即所有節點。如果傳遞了參數，例如

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

find()：選擇正在處理的元素的後代元素, 包括子節點、孫子節點......

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

例如：

<code>$(</code><code>'#box'</code><code>).</code><code>find</code><code>(</code><code>'p'</code><code>).css(</code><code>'color'</code><code>, </code><code>'blue'</code><code>)</code>

<code>//</code><code>被選擇的元素為</code>

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

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

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

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

<code>$('#box').next('p').css('color', 'red')</code>

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

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

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

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

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

它等于

<code>$(</code><code>'#box'</code><code>).prevAll(</code><code>'p'</code><code>).css(</code><code>'color'</code><code>, </code><code>'red'</code><code>)</code>

<code>$(</code><code>'#box'</code><code>).nextAll(</code><code>'p'</code><code>).css(</code><code>'color'</code><code>, </code><code>'red'</code><code>)</code>

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

<code>//HTML代碼</code>

<code><</code><code>input</code> <code>type</code><code>=</code><code>""</code> <code>value</code><code>=</code><code>"送出"</code><code>></code>

<code>$(function(){</code>

<code> </code><code>$('#box').nextUntil('p').css('color', 'red')</code>

搜尋到的元素為

選擇器快慢比較：

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

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

$('#box').children('p')：這條語句在jQuery内部，會使用$sibling()和javascript的nextSibling()方法，一個個周遊節點，他比最快的大約慢50%

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

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

$('p', $('#box))：内部會将這條語句翻譯成$('#box').find('p')，比最快的形式慢了23%

綜上所述，最快的是find()方法，最慢的是$('#box p')這種進階選擇器。如果一開始将$('#box')進行指派，那麼jQuery就對其變量進行緩存，那麼速度回進一步提高。

注意：我們應該推薦使用哪種選擇器方案呢？其實，使用哪種都差不多，這裡我們推薦使用jQuery提供的方法。因為不但方法的速度比進階選擇器運作的更快，并且它的靈活性和擴充性要高于進階選擇器。使用"+"或"~"從字面上沒有next和nextAll更加語義化，更加清晰，jQuery的方法更加豐富，提供了相對的prev和prevAll。畢竟jQuery是程式設計語言，需要能夠靈活的拆分群組合選擇器，而使用CSS模式過于死闆。是以，如果jQuery提供了獨立的方法來替代某些選擇器的功能，我們還是推薦優先選擇使用獨立的方法。

屬性選擇器

例子：

<code><a href=</code><code>""</code> <code>title=</code><code>"a1"</code><code>>a1<</code><code>/a</code><code>></code>

<code><a href=</code><code>""</code> <code>title=</code><code>"a5"</code><code>>a5<</code><code>/a</code><code>></code>

<code>$(</code><code>'a[title]'</code><code>) </code><code>//</code><code>選擇定義了title屬性的a标簽元素</code>

<code>$(</code><code>'a[title=a1]'</code><code>) </code><code>//</code><code>選擇title值為a1的a标簽元素</code>

<code>$(</code><code>'a[title^=a]'</code><code>) </code><code>//</code><code>選擇title屬性值以a開頭的a标簽元素</code>

<code>$(</code><code>'a[title$=a]'</code><code>) </code><code>//</code><code>選擇title屬性值以a結尾的a标簽元素</code>

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

<code>$(</code><code>'a[title!=a1]'</code><code>) </code><code>//</code><code>選擇有title屬性，但值不等于a1的a标簽元素</code>

<code>$(</code><code>'a[title~=a1]'</code><code>) </code><code>//</code><code>選擇具有title屬性，且屬性值是以一個空格分割的清單。</code>

<code>$(</code><code>'a[title~=aaa]'</code><code>)可以比對到，$(</code><code>'a[title~=bbb]'</code><code>)也可以比對到，$(</code><code>'a[title~=num1]'</code><code>)也可以比對到</code>

<code>$(</code><code>'a[title*=aaa]'</code><code>) </code><code>//</code><code>類似于正規表達式，選擇具有title屬性，且屬性值中包含aaa字元串的a标簽元素</code>

<code>$(</code><code>'a[bbb][title=a1]'</code><code>) </code><code>//</code><code>多屬性選擇器，選擇具有bbb屬性，并且title屬性值為a1的a元素标簽</code>

本文轉自曾哥最愛 51CTO部落格，原文連結：http://blog.51cto.com/zengestudy/1963490，如需轉載請自行聯系原作者

jQuery進階選擇器

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條