jQuery常用選擇器總結

選擇器

描述

返回

示例

#id

根據給定的id匹配一個元素

單個元素

$(“#test”)選取id為test的元素

.class

根據給定的類名匹配元素

集合元素

$(“.test”)選取所有class為test的元素

element

根據給定的的元素名匹配元素

集合元素

$(“p”) 選取所有的<p>元素

*

匹配所有元素

集合元素

$(“*”)選取所有元素

Selector1,Selector2, ……, SelectorN

將每一個選擇器匹配到的元素合併後一起返回

集合元素

$(“div,span,p.myClass”)選取所有<div>,<span>和擁有class為myClass的<p>標籤的一組元素

選擇器

描述

返回

示例

$(“ancestor  descendant”)

選取ancestor元素裡所有descendant（後代）元素

集合元素

$(“div span”)選取<div>裡所有的<span>元素

$(“parent>child”)

選取父元素下的子元素

集合元素

$(“div>span”)選取<div>下元素名為<span>的子元素

$(‘prev+next')

選取緊接在prev元素後的next元素

集合元素

$(‘.one+div') 選取class為one的下一個<div>元素（相鄰元素）

$(‘prev~siblings')

選取prev元素之後的所有元素

集合元素

$(‘.one+div') 選取class為one的元素後面所有<div>兄弟元素

選擇器

描述

返回

示例

:first

選取第一個元素

單個元素

$(“div:first”)選取所有<div>元素中第一個<div>元素

:last

選取最後一個元素

單個元素

$(“div:last”)選取所有<div>元素中最後一個<div>元素

:not(selector)

去除所有與給定選擇器匹配的元素

集合元素

$(“input:not(.myClass)”)選取class為不是myClass的<input>元素

:even

選取索引是偶數的所有元素，索引從0開始

集合元素

$(“input:even”) 選取索引是偶數的<input>元素

:odd

選取索引是奇數的所有元素，索引從0開始

集合元素

$(“input:odd”) 選取索引是奇數的<input>元素

:eq(index)

選取索引等於index的元素（index從0開始）

單個元素

$(“input:eq(1)”選取索引為1的<input>元素

:gt(index)

選取索引大於index的元素（index從0開始）

集合元素

$(“input:gt(1)”) 選取索引大於1的<input>元素（注：大於1，而不包括1）

:lt(index)

選取索引小於index的元素（index從0開始）

集合元素

$(“input:gt(1)”) 選取索引小於1的<input>元素（注：小於1，而不包括1）

:header

選取所有的標題元素，例如h1，h2，h3等待

集合元素

$(“:header”)選取網頁中所有的<h1>，<h2>，<h3>……

:animated

選取當前正在執行動畫的所有元素

集合元素

$(“div:animated”)選取正在執行動畫的<div>元素

選擇器

描述

返回

示例

:contains(text)

選取含有文字內容為”text”的元素

集合元素

$(“div:contains(‘我')”)選取含有文字“我”的<div>元素

:empty

選取不包含子元素或者文字的空元素

集合元素

$(“div:empty”)選取不包含子元素（包括文字元素）的<div>空元素

:has(selector)

選取含有選擇器所匹配的元素的元素

集合元素

$(“div:has(p)”) 選取含有<p>元素的<div>元素

:parent

選取含有子元素或者文字元素

集合元素

$(“div:parent”) 選取擁有子元素（包括文字元素）的<div>元素

選擇器

描述

返回

示例

:hidden

選取所有不可見的元素

集合元素

$(“:hidden”)選取所有不可見的元素。包括<input type=”hidden”>，<div style=”disply:none;>和<div style=”visibility:hidden;”>等元素。如果只想選取<input>元素，可以使用$(“input:hidden”)

:visible

選取不包含子元素或者文字的空元素

集合元素

$(“div:visible”)選取所有可見的<div>元素

選擇器

描述

返回

示例

[attribute]

選取擁有此屬性的元素

集合元素

$(“div[id]”)選取擁有屬性id的元素

[attribute=value]

選取屬性的值為value的元素

集合元素

$(“div[title=test]”)選取屬性title為”test”的<div>元素

[attribute!=value]

選取屬性的值不等於value的元素

集合元素

$(“div[title!=test]”)選取屬性title不等於”test”的<div>元素（注意：沒有屬性的title的<div>元素也會被選取）

[attribute^=value]

選取屬性的值以value開始的元素

集合元素

$(“div[title^=test]”)選取屬性title以”test”開始的<div>元素

[attribute$=value]

選取屬性的值以value結束的元素

集合元素

$(“div[title$=test]”)選取屬性title以”test”結束的<div>元素

[attribute*=value]

選取屬性值含有value的元素

集合元素

$(“div[title*=test]”)選取屬性title含有”test”的<div>元素

[selector1][selector2][selectorN]

用屬性選擇器合併成一個複合屬性選擇器，滿足多個條件。每個選擇一次，縮小一次範圍

集合元素

$(“div[id][title$='tets']”)選取擁有屬性id，並且屬性title以”test”結束的<div>元素

選擇器

描述

返回

示例

:nth-child(index/even/odd/equation)

選取每個父元素下的第index個子元素或者奇偶元素（index從1算起）

集合元素

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

:first-child

選取每個父元素的第一個子元素

集合元素

:first只返回單個元素，而:first-child選擇符將為每個父元素匹配第一個子元素

:last-child

選取每個父元素的最後一個子元素

集合元素

:last只返回單個元素，而:last-child選擇符將為每個父元素匹配最後一個子元素

:only-child

如果某個元素是它父元素中唯一的子元素，那麼將會被匹配。如果父元素中含有其他元素，則不會被匹配

集合元素

選擇器

描述

返回

示例

:enabled

選取所有可用元素

集合元素

$(“#form1:enabled”) ;選取id為”form1”的表單內的所有可用元素

:disabled

選取所有不可用元素

集合元素

$(“#form1:disabled”) ;選取id為”form1”的表單內的所有不可用元素

:checked

選取所有被選中的元素(單選框，核取方塊)

集合元素

$(“input:checked”);選取所有被選中的<input>元素

:selected

選取所有被選中的選項元素(下拉選單)

集合元素

$(“select:selected”);選取所有被選中的選項元素

選擇器

描述

返回

示例

:input

選取所有可用元素

集合元素

$(“:input”) 選取所有<input>、<textarea>、<select>和<button>元素

:text

選取所有不可用元素

集合元素

$(“:text”) 選取所有的單行文字

:password

選取所有的密碼框

集合元素

$(“: password”)選取所有的密碼框

:radio

選取所有的單選框

集合元素

$(“:radio”)選取所有的單選框

:checkbox

選取所有的多選框

集合元素

$(“:checkbox”)選取所有的多選框

:submit

選取所有的提交按鈕

集合元素

$(“:submit”)選取所有的提交按鈕

:image

選取所有的影象按鈕

集合元素

$(“:image”)選取所有的影象按鈕

:reset

選取所有的重置按鈕

集合元素

$(“:reset”)選取所有的重置按鈕

:button

選取所有的按鈕

集合元素

$(“:button”)選取所有按鈕

:file

選取所有的上傳域

集合元素

$(:file)選取所有的上傳域

:hidden

選取所有不可見元素

集合元素

$(“:hidden”)選取所有不可見元素