Thking In Java

From:http://www.cnblogs.com/wuchang/archive/2007/01/20/625786.html

jQuery的選擇器是CSS 1-3，XPath的結合物。jQuery提取這二種查詢語言最好的部分，融合后創造出了最終的jQuery表達式查詢語言。如果你了解CSS（絕大部分WEB開發者都用到的），那么你學起來就很容易了。

同時使用CSS和XPath

看幾個例子：

隱藏所有包含有鏈接的段落：

$("p[a]").hide();

顯示頁面的第一個段落：

$("p:eq(0)").show();

隱藏所有當前可見的層元素：

$("div:visible").hide();

獲取所有無序列表的列表項：

$("ul/li")

 /* valid too: $("ul > li") */

取得name值為bar的輸入字段的值：

$("input[@name=bar]").val();

所有處于選中狀態的單選r按鈕：

$("input[@type=radio][@checked]")

如果你對查詢語言的工作原理還有疑問，可以訂閱這里的郵件列表。

CSS查詢器

jQuery完全支持CSS1.3。

關于CSS的一些資料查看下面的連接：

• CSS 1
• CSS 2
• CSS 3

下面列出來的是支持的CSS查詢器的列表式語法：

• * 任何元素
• E 類型為E的元素
• E:root 類型為E，并且是文檔的根元素
• E:nth-child(n) 是其父元素的第n個類型為E的子元素
• E:first-child 是其父元素的第1個類型為E的子元素
• E:last-child  是其父元素的最后一個類型為E的子元素
• E:only-child  且是其父元素的唯一一個類型為E的子元素
• E:empty 沒有子元素（包括text節點）的類型為E的元素
• E:enabled
• E:disabled 類型為E，允許或被禁止的用戶界面元素
• E:checked 類型為E，處于選中狀態的用戶界面元素（例如單選按鈕或復選框）
• E.warning 類型為E，且class屬性值為warning
• E#myid 類型為E，ID為 "myid"。（至多匹配一個元素）
• E:not(s) 類型為E，不匹配選擇器s
• E F 在類型E后面的類型為F的元素
• E > F 為E元素子元素的F元素
• E + F an F element immediately preceded by an E element
• E ~ F an F element preceded by an E element

不同之處

所有的屬性選擇器都被寫成和XPath極其相似（因為所有的屬性都以@符號開始）。

• E[@foo] 擁有foo屬性的E元素
• E[@foo=bar] foo屬性的值為bar的E元素
• E[@foo^=bar] foo屬性的值以字符串"bar"開始的E元素
• E[@foo$=bar] foo屬性的值以字符串"bar"結尾的E元素
• E[@foo*=bar] foo屬性的值包含有字符串"bar"結尾的E元素 

不支持的部分

• E:link
• E:visited an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
• E:active
• E:hover
• E:focus an E element during certain user actions
• E:target an E element being the target of the referring URI
• E::first-line the first formatted line of an E element
• E::first-letter the first formatted letter of an E element
• E::selection the portion of an E element that is currently selected/highlighted by the user
• E::before generated content before an E element
• E::after generated content after an E element

jQuery不支持下列的選擇器，因為這些沒什么用處。

• E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one
• E:nth-of-type(n) an E element, the n-th sibling of its type
• E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one
• E:first-of-type an E element, first sibling of its type
• E:last-of-type an E element, last sibling of its type
• E:only-of-type an E element, only sibling of its type
• E:lang(fr) an element of type E in language "fr"

XPath 查詢器

XPath是jQuery內置支持的一種表達式語言。jQuery支持基本的XPath表達式。

定位路徑

• 絕對路徑
  $("/html/body//p")
  $("/*/body//p")
  $("http://p/../div")
• 相對路徑
  $("a",this)
  $("p/a",this)

支持的Axis選擇器

• Descendant Element has a descendant element

 $("http://div//p")

• Child Element has a child element

 $("http://div/p")

• Preceding Sibling Element has an element before it, on the same axes

 $("http://div ~ form")

• Parent Selects the parent element of the element

 $("http://div/../p")
支持的謂詞

• [@*] 擁有一個屬性
  $("http://div[@*]")
• [@foo] 擁有foo屬性
  $("http://input[@checked]")
• [@foo='test'] 屬性foo值為'test'
  $("http://a[@ref='nofollow']")
• [Nodelist] Element contains a node list, for example: 
  $("http://div[p]")
  $("http://div[p/a]")

支持的謂詞，但與XPath和CSS又不同的

• [last()] or [position()=last()]改為:last
  $("p:last")
• [0] or [position()=0] 改為 :eq(0) or :first
  $("p:first")
  $("p:eq(0)")
• [position() < 5] 改為:lt(5)
  $("p:lt(5)")
• [position() > 2] 改為:gt(2)
  $("p:gt(2)")

定制的選擇器

jQuery包含一些在CSS和XPath都不用到的表達式，但我們覺得它們使用起來非常方便，所以包含進來了。

下列的列表式語法基于不同的CSS選擇器，但又有非常相似的名字。

• :even 從匹配的元素集中取序數為偶數的元素
• :odd 從匹配的元素集中取序數為奇數的元素
• :eq(0) and :nth(0) 從匹配的元素集中取第0個元素
• :gt(4) 從匹配的元素集中取序數大于N的元素
• :lt(4) 從匹配的元素集中取序數小于N的元素
• :first 相當于 :eq(0)
• :last 最后一個匹配的元素
• :parent 選擇包含子元素（包含text節點）的所有元素
• :contains('test') 選擇所有含有指定文本的元素
• :visible 選擇所有可見的元素（display值為block 或者visible 、visibility 值為visible的元素，不包括hide域）
• :hidden 選擇所有隱藏的元素(非Hide域，且display值為block 或者visible 、visibility 值為visible的元素)

例：

 $("p:first").css("fontWeight","bold");
$("div:hidden").show();
$("div:contains('test')").hide();

表單選擇器
這是為表單提供的一些選擇器：

• :input 選擇表單元素（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").

同樣也可以使用:hidden，詳細說明上面已經介紹過。

$('#myForm :input')

如果你需要指定表單：

$('input:radio', myForm)

這將選擇myForm表單中所有單選按鈕。選擇radio通常是用[@type=radio]，但是這樣用理精簡些。