精通jQuery選擇器

想瞭解 jQuery 選擇器更多信息，可以訪問 jQuery 的官方文檔有關 Selector 的部分。下面，在原官方文檔的基礎上作一些簡單的翻譯和說明。

 

1. CSS 選擇器(CSS Selectors)

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

 

1.1 jQuery 支持的 CSS 選擇器語法

* 任何 element
E 類型為 E 的所有element(其實 E 可以是任何 element)
E:nth-child(n) 一個類型為 E 的 element，它是其父 element 的第 n 個子 element
E:first-child 一個類型為 E 的 element，它是其父 element 的第一個子 element (相當於E:nth-child(0))
E:last-child 一個類型為 E 的 element，它是其父 element 的最後一個子 element
E:only-child 一個類型為 E 的 element，它是其父 element 的唯一子 element
E:empty 一個類型為 E 的用戶界面(UI) element，它沒有子 element(包括 文本 element)
E:enabled 一個類型為 E 的用戶界面(UI) element，它被設置為禁止(disabled)
E:disabled 一個類型為 E 的用戶界面(UI) element，它被設置為允許(enabled)
E:checked 一個類型為 E 的用戶界面(UI) element，它處於選中(checked)狀態(適用於單選按鈕和複選框)
E:selected 一個類型為 E 的用戶界面(UI) element，它處於被選擇(selected)狀態(在選擇範圍內，有一個或多個可供選擇的 element )。注意：selected 屬性並不在 CSS 的規範內，但jQuery 提供內部支持
E.myclass 一個類型為 E 的 element，它的 class 類是"myclass"
E#myid 一個類型為 E 的 element，它的 id 是"myid"
E:not(s) 一個類型為 E 的 element，並且結果集中的 element 不匹配(不包含)選擇器 s(用作過濾)
E F 一個類型為 F 的 element，它是類型為E 的 element 的子孫 element(注意是子孫 element)
E > F 一個類型為 F 的 element，它是類型為E 的 element 的子 element(注意是子 element)
E + F 一個類型為 F 的 element，它是緊跟在類型為E 的 element 後面的一個兄弟 element(注意 F 是 E 的兄弟節點，並且是緊跟隨其後的一個)
E ~ F 一個類型為 F 的 element，它是類型為E 的 element 後面的一個兄弟 element(注意 F 是 E 的兄弟節點，並且位置在E 的後面)
E,F,G 一個類型為 E 的 element，一個類型為 F 的 element，一個類型為 G 的 element(用於選擇多個 element)

 

1.2 jQuery 支持，但(跟 CSS 規範)有所不同的選擇器語法，不同之處是必須在屬性名前加上符號"@"

E[@foo] 一個類型為 E 的 element，它具有屬性"foo"
E[@foo=bar] 一個類型為 E 的 element，它具有屬性"foo = bar"
E[@foo^=bar] 一個類型為 E 的 element，它具有屬性"foo"，並且其屬性值是以"bar"開頭的
E[@foo$=bar] 一個類型為 E 的 element，它具有屬性"foo"，並且其屬性值是以"bar"結尾的
E[@foo*=bar] 一個類型為 E 的 element，它具有屬性"foo"，並且其屬性值包含"bar"
E[@foo=bar][@baz=bop] 一個類型為 E 的 element，它具有屬性"foo = bar"和屬性"baz = bop"
註：以上的"bar"和"bop"均為字符串。

 

1.3 jQuery 不支持的選擇器語法(略)

因為沒什麼實際的作用，所以這裡也不作贅述，想瞭解詳情的可以參閱官方幫助文檔。

1.4 Contex 和 Anchoring

可以設置 contex 來 anchor(定位) 選擇器，這也是 jQuery 跟 CSS 規範的一個不同之處。用戶可以使用語法： $(expr, context) 來設置 context root。默認的 context root 是整個文檔。

 

2. XPath 選擇器(XPath Selectors)

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

2.1 定位路徑(Location Paths)

絕對路徑，相對於整個 HTML 文檔

$("/html/body//p") $("body//p") $("p/../div")

