jQuery-選擇器淺析

jQuery 最核心的組成部分就是：選擇器引擎，選擇器引擎Sizzle占了jQuery很大一部分。它繼承了CSS 的語法，可以對DOM 元素的標(biāo)簽名、屬性名、狀態(tài)等進(jìn)行快速準(zhǔn)確的選擇，并且不必?fù)?dān)心瀏覽器的兼容性。jQuery選擇器實現(xiàn)了CSS1~CSS3 的大部分規(guī)則之外，還實現(xiàn)了一些自定義的選擇器，用于各種特殊狀態(tài)的選擇。

基礎(chǔ)選擇器

選擇類型 選擇器 返回 元素名 $('div') 獲取所有div元素的DOM對象 ID $('#xzavier') 獲取一個ID為box元素的DOM對象 類(class) $('.xzavier') 獲取所有class為box的所有DOM對象 群組選擇 $('span,.xzavier') 獲取多個選擇器的DOM對象 后代選擇 $('ul li a') 獲取追溯到的多個DOM對象 通配選擇 $('*') 獲取所有元素標(biāo)簽的DOM對象 后代選擇 $('ul li a') 獲取追溯到的多個DOM對象 子選擇 $('div p') 只獲取子類節(jié)點的多個DOM對象 next選擇 $('div + p') 只獲取某節(jié)點后一個同級DOM對象 nextAll選擇 $('div ~ p') 獲取某節(jié)點后面所有同級DOM對象$('#xzavier').find('button') //等價后代選擇器 $('#xzavier').children('button') //等價子選擇器 $('#xzavier').next('button') //等價next選擇器 $('#xzavier').nextAll('button') //等價nextAll選擇器 $('#xzavier').prev('button') //選擇同級上一個元素 $('#xzavier').prevAll('button') //選擇同級所有上面的元素 $('#xzavier').prevUntil('button') //選擇同級上非指定元素，遇到則停止 $('#xzavier').nextUntil('button') //選擇同級下非指定元素，遇到則停止 $('#xzavier').siblings('button') //選擇同級上下所有元素

更多：
1.ID返回的是單個元素，而元素標(biāo)簽名和類(class)返回的是多個，我們可以采用jQuery 核心自帶的一個屬性length 或size()方法來查看返回的元素個數(shù)。
2.ID在頁面中是唯一的，一般要求開發(fā)者要遵守規(guī)范。如果你在頁面中出現(xiàn)三次，在CSS使用樣式是會成功顯示樣式的，但在jQuery，就匹配不到后面的ID。
3.在使用上，通配選擇器一般用的并不多，尤其是，比如：$('')，這種使用方法效率很低，影響性能。
4.在構(gòu)造選擇器時，盡量簡單，只保證必要的確定性。當(dāng)選擇器篩選越復(fù)雜，jQuery 內(nèi)部的選器引擎處理字符串的時間就越長。
5.注意，find()、next()、nextAll()和children()這四個方法中，如果不傳遞參數(shù)，就相當(dāng)于傳遞了“*”，即任何節(jié)點。

屬性選擇器

對應(yīng)CSS模式 選擇器 返回 a[title] $('a[title]') 獲取title屬性的DOM對象 a[title=num] $('a[title=num]') 獲取title屬性且=num的DOM對象 a[title^=num] $('a[title^=num]') 獲取title且開頭屬性值匹配的DOM對象 a[title|=num] $('a[title|=num]') 獲取title且=num或開頭屬性值匹配后面跟一個“-”號的DOM對象 a[title$=num] $('a[title$=num]') 獲取title屬性且結(jié)尾屬性值匹配的DOM對象 a[title!=num] $('a[title!=num]') 獲取title屬性且!=num的DOM對象 a[title~=num] $('a[title~=num]') 獲取title且屬性值是以一個空格分割的列表，其中包含屬性值的DOM對象 a[title*=num] $('a[title*=num]') 獲取title且屬性值含有一個指定字串的DOM對象 a[xz][title=num] $('a[xz][title=num]') 獲取具有bbb屬性且title屬性=num的DOM對象

過濾選擇器

基本過濾選擇器

