jQuery 選擇器使用大全（標籤選擇器，ID選擇器等）

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)