精通jQuery選擇器使用

轉一篇

jQuery 具有一個相當強大的選擇器引擎，提供了完整的選擇器語法，允許我們選擇幾乎所有的元素組合。jQuery 的選擇器語法主要是基于 CSS3 和 XPath 的，對 CSS3 和 XPath 了解越多，使用 jQuery 時就越顯得心應手。有關 CSS 和 XPath，請參閱以下鏈接：

CSS 1
CSS 2
CSS 3
xPath
值得注意的是， CSS3 并沒有得到現今所有瀏覽器的支持，因此我們很少使用它。然而，我們仍然可以在 jQuery 中使用 CSS3 選擇元素，因為 jQuery 具備自己的自定義選擇器引擎，并且實現了對 CSS3 的支持。

想了解 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 類型，如））
:hidden 選擇所有隱藏（visible）的 elements（ display 屬性的值等于 none，或者 visibility 屬性的值等于 hidden，不包括 hidden 類型的 elements（關于 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 選擇所有 .
: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)
參考資料：

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。