精通jQuery選擇器使用

轉(zhuǎn)一篇

jQuery 具有一個(gè)相當(dāng)強(qiáng)大的選擇器引擎，提供了完整的選擇器語(yǔ)法，允許我們選擇幾乎所有的元素組合。jQuery 的選擇器語(yǔ)法主要是基于 CSS3 和 XPath 的，對(duì) CSS3 和 XPath 了解越多，使用 jQuery 時(shí)就越顯得心應(yīng)手。有關(guān) CSS 和 XPath，請(qǐng)參閱以下鏈接：

CSS 1
CSS 2
CSS 3
xPath
值得注意的是， CSS3 并沒(méi)有得到現(xiàn)今所有瀏覽器的支持，因此我們很少使用它。然而，我們?nèi)匀豢梢栽?jQuery 中使用 CSS3 選擇元素，因?yàn)?jQuery 具備自己的自定義選擇器引擎，并且實(shí)現(xiàn)了對(duì) CSS3 的支持。

想了解 jQuery 選擇器更多信息，可以訪問(wèn) jQuery 的官方文檔有關(guān) Selector 的部分。下面，在原官方文檔的基礎(chǔ)上作一些簡(jiǎn)單的翻譯和說(shuō)明。


1. CSS 選擇器（CSS Selectors）

jQuery 完整地支持 CSS 1-3，并且可以在（選擇器）表達(dá)式里加入自定義的 CSS-like （和xPath）。

1.1 jQuery 支持的 CSS 選擇器語(yǔ)法

* 任何 element
E 類(lèi)型為 E 的所有element（其實(shí) E 可以是任何 element）
E:nth-child(n) 一個(gè)類(lèi)型為 E 的 element，它是其父 element 的第 n 個(gè)子 element
E:first-child 一個(gè)類(lèi)型為 E 的 element，它是其父 element 的第一個(gè)子 element （相當(dāng)于E:nth-child(0)）
E:last-child 一個(gè)類(lèi)型為 E 的 element，它是其父 element 的最后一個(gè)子 element
E:only-child 一個(gè)類(lèi)型為 E 的 element，它是其父 element 的唯一子 element
E:empty 一個(gè)類(lèi)型為 E 的用戶界面（UI） element，它沒(méi)有子 element（包括 文本 element）
E:enabled 一個(gè)類(lèi)型為 E 的用戶界面（UI） element，它被設(shè)置為禁止（disabled）
E:disabled 一個(gè)類(lèi)型為 E 的用戶界面（UI） element，它被設(shè)置為允許（enabled）
E:checked 一個(gè)類(lèi)型為 E 的用戶界面（UI） element，它處于選中（checked）狀態(tài)（適用于單選按鈕和復(fù)選框）
E:selected 一個(gè)類(lèi)型為 E 的用戶界面（UI） element，它處于被選擇（selected）狀態(tài)（在選擇范圍內(nèi)，有一個(gè)或多個(gè)可供選擇的 element ）。注意：selected 屬性并不在 CSS 的規(guī)范內(nèi)，但jQuery 提供內(nèi)部支持
E.myclass 一個(gè)類(lèi)型為 E 的 element，它的 class 類(lèi)是“myclass”
E#myid 一個(gè)類(lèi)型為 E 的 element，它的 id 是“myid”
E:not(s) 一個(gè)類(lèi)型為 E 的 element，并且結(jié)果集中的 element 不匹配（不包含）選擇器 s（用作過(guò)濾）
E F 一個(gè)類(lèi)型為 F 的 element，它是類(lèi)型為E 的 element 的子孫 element（注意是子孫 element）
E > F 一個(gè)類(lèi)型為 F 的 element，它是類(lèi)型為E 的 element 的子 element（注意是子 element）
E + F 一個(gè)類(lèi)型為 F 的 element，它是緊跟在類(lèi)型為E 的 element 后面的一個(gè)兄弟 element（注意 F 是 E 的兄弟節(jié)點(diǎn)，并且是緊跟隨其后的一個(gè)）
E ~ F 一個(gè)類(lèi)型為 F 的 element，它是類(lèi)型為E 的 element 后面的一個(gè)兄弟 element（注意 F 是 E 的兄弟節(jié)點(diǎn)，并且位置在E 的后面）
E,F,G 一個(gè)類(lèi)型為 E 的 element，一個(gè)類(lèi)型為 F 的 element，一個(gè)類(lèi)型為 G 的 element（用于選擇多個(gè) element） ?
1.2 jQuery 支持，但（跟 CSS 規(guī)范）有所不同的選擇器語(yǔ)法

