jQuery - 選擇器詳解

襲冷發表於2014-04-13
jQuery
一、基礎選擇器 Basics
名稱 說明 舉例
#id 根據元素Id選擇 $("divId") 選擇ID為divId的元素
element 根據元素的名稱選擇, $("a") 選擇所有<a>元素
.class 根據元素的css類選擇 $(".bgRed") 選擇所用CSS類為bgRed的元素
* 選擇所有元素 $("*")選擇頁面所有元素
selector1, 
selector2, 
selectorN		 可以將幾個選擇器用","分隔開然後再拼成一個選擇器字串.會同時選中這幾個選擇器匹配的內容. $("#divId, a, .bgRed")

 

二、層次選擇器 Hierarchy
名稱 說明 舉例
ancestor descendant 使用"form input"的形式選中form中的所有input元素.即ancestor(祖先)為from, descendant(子孫)為input. $(".bgRed div") 選擇CSS類為bgRed的元素中的所有<div>元素.
parent > child 選擇parent的直接子節點child.  child必須包含在parent中並且父類是parent元素. $(".myList>li") 選擇CSS類為myList元素中的直接子節點<li>物件.
prev + next prev和next是兩個同級別的元素. 選中在prev元素後面的next元素. $("#hibiscus+img")選在id為hibiscus元素後面的img物件.
prev ~ siblings  選擇prev後面的根據siblings過濾的元素 
注:siblings是過濾器		 $("#someDiv~[title]")選擇id為someDiv的物件後面所有帶有title屬性的元素

 

三、基本過濾器 Basic Filters
名稱 說明 舉例
:first 匹配找到的第一個元素 查詢表格的第一行:$("tr:first")
:last 匹配找到的最後一個元素 查詢表格的最後一行:$("tr:last")
:not(selector) 去除所有與給定選擇器匹配的元素 查詢所有未選中的 input 元素: $("input:not(:checked)")
:even 匹配所有索引值為偶數的元素，從 0 開始計數 查詢表格的1、3、5...行:$("tr:even")
:odd 匹配所有索引值為奇數的元素，從 0 開始計數 查詢表格的2、4、6行:$("tr:odd")
:eq(index) 匹配一個給定索引值的元素 
注:index從 0 開始計數		 查詢第二行:$("tr:eq(1)")
:gt(index) 匹配所有大於給定索引值的元素 
注:index從 0 開始計數		 查詢第二第三行，即索引值是1和2，也就是比0大:$("tr:gt(0)")
:lt(index) 選擇結果集中索引小於 N 的 elements 
注:index從 0 開始計數		 查詢第一第二行，即索引值是0和1，也就是比2小:$("tr:lt(2)")
:header 選擇所有h1,h2,h3一類的header標籤. 給頁面內所有標題加上背景色: $(":header").css("background", "#EEE");
:animated 匹配所有正在執行動畫效果的元素 只有對不在執行動畫效果的元素執行一個動畫特效:

$("#run").click(function(){ 
  $("div:not(:animated)").animate({ left: "+=20" }, 1000); 
});

 

四、內容過濾器 Content Filters
名稱 說明 舉例
:contains(text) 匹配包含給定文字的元素 查詢所有包含 "John" 的 div 元素: $("div:contains('John')")
:empty 匹配所有不包含子元素或者文字的空元素 查詢所有不包含子元素或者文字的空元素: $("td:empty")
:has(selector) 匹配含有選擇器所匹配的元素的元素 給所有包含 p 元素的 div 元素新增一個 text 類:  $("div:has(p)").addClass("test");
:parent 匹配含有子元素或者文字的元素 查詢所有含有子元素或者文字的 td 元素: $("td:parent")

 

五、可見性過濾器  Visibility Filters
名稱 說明 舉例

:hidden

匹配所有的不可見元素

注:在1.3.2版本中, hidden匹配自身或者父類在文件中不佔用空間的元素.如果使用CSS visibility屬性讓其不顯示但是佔位,則不輸入hidden.

 查詢所有不可見的 tr 元素: $("tr:hidden")
