jQuery 選擇器使用大全(標籤選擇器,ID選擇器等)
阿新 • • 發佈:2019-09-21
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][
如果你對查詢語言的工作原理還有疑問,可以訂閱這裡的郵件列表。
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元素
不支援的部分
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)