精通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 類型，如<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