:visible 匹配所有的可見元素 查詢所有可見的 tr 元素: $("tr:visible")

六、屬性過濾器 Attribute Filters
名稱 說明 舉例
[attribute] 匹配包含給定屬性的元素 查詢所有含有 id 屬性的 div 元素: 
$("div[id]")
[attribute=value] 匹配給定的屬性是某個特定值的元素 查詢所有 name 屬性是 newsletter 的 input 元素:
$("input[name='newsletter']").attr("checked", true);
[attribute!=value] 匹配給定的屬性是不包含某個特定值的元素 查詢所有 name 屬性不是 newsletter 的 input 元素: 
$("input[name!='newsletter']").attr("checked", true);
[attribute^=value] 匹配給定的屬性是以某些值開始的元素 $("input[name^='news']")
[attribute$=value] 匹配給定的屬性是以某些值結尾的元素 查詢所有 name 以 'letter' 結尾的 input 元素: 
$("input[name$='letter']")
[attribute*=value]

匹配給定的屬性是以包含某些值的元素

查詢所有 name 包含 'man' 的 input 元素: 
$("input[name*='man']")
[attributeFilter1][attributeFilter2][attributeFilterN] 複合屬性選擇器，需要同時滿足多個條件時使用。 找到所有含有 id 屬性，並且它的 name 屬性是以 man 結尾的: 
$("input[id][name$='man']")

七、子元素過濾器 Child Filters
名稱 說明 舉例

:nth-child(

    index|

    even|

    odd|

    equation

)

匹配其父元素下的第N個子或奇偶元素

':eq(index)' 只匹配一個元素，而這個將為每一個父元素匹配子元素。:nth-child從1開始的，而:eq()是從0算起的！

可以使用: 
nth-child(even) 
:nth-child(odd) 
:nth-child(3n) 
:nth-child(2) 
:nth-child(3n+1) 
:nth-child(3n+2)

 在每個 ul 查詢第 2 個li: 
$("ul li:nth-child(2)")
:first-child

匹配第一個子元素

':first' 只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素

 在每個 ul 中查詢第一個 li: 
$("ul li:first-child")
:last-child

匹配最後一個子元素

':last'只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素

 在每個 ul 中查詢最後一個 li: 
$("ul li:last-child")
:only-child

如果某個元素是父元素中唯一的子元素，那將會被匹配

如果父元素中含有其他元素，那將不會被匹配。

 在 ul 中查詢是唯一子元素的 li: 
$("ul li:only-child")

八、表單選擇器 Forms 
名稱 說明 解釋
:input 匹配所有 input, textarea, select 和 button 元素 查詢所有的input元素: $(":input")
:text 匹配所有的文字框 查詢所有文字框: $(":text")
:password 匹配所有密碼框 查詢所有密碼框: $(":password")
:radio 匹配所有單選按鈕 查詢所有單選按鈕
:checkbox 匹配所有核取方塊 查詢所有核取方塊: $(":checkbox")
:submit 匹配所有提交按鈕 查詢所有提交按鈕: $(":submit")
:image

匹配所有影象域

 匹配所有影象域: $(":image")
:reset 匹配所有重置按鈕 查詢所有重置按鈕: $(":reset")
:button 匹配所有按鈕 查詢所有按鈕: $(":button")
:file 匹配所有檔案域 查詢所有檔案域: $(":file")

九、表單過濾器 Form Filters
名稱 說明 解釋
:enabled

匹配所有可用元素

 查詢所有可用的input元素: $("input:enabled")
:disabled 匹配所有不可用元素 查詢所有不可用的input元素: $("input:disabled")
:checked 匹配所有被選中元素(復、單選框等，不含option) 查詢所有選中的核取方塊元素: $("input:checked")
:selected 匹配所有選中的option元素 查詢所有選中的選項元素: $("select option:selected")

 

十、參考網址

    http://www.blogjava.net/ywj-316/archive/2010/01/21/310340.html 

 

 

相關文章