相對路徑，相對於設置的 context node "this"

$("p/*", this) $("/p//a", this)

 

2.2 支持 Axis 選擇器

"//" ： 子孫 elements (div 所有類型為 p 的子孫 elements)

$("/div//p") $("//div//p")

"/" ： 子 elements (div 所有類型為 p 的子 elements)

$("//div/p")

"~" ： 兄弟 elements (div 所有類型為 form 的兄弟 elements)

$("//div ~ form")

"".."： 父 elements (div 的父 element 下的類型為 p 的子 elements)

$("//div/../p")

 

2.3 支持謂詞語法(Predicates)

[@foo] 具有屬性"foo"

$("//input[@foo]")

[@foo='test'] 具有屬性"foo = 『test'"

$("//a[@foo = 『tsxt']")

[Nodelist] 其子孫 elements 匹配 Nodelist(用於過濾)

$("//div[p]") $("//div[p/a]")

 

2.4 jQuery 支持，但(跟 XPath 規範)有所不同的謂詞語法(Predicates)

[last()] or [position()=last()] becomes :last(選擇結果集中的最後一個 element)

$("p:last")

[0] or [position()=0] becomes :eq(0) or :first(選擇結果集中的第個 element)

$("p:first") $("p:eq(0)")

[position() < 5] becomes :lt(5)(選擇結果集中索引大於5的 elements)

$("p:lt(5)")

[position() > 2] becomes :gt(2)(選擇結果集中索引小於2的 elements)

$("p:gt(2)")

註："becomes" 前面的是 XPath 的 predicates 語法，後面是等價的 jQuery 語法。

 

3. jQuery 自定義的選擇器(Custom Selectors)

jQuery 具有一些自定義的選擇器語法，這些語法雖然並不在 CSS 和XPath 規範之內，但它們相當的便捷，所在 jQuery 將它們囊括進來。

 

3.1 自定義選擇器(Custom Selectors)

:even 結果集中其索引為偶數(雙數)的 elements
:odd 結果集中其索引為奇數(單數)的 elements
:eq(N) and :nth(N) 選擇結果集中索引為 N 的 elements
:gt(N) 選擇結果集中索引大於 N 的 elements
:lt(N) 選擇結果集中索引小於 N 的 elements
:first 選擇結果集中的第一個 element (相當於 eq(0) 或者 nth(0))
:last 選擇結果集中的最後一個 element
:parent 在結果集中選擇 elements，它必須具有子 elements(包括文本節點)(跟 :empty 相反)
:contains('test') 選擇結果集中包含有指定文本的 elements
:visible 選擇所有可見(visible)的 elements( display 屬性的值等於 visible、block、inline，或者 visibility 屬性的值等於 visible，不包括 hidden 類型的 elements(關於 hidden 類型，如<input type="hidden" …>))
:hidden 選擇所有隱藏(visible)的 elements( display 屬性的值等於 none，或者 visibility 屬性的值等於 hidden，不包括 hidden 類型的 elements(關於 hidden 類型，如<input type="hidden" …>))

例子：

$("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 選擇所有複選框 (type="checkbox").
:submit 選擇所有提交按鈕 (type="submit").
:image 選擇所有圖像域 (type="image").
:reset 選擇所有重置按鈕 (type="reset").
:button 選擇所有按鈕 (type="button").
:file 選擇所有 <input type="file">.
:hidden 也是可用的，在上面的3.1 節有介紹。

建議在使用表單選擇時提供一個 context root，例子：

$('#myForm :input')

$('input:radio', myForm)

上面最後的一行語句將會選擇所有的"myForm"表單裡的所有單選按鈕，相當於[@type=radio](即 $("[@type = radio],myForm"))，但用表單選擇器會稍微快點，尤其對於大型的表單。

 

3.3 更多選擇器

jQuery 選擇器可以通過第三方的插件來擴展：
More Selectors Plugin
Mike Alsup on Custom Selectors
Patch to allow selection by CSS property (full plugin to be released simultaneously with 1.1)

參考資料：
http://docs.jquery.com/DOM/Traversing/Selectors