各jQuery選擇器的用法(轉)

這篇文章來介紹下jQuery的選擇器。

選擇器是jQuery的根基，在jQuery中，對事件處理、遍歷DOM和Ajax操做都依 賴於選擇器。所以，若是能熟練的使用選擇器，不只能簡化代碼，並且能夠達到事半功倍的效果。jQuery選擇器徹底繼承了CSS的風格。利用jQuery 選擇器，能夠很是便捷的找出特定的DOM元素，而後爲它們添加相應的行爲，而無需擔憂瀏覽器是否支持這一選擇器。

jQuery選擇器可簡單分爲基本選擇器、層次選擇器、過濾選擇器、表單選擇器。下面經過表格進行一一介紹。

1.基本選擇器

選擇器	描 述	返 回	示 例
$("#id")	匹配給定的id	單個元素	$(「header」)
$(".class")	匹配給定的類名	集合元素	$(「.test」)
$("E")	匹配給定的標籤名	集合元素	$(「div」)
$("*")	匹配全部元素	集合元素	$(「*’)
$("E1, .class, E2,…")	並集，等價於$(「E1」) U $(「.class」) U $(「E2」) U ……	集合元素	$(「span, .tips」)
$("E.class")（只能 是標籤名.類名形式）	交集，等價於$(「E1」) ∩ $(「.class」)。注意它和 層次選擇器$("E .class")的區別，層次選擇器要用 空格分開，$("E .class")是在$("E")的後代中查找， 而$(「E.class」)只在$(「E」)元素中查找，不是在其 後代中查找	集合元素	$(「div.test」)

2.層次選擇器

選擇器	描 述	返 回	示 例
$(「ancestor descendant1 descendant2 ……」)	add by zhj 一、查找知足ancestor條件的元素集，假設元素集爲A1 二、從A1的全部後代中查找知足descendant1條件的元素集A2 三、從A2的全部後代中查找知足descendant2條件的元素集A3 四、…… 上面所說的後代即子代+孫代+…… 等價於$("ancestor").find("descendant1").find("descendant2").find("……") 可能有人會問，既然是從全部後代中查找，那 $(「ancestor descendant1 descendant2  ……  descendantN」)是否等價於 $(「ancestor descendantN」),固然不是，以下。 $(「#go .hi .my」)是藍色背景的標籤，而$("#go my")是藍色和紅色背景的標籤 <div id = "go">     <div class = "hi">        <div class = "my">        </div>     </div>     <div class = "my">     </div> </div> 其實最經常使用的仍是兩次查找的形式，即$(「ancestor descendant1")，屢次查找用的場合並很少。	集合元素	$(「body div」) $("div .test"); $("div .test .mytest")
$(「parent>child」)	匹配parent下的全部 child(子)元素	集合元素	$(「div>span」)
$(「prev+next」)	匹配緊接在prev後的 next元素	集合元素	$(「.error+span」)
$(「prev~siblings」)	匹配prev後的全部 siblings元素	集合元素	$(「span~a」)

3.過濾選擇器

3.1 基本過濾選擇器

選擇器	描 述	返 回	示 例
:first	匹配第一個元素	單個元素	$(「div:first」)
:last	匹配最後一個元素	單個元素	$(「span:last」)
:even	匹配索引是偶數的元素 索引從0開始	集合元素	$(「li:even」)
: odd	匹配索引是奇數的元素 索引從0開始	集合元素	$(「li:odd」)
:eq(index)	匹配索引等於index的元 素(索引從0開始)	單個元素	$(「input:eq(2)」)
:gt(index)	匹配索引大於index的元 素(索引從0開始)	集合元素	$(「input:gt(1)」)
:lt(index)	匹配索引小於index的元 素(索引從0開始)	集合元素	$(「input:lt(5)」)
:header	匹配全部h1,h2…等 標題元素	集合元素	$(「:header」)
:animated	匹配全部正在執行 動畫的元素	集合元素	$(「div:animated」)

3.2 內容過濾選擇器

選擇器	描 述	返 回	示 例
:contains(text)	匹配含有文本內容text 的元素	集合元素	$(「p:contains(今天)」)
:empty	匹配不含子元素或 文本元素的空元素	集合元素	$(「p:empty」)
:has(selector)	匹配包含selector元素 的元素	集合元素	$(「div:has(span)」)
:parent	匹配含有子元素或文本 的元素	集合元素	$(「div:parent」)

3.3 可見性過濾選擇器

選擇器	描 述	返 回	示 例
:hidden	匹配全部不可見 的元素	集合元素	$(「:hidden」)
:visible	匹配全部可見元素	集合元素	$(「:visible」)

3.4 屬性過濾選擇器

選擇器	描 述	返 回	示 例
[attr]	匹配擁有此屬性 的元素	集合元素	$(「img[alt]「)
[attr=value]	匹配屬性值爲value 的元素	集合元素	$(「a[title=test]「)
[attr!=value]	匹配屬性值不等於 value的元素	集合元素	$(「a[title!=test]「)
[attr^=value]	匹配屬性值以value 開頭的元素	集合元素	$(「img[alt^=welcome]「)
[attr$=value]	匹配屬性值以value 結尾的元素	集合元素	$(「img[alt$=last]「)
[attr*=vlaue]	匹配屬性值中含有 value的元素	集合元素	$(「div[title*=test]「)
[attr1][attr2]…	經過多個屬性 進行匹配	集合元素	$(「div[id][title*=test]「)

3.5 子元素過濾選擇器

選擇器	描 述	返 回	示 例
:nth-child	匹配每一個父元素下的 第index個子元素 索引從1開始	集合元素	$(「div:nth-child(2)」)
:first-child	匹配每一個父元素的 第一個子元素	集合元素	$(「div:first-child」)
:last-child	匹配每一個父元素的 最後一個子元素	集合元素	$(「div:last-child」)
: only-child	某元素是它父元素中 的惟一的子元素 則匹配它	集合元素	$(「div:only-child」)

3.6 表單對象屬性過濾選擇器

選擇器	描 述	返 回	示 例
:enabled	匹配全部可用元素	集合元素	$(「form :enabled」)
:disabled	匹配全部不可用 的元素	集合元素	$(「form :disabled」)
:checked	匹配全部被選中的元素 (含單選框，複選框)	集合元素	$(「input:checked」)
:selected	匹配全部被選中的 選項元素	集合元素	$(「select :selected」)

4.表單選擇器

 

選擇器	描 述	返 回	示 例
:input	匹配全部input, textarea, select, button元素	集合元素	$(「input」)
:text	匹配全部文本框	集合元素	$(「:text」)
:password	匹配全部密碼框	集合元素	$(「:password」)
:radio	匹配全部單選框	集合元素	$(「:radio」)
:checkbox	匹配全部全部多選框	集合元素	$(「:checkbox」)
:submit	匹配全部提交按鈕	集合元素	$(「:submit」)
:image	匹配全部圖像按鈕	集合元素	$(「:image」)
:reset	匹配全部重置按鈕	集合元素	$(「:reset」)
:button	匹配全部按鈕	集合元素	$(「:button」)
:file	匹配全部上傳域	集合元素	$(「:file」)