不同之處是必須在屬性名前加上符號(hào)“@”

E[@foo] 一個(gè)類(lèi)型為 E 的 element，它具有屬性“foo”
E[@foo=bar] 一個(gè)類(lèi)型為 E 的 element，它具有屬性“foo = bar”
E[@foo^=bar] 一個(gè)類(lèi)型為 E 的 element，它具有屬性“foo“，并且其屬性值是以”bar“開(kāi)頭的
E[@foo$=bar] 一個(gè)類(lèi)型為 E 的 element，它具有屬性“foo“，并且其屬性值是以”bar“結(jié)尾的
E[@foo*=bar] 一個(gè)類(lèi)型為 E 的 element，它具有屬性“foo“，并且其屬性值包含”bar“
E[@foo=bar][@baz=bop] 一個(gè)類(lèi)型為 E 的 element，它具有屬性“foo = bar”和屬性”baz = bop“
注：以上的“bar”和“bop”均為字符串。

1.3 jQuery 不支持的選擇器語(yǔ)法（略）

因?yàn)闆](méi)什么實(shí)際的作用，所以這里也不作贅述，想了解詳情的可以參閱官方幫助文檔。

1.4 Contex 和 Anchoring

可以設(shè)置 contex 來(lái) anchor（定位） 選擇器，這也是 jQuery 跟 CSS 規(guī)范的一個(gè)不同之處。用戶可以使用語(yǔ)法： $(expr, context) 來(lái)設(shè)置 context root。默認(rèn)的 context root 是整個(gè)文檔。

2. XPath 選擇器（XPath Selectors）

XPath 也是 jQuer 支持的選擇器語(yǔ)法之一。jQuery 支持基本的 XPath 語(yǔ)法。下面以一些例子作說(shuō)明。

2.1 定位路徑（Location Paths）


