這篇文章來(lái)介紹下jQuery的選擇器。

選擇器是jQuery的根基，在jQuery中，對(duì)事件處理、遍歷DOM和Ajax操作都依賴于選擇器。因此，如果能熟練的使用選擇器，不僅能簡(jiǎn)化代碼，而且可以達(dá)到事半功倍的效果。jQuery選擇器完全繼承了CSS的風(fēng)格。利用jQuery選擇器，可以非常便捷的找出特定的DOM元素，然后為它們添加相應(yīng)的行為，而無(wú)需擔(dān)心瀏覽器是否支持這一選擇器。

jQuery選擇器可簡(jiǎn)單分為基本選擇器、層次選擇器、過(guò)濾選擇器、表單選擇器。下面通過(guò)表格進(jìn)行一一介紹。

1.基本選擇器

選擇器描 述返 回示 例

#id	匹配給定的id	單個(gè)元素	$(“header”)
.class	匹配給定的類名	集合元素	$(“.test”)
E	匹配給定的標(biāo)簽名	集合元素	$(“div”)
*	匹配所有元素	集合元素	$(“*’)
E, .class, E…	匹配給定的集合	集合元素	$(“span, .tips”)

2.層次選擇器

選擇器描 述返 回示 例

$(“ancestor descendant”)	匹配ancestor里的所有 descendant(后代)元素	集合元素	$(“body div”)
$(“parent>child”)	匹配parent下的所有 child(子)元素	集合元素	$(“div>span”)
$(“prev+next”)	匹配緊接在prev后的 next元素	集合元素	$(“.error+span”)
$(“prev~siblings”)	匹配prev后的所有 siblings元素	集合元素	$(“span~a”)

3.過(guò)濾選擇器

3.1 基本過(guò)濾選擇器

選擇器描 述返 回示 例

:first	匹配第一個(gè)元素	單個(gè)元素	$(“div:first”)
:last	匹配最后一個(gè)元素	單個(gè)元素	$(“span:last”)
:even	匹配索引是偶數(shù)的元素 索引從0開(kāi)始	集合元素	$(“l(fā)i:even”)
: odd	匹配索引是奇數(shù)的元素 索引從0開(kāi)始	集合元素	$(“l(fā)i:odd”)
:eq(index)	匹配索引等于index的元 素(索引從0開(kāi)始)	單個(gè)元素	$(“input:eq(2)”)
:gt(index)	匹配索引大于index的元 素(索引從0開(kāi)始)	集合元素	$(“input:gt(1)”)
:lt(index)	匹配索引小于index的元 素(索引從0開(kāi)始)	集合元素	$(“input:lt(5)”)
:header	匹配所有h1,h2…等 標(biāo)題元素	集合元素	$(“:header”)
:animated	匹配所有正在執(zhí)行 動(dòng)畫的元素	集合元素	$(“div:animated”)

3.2 內(nèi)容過(guò)濾選擇器

選擇器描 述返 回示 例

:contains(text)	匹配含有文本內(nèi)容text 的元素	集合元素	$(“p:contains(今天)”)
:empty	匹配不含子元素或 文本元素的空元素	集合元素	$(“p:empty”)
:has(selector)	匹配包含selector元素 的元素	集合元素	$(“div:has(span)”)
:parent	匹配含有子元素或文本 的元素	集合元素	$(“div:parent”)

3.3 可見(jiàn)性過(guò)濾選擇器

選擇器描 述返 回示 例

:hidden	匹配所有不可見(jiàn) 的元素	集合元素	$(“:hidden”)
:visible	匹配所有可見(jiàn)元素	集合元素	$(“:visible”)

3.4 屬性過(guò)濾選擇器

選擇器描 述返 回示 例

[attr]	匹配擁有此屬性 的元素	集合元素	$(“img[alt]“)
[attr=value]	匹配屬性值為value 的元素	集合元素	$(“a[title=test]“)
[attr!=value]	匹配屬性值不等于 value的元素	集合元素	$(“a[title!=test]“)
[attr^=value]	匹配屬性值以value 開(kāi)頭的元素	集合元素	$(“img[alt^=welcome]“)
[attr$=value]	匹配屬性值以value 結(jié)尾的元素	集合元素	$(“img[alt$=last]“)
[attr*=vlaue]	匹配屬性值中含有 value的元素	集合元素	$(“div[title*=test]“)
[attr1][attr2]…	通過(guò)多個(gè)屬性 進(jìn)行匹配	集合元素	$(“div[id][title*=test]“)

3.5 子元素過(guò)濾選擇器

選擇器描 述返 回示 例

:nth-child	匹配每個(gè)父元素下的 第index個(gè)子元素 索引從1開(kāi)始	集合元素	$(“div:nth-child(2)”)
:first-child	匹配每個(gè)父元素的 第一個(gè)子元素	集合元素	$(“div:first-child”)
:last-child	匹配每個(gè)父元素的 最后一個(gè)子元素	集合元素	$(“div:last-child”)
: only-child	某元素是它父元素中 的唯一的子元素 則匹配它	集合元素	$(“div:only-child”)

3.6 表單對(duì)象屬性過(guò)濾選擇器

選擇器描 述返 回示 例

:enabled	匹配所有可用元素	集合元素	$(“form :enabled”)
:disabled	匹配所有不可用 的元素	集合元素	$(“form :disabled”)
:checked	匹配所有被選中的元素 (含單選框，復(fù)選框)	集合元素	$(“input:checked”)
:selected	匹配所有被選中的 選項(xiàng)元素	集合元素	$(“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”)

總結(jié)

以上是生活随笔為你收集整理的jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。