導讀：
本文轉自
http://17log.com/show-51-1.html
jQuery 選擇器的使用
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")
$("//p/../div")
相對路徑
$("a",this)
$("p/a",this)
支持的Axis選擇器
Descendant Element has a descendant element
$("//div//p")
Child Element has a child element
$("//div/p")
Preceding Sibling Element has an element before it, on the same axes
$("//div ~ form")
Parent Selects the parent element of the element
$("//div/../p")
支持的謂詞
[@*] 擁有一個屬性
$("//div[@*]")
[@foo] 擁有foo屬性
$("//input[@checked]")
[@foo='test'] 屬性foo值爲'test'
$("//a[@ref='nofollow']")
[Nodelist] Element contains a node list, for example:
$("//div[p]")
$("//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]，但是這樣用理精簡些。
更多的選擇器
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)
同時使用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")
$("//p/../div")
相對路徑
$("a",this)
$("p/a",this)
支持的Axis選擇器
Descendant Element has a descendant element
$("//div//p")
Child Element has a child element
$("//div/p")
Preceding Sibling Element has an element before it, on the same axes
$("//div ~ form")
Parent Selects the parent element of the element
$("//div/../p")
支持的謂詞
[@*] 擁有一個屬性
$("//div[@*]")
[@foo] 擁有foo屬性
$("//input[@checked]")
[@foo='test'] 屬性foo值爲'test'
$("//a[@ref='nofollow']")
[Nodelist] Element contains a node list, for example:
$("//div[p]")
$("//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]，但是這樣用理精簡些。
更多的選擇器
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://17log.com/show-51-1.html
