jQuery選擇器分為如下幾類(點選“名稱”會跳轉到此方法的jQuery官方說明文檔):
1. 基礎選擇器 Basics
名稱
說明
舉例
#id
根據元素Id選擇
$("divId") 選擇ID為divId的元素
element
根據元素的名稱選擇,
$("a") 選擇所有<a>元素
.class
根據元素的css類選擇
$(".bgRed") 選擇所用CSS類為bgRed的元素
*
選擇所有元素
$("*")選擇頁面所有元素
selector1,
selector2,
selectorN
可以将幾個選擇器用","分隔開然後再拼成一個選擇器字元串.會同時選中這幾個選擇器比對的内容.
$("#divId, a, .bgRed")
2.層次選擇器 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屬性的元素
3.基本過濾器 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)
比對所有大于給定索引值的元素
查找第二第三行,即索引值是1和2,也就是比0大:$("tr:gt(0)")
:lt(index)
選擇結果集中索引小于 N 的 elements
查找第一第二行,即索引值是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);
});
4. 内容過濾器 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")
5.可見性過濾器 Visibility Filters
:hidden
比對所有的不可見元素
注:在1.3.2版本中, hidden比對自身或者父類在文檔中不占用空間的元素.如果使用CSS visibility屬性讓其不顯示但是占位,則不輸入hidden.
查找所有不可見的 tr 元素:$("tr:hidden")
:visible
比對所有的可見元素
查找所有可見的 tr 元素:$("tr:visible")
6.屬性過濾器 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']")
7.子元素過濾器 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")
8.表單選擇器 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")
9.表單過濾器 Form Filters
:enabled
比對所有可用元素
查找所有可用的input元素:
$("input:enabled")
:disabled
比對所有不可用元素
查找所有不可用的input元素:
$("input:disabled")
:checked
比對所有選中的被選中元素(複選框、單選框等,不包括select中的option)
查找所有選中的複選框元素:
$("input:checked")
:selected
比對所有選中的option元素
查找所有選中的選項元素:
$("select option:selected")