過濾器名 jQuery 返回 :first $('li:first') 選取第一個元素 :last $('li:last') 選取最后一個元素 :not(selector) $('li:not(.xzavier)') 選取class不是xzavier的li元素 :even $('li.even') 選擇索引(0 開始)是偶數(shù)的所有元素 :odd $('li:odd') 選擇索引(0 開始)是奇數(shù)的所有元素 :eq(index) $('li:eq(2)') 選擇索引(0 開始)等于index的元素 :gt(index) $('li:gt(2)') 選擇索引(0 開始)大于index的元素 :lt(index) $('li.lt(2)') 選擇索引(0 開始)小于index的元素 :header $(':header') 選擇標(biāo)題元素，h1 ~ h6 :animated $(':animated') 選擇正在執(zhí)行動畫的元素 :focus $(':focus') 選擇當(dāng)前被焦點的元素

更多：
1.:focus 過濾器，必須是網(wǎng)頁初始狀態(tài)的已經(jīng)被激活焦點的元素才能實現(xiàn)元素獲取。而不是鼠標(biāo)點擊或者Tab鍵盤敲擊激活的。
2.:first、:last 和first()、last()這兩組過濾器和方法在出現(xiàn)相同元素的時候，first 會實現(xiàn)第一個父元素的第一個子元素，last 會實現(xiàn)最后一個父元素的最后一個子元素。所以，如果需要明確是哪個父元素。

內(nèi)容過濾器

過濾器名 jQuery 返回 :contains(text) $(':contains("xzavier")') 選取含有"xzavier"文本的元素 :empty $(':empty') 選取不包含子元素或空文本的元素 :has(selector) $(':has(.xzavier)') 選取含有class是xzavier的元素 :parent $(':parent') 選取含有子元素或文本的元素

更多：
1.jQuery 提供了一個has()方法來提高:has 過濾器的性能：$('ul').has('.xzavier')
2.jQuery 提供了一個名稱和:parent 相似的方法，但這個方法并不是選取含有子元素或文本的元素，而是獲取當(dāng)前元素的父元素，返回的是元素集合

可見性過濾器

過濾器名 jQuery 返回 :hidden $(':hidden') 選取所有不可見元素集合元素 :visible $(':visible') 選取所有可見元素集合元素

更多：
1.:hidden 過濾器一般是包含的內(nèi)容為：CSS 樣式為display:none、input 表單類型為type="hidden"和visibility:hidden 的元素

子元素過濾器

過濾器名 jQuery 返回 :first-child $('li:first-child') 獲取每個父元素的第一個子元素 :last-child $('li:last-child') 獲取每個父元素的最后一個子元素 :only-child $('li:only-child') 獲取只有一個子元素的元素 :nth-child(odd/even/eq(index)) $('li:nth-child(even)') 獲取每個自定義子元素的元素(索引值從1開始計算)

過濾方法

方法名 jQuery 備注 is(s/o/q/f) $('li').is('.red') 參數(shù)可傳遞選擇器、DOM、jquery對象或是函數(shù)來匹配 hasClass(class) $('li').hasClass('xzavier') 同is("." + class) slice(start, end) $('li').slice(0,2) 選擇從start到end位置的元素，如果是負(fù)數(shù)，則從后面開始 filter(s/o/q/f) $('li').filter('.xzavier') 參數(shù)可傳遞選擇器、DOM、jquery對象或是函數(shù)來匹配 end() $('div').find('p').end() 獲取當(dāng)前元素前一次狀態(tài)集合元素 contents() $('div').contents() 獲取某元素下面所有元素節(jié)點，包括文本節(jié)點

表單元素選擇器

選擇器名 jQuery 返回 :input $(":input") 所有 <input> 元素 :text $(":text") 所有 type="text" 的 <input> 元素 :password $(":password") 所有 type="password" 的 <input> 元素 :radio $(":radio") 所有 type="radio" 的 <input> 元素 :checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素 :submit $(":submit") 所有 type="submit" 的 <input> 元素 :reset $(":reset") 所有 type="reset" 的 <input> 元素 :button $(":button") 所有 type="button" 的 <input> 元素 :image $(":image") 所有 type="image" 的 <input> 元素 :file $(":file") 所有 type="file" 的 <input> 元素 :enabled $(":enabled") 所有激活的 input 元素 :disabled $(":disabled") 所有禁用的 input 元素 :selected $(":selected") 所有被選取的 input 元素 :checked $(":checked") 所有被選中的 input 元素

更多：
1.這些選擇器都是返回元素集合，如果想獲取某一個指定的元素，最好結(jié)合一下屬性選擇器。

$(':text[name=xzavier]); //獲取單行文本框name=xzavier 的元素

我們在使用中，不會所有標(biāo)簽都有id，使用起來也不方便，代碼冗雜。綜合組合很多選擇器使用，選到特定的元素，也是非常方便的。

總結(jié)

以上是生活随笔為你收集整理的回味jQuery系列（1）-选择器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。