絕對(duì)路徑，相對(duì)于整個(gè) HTML 文檔
$(”/html/body//p”) $(”body//p”) $(”p/../div”)
相對(duì)路徑，相對(duì)于設(shè)置的 context node “this”
$(”p/*”, this) $(”/p//a”, this)
2.2 支持 Axis 選擇器


“//” ： 子孫 elements （div 所有類(lèi)型為 p 的子孫 elements）
$(”/div//p”) $(”//div//p”)
“/” ： 子 elements （div 所有類(lèi)型為 p 的子 elements）
$(”//div/p”)
“~” ： 兄弟 elements （div 所有類(lèi)型為 form 的兄弟 elements）
$(”//div ~ form”)
““..”： 父 elements （div 的父 element 下的類(lèi)型為 p 的子 elements）
$(”//div/../p”)
2.3 支持謂詞語(yǔ)法（Predicates）

[@foo] 具有屬性“foo”
$(”//input[@foo]”)
[@foo=’test’] 具有屬性“foo = ‘test’”
$(”//a[@foo = ‘tsxt’]”)
[Nodelist] 其子孫 elements 匹配 Nodelist（用于過(guò)濾）
$(”//div[p]”) $(”//div[p/a]”)
2.4 jQuery 支持，但（跟 XPath 規(guī)范）有所不同的謂詞語(yǔ)法（Predicates）


[last()] or [position()=last()] becomes :last（選擇結(jié)果集中的最后一個(gè) element）
$(”p:last”)
[0] or [position()=0] becomes :eq(0) or :first（選擇結(jié)果集中的第個(gè) element）
$(”p:first”) $(”p:eq(0)”)
[position() < 5] becomes :lt(5)（選擇結(jié)果集中索引大于5的 elements）
$(”p:lt(5)”)
[position() > 2] becomes :gt(2)（選擇結(jié)果集中索引小于2的 elements）
$(”p:gt(2)”)
注：“becomes” 前面的是 XPath 的 predicates 語(yǔ)法，后面是等價(jià)的 jQuery 語(yǔ)法。

3. jQuery 自定義的選擇器（Custom Selectors）

jQuery 具有一些自定義的選擇器語(yǔ)法，這些語(yǔ)法雖然并不在 CSS 和XPath 規(guī)范之內(nèi)，但它們相當(dāng)?shù)谋憬?#xff0c;所在 jQuery 將它們囊括進(jìn)來(lái)。

3.1 自定義選擇器（Custom Selectors）


:even 結(jié)果集中其索引為偶數(shù)（雙數(shù)）的 elements
:odd 結(jié)果集中其索引為奇數(shù)（單數(shù)）的 elements
:eq(N) and :nth(N) 選擇結(jié)果集中索引為 N 的 elements
:gt(N) 選擇結(jié)果集中索引大于 N 的 elements
:lt(N) 選擇結(jié)果集中索引小于 N 的 elements
:first 選擇結(jié)果集中的第一個(gè) element （相當(dāng)于 eq(0) 或者 nth(0)）
:last 選擇結(jié)果集中的最后一個(gè) element
:parent 在結(jié)果集中選擇 elements，它必須具有子 elements（包括文本節(jié)點(diǎn)）（跟 :empty 相反）
:contains(’test’) 選擇結(jié)果集中包含有指定文本的 elements
:visible 選擇所有可見(jiàn)（visible）的 elements（ display 屬性的值等于 visible、block、inline，或者 visibility 屬性的值等于 visible，不包括 hidden 類(lèi)型的 elements（關(guān)于 hidden 類(lèi)型，如））
:hidden 選擇所有隱藏（visible）的 elements（ display 屬性的值等于 none，或者 visibility 屬性的值等于 hidden，不包括 hidden 類(lèi)型的 elements（關(guān)于 hidden 類(lèi)型，如））
例子：

$(”p:first”).css(”fontWeight”,”bold”); $(”div:hidden”).show(); $(”/div:contains(’test’)”, this).hide();
3.2 表單選擇器（Form Selectors）

:input 選擇所有表單 elements（input, select, textarea, button）
:text 選擇所有文本域 (type=”text”).
:password 選擇所有密碼域 (type=”password”).
:radio 選擇所有單選按鈕 (type=”radio”).
:checkbox 選擇所有復(fù)選框 (type=”checkbox”).
:submit 選擇所有提交按鈕 (type=”submit”).
:image 選擇所有圖像域 (type=”image”).
:reset 選擇所有重置按鈕 (type=”reset”).
:button 選擇所有按鈕 (type=”button”).
:file 選擇所有 .
:hidden 也是可用的，在上面的3.1 節(jié)有介紹。

建議在使用表單選擇時(shí)提供一個(gè) context root，例子：

$(’#myForm :input’)
$(’input:radio’, myForm)
上面最后的一行語(yǔ)句將會(huì)選擇所有的“myForm”表單里的所有單選按鈕，相當(dāng)于[@type=radio]（即 $(”[@type = radio],myForm”)），但用表單選擇器會(huì)稍微快點(diǎn)，尤其對(duì)于大型的表單。

3.3 更多選擇器

jQuery 選擇器可以通過(guò)第三方的插件來(lái)擴(kuò)展：

More Selectors Plugin
Mike Alsup on Custom Selectors
Patch to allow selection by CSS property (full plugin to be released simultaneously with 1.1)
參考資料：

總結(jié)

以上是生活随笔為你收集整理的精通jQuery选择器使用 转一篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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