選擇器

示例

選擇器

示例

標簽選擇器

a{ } p{ } ul{ }

ID選擇器

#ID{ }

類選擇器

.class{ }

群組選擇器

td,p,div,a{ }

后代選擇器

#link a{ }

通配符選擇器

*{ }

選擇器

描述

返回

示例

#id

根據id匹配

單元素

$(“#id”)

.class

根據類名匹配

集合

$(“.class”)

element

根據原色名匹配

集合

$(“element”)

*

匹配所有

集合

$(“*”)

Selector1,selector2….

將每個選擇器匹配到元素合并后一起返回

集合

$(“div,span,p.myClass”)選取所有div，span和clss為myClass的p標簽的一組元素

選擇器

描述

返回

示例

$(“p span”)

P元素里所有span元素

集合元素

$(“div span”)選取div里所有的span元素

$(“parent>child”)

選取parent下的子元素

集合元素

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

$(“prev + next”)

選取緊接prev元素后的next元素

集合元素

$(“.one+div”)選取class為one的下一個div元素

$(“prev ~ siblings”)

選取prev元素之后所有siblings元素

集合元素

$(“#two ~div”)選取id為two的元素后面所有div兄弟元素

?

選擇器

方法

等價關系

$(“.one + div”)

$(“.one”).next(“div”)

?

選擇器

方法

等價關系

$(“#prev~div”)

$(“#prev”).nextAll(“div”)

選擇器

描述

返回

示例

:first

獲取第一個元素

單個元素

$(“div:first”)獲取div中第一個div

:last

獲取最后一個元素

單個元素

$(“div:last”)獲取div中最后一個div

:not(selector)

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

集合元素

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

:even

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

集合元素

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

:odd

奇數

?

?

:eq(index)

選取索引等于index的元素(index從0開始)

單個元素

$(“input:eq(1)”)選取索引等于1的input元素

:gt(index)

選取索引大于index的元素

集合元素

$(“input:gt(1)”)選取索引大于1的input元素(*大于1，不包括1)

:lt(index)

選取索引小于index的元素

集合元素

與:gt()相反

:header

選取所有標題元素

集合元素

$(“:header”)選取網頁中所有標題

: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=”display: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$=“test”]”)選取擁有屬性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

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

集合元素

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

例：$(“ul li:first-child”)選取每個<ul>中第一個<li>元素

:last-child

與上例相反

集合元素

與上例相反

:only-child

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

集合元素

$(“ul li:only-child”)在<ul>中選取是唯一子元素的<li>元素

選擇器

描述

返回

示例

:enabled

選取所有可用元素

集合元素

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

:disabled

選取所有不可用元素

集合元素

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

:checked

選取所有被選中元素（單選框/復選框）

集合元素

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

:selected

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

集合元素

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

選擇器

描述

返回

示例

:input

選取所有<input>/<textarea>/<select>和<button>元素

集合元素

$(“: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”)