jQuery選擇器及用法大全

更新時(shí)間:2021-07-19 來(lái)源:黑馬程序員瀏覽量:

IT培訓(xùn)班

jQuery中的選擇器非常多，對(duì)于初學(xué)者來(lái)說(shuō)，并沒(méi)有必要全部掌握，只記住常用的選擇器即可。當(dāng)需要使用其他不熟悉的選擇器時(shí)，可以通過(guò)查閱文檔查看具體的解釋。為了方便讀者查閱，接下來(lái)簡(jiǎn)單介紹一些其他在開(kāi)發(fā)中可能會(huì)用到的選擇器。

1. 獲取同級(jí)元素

選擇器	功能描述	示例
prev + next	獲取當(dāng)前元素緊鄰的下一個(gè)同級(jí)元素	$("div + .title")獲取緊鄰<div>的下一個(gè)class名為title的兄弟節(jié)點(diǎn)
prev ~ siblings	獲取當(dāng)前元素后的所有同級(jí)元素	$(".bar ~ li")獲取class名為bar的元素后的所有同級(jí)元素節(jié)點(diǎn)<li>

2. 篩選元素

在jQuery中還有一些選擇器可以篩選元素，如表2所示。

表2 篩選元素

選擇器	功能描述	示例
:gt(index)	獲取索引大于index的元素	$("li:gt(3)")獲取索引大于3的所有<li>元素
:lt(index)	獲取索引小于index的元素	$("li:lt(3)")獲取索引小于3的所有<li>元素
:not(seletor)	獲取除指定的選擇器外的其他元素	$("li:not(li:eq(3))")獲取除索引為3外的所有<li>元素
:focus	匹配當(dāng)前獲取焦點(diǎn)的元素	$("input:focus")匹配當(dāng)前獲取焦點(diǎn)的<input>元素
:animated	匹配所有正在執(zhí)行動(dòng)畫(huà)效果的元素	$("div:not(:animated)")匹配當(dāng)前沒(méi)有執(zhí)行動(dòng)畫(huà)的<div>元素
:target	選擇由文檔URI的格式化識(shí)別碼表示的目標(biāo)元素	若URI為`http://example.com/#foo`，則$("div:target")將獲取<div id="foo">元素
:contains(text)	獲取內(nèi)容包含text文本的元素	$("li:contains('js')")獲取內(nèi)容中含“js”的<li>元素
:empty	獲取內(nèi)容為空的元素	$("li:empty")獲取內(nèi)容為空的<li>元素
:has(selector)	獲取內(nèi)容包含指定選擇器的元素	$("li:has('a')")獲取內(nèi)容中含<a>元素的所有<li>元素
:parent	選取帶有子元素或包含文本的元素	$("li:parent")選取帶有子元素或包含文本的li元素
:hidden	獲取所有隱藏元素	$("li:hidden")獲取所有隱藏的<li>元素
:visible	獲取所有可見(jiàn)元素	$("li:visible")獲取所有可見(jiàn)的<li>元素

3. 屬性選擇器

jQuery中還提供了根據(jù)元素的屬性獲取指定元素的方式。例如，含有class屬性值為current的<div>元素。常用的屬性選擇器如表3所示。

表3 屬性選擇器。

選擇器	功能描述	示例
[attr]	獲取具有指定屬性的元素	$("div[class]")獲取含有class屬性的所有<div>元素
[attr=value]	獲取屬性值等于value的元素	$("div[class='current']")獲取class等于current的所有<div>元素
[attr!=value]	獲取屬性值不等于value的元素	$("div[class!='current']")獲取class不等于current的所有<div>元素
[attr^=value]	獲取屬性值以value開(kāi)始的元素	$("div[class^='box']")獲取class屬性值以box開(kāi)始的所有<div>元素
[attr$=value]	獲取屬性值以value結(jié)尾的元素	$("div[class$='er']")獲取class屬性值以er結(jié)尾的所有<div>元素
[attr*=value]	獲取屬性值包含value的元素	$("div[class*='-']")獲取class屬性值中含有“-”符號(hào)的所有<div>元素
[attr~=value]	獲取元素的屬性值包含一個(gè)value，以空格分隔	$("div[class~='box']")獲取class屬性值等于“box”或通過(guò)空格分隔并含有box的<div>元素，如“t box”
[attr1][attr2]...[attrN]	獲取同時(shí)擁有多個(gè)屬性的元素	$("input[id][name$='usr']")獲取同時(shí)含有id屬性和屬性值以u(píng)sr結(jié)尾的name屬性的<input>元素

4. 子元素選擇器

利用子元素選擇器可以對(duì)子元素進(jìn)行篩選，常用的如表4所示。

表4 子元素選擇器

選擇器	功能描述
:nth-child(index/even/odd/公式)	索引index默認(rèn)從1開(kāi)始，匹配指定index索引、偶數(shù)、奇數(shù)、或符合指定公式（如2n，n默認(rèn)從0開(kāi)始）的子元素
:first-child	獲取第一個(gè)子元素
:last-child	獲取最后一個(gè)子元素
:only-child	如果當(dāng)前元素是唯一的子元素，則匹配
:nth-last-child(index/even/odd/公式)	選擇所有它們父元素的第n個(gè)子元素。計(jì)數(shù)從最后一個(gè)元素開(kāi)始到第一個(gè)
:nth-of-type(index/even/odd/公式))	選擇同屬于一個(gè)父元素之下，并且標(biāo)簽名相同的子元素中的第n個(gè)子元素
:first-of-type	選擇所有相同的元素名稱(chēng)的第一個(gè)子元素
:last-of-type	選擇所有相同的元素名稱(chēng)的最后一個(gè)子元素
:only-of-type	選擇所有沒(méi)有兄弟元素，且具有相同的元素名稱(chēng)的元素
:nth-last-of-type(index/even/odd/公式)	選擇屬于父元素的特定類(lèi)型的第n個(gè)子元素，計(jì)數(shù)從最后一個(gè)元素到第一個(gè)

5. 表單選擇器

jQuery還提供了針對(duì)表單元素的選擇器，用來(lái)方便表單開(kāi)發(fā)，如表5所示。

表5 表單選擇器

選擇器	功能描述
:input	獲取頁(yè)面中的所有表單元素，包含<select>以及<textarea>元素
:text	選取頁(yè)面中的所有文本框
:password	選取所有的密碼框
:radio	選取所有的單選按鈕
:checkbox	選取所有的復(fù)選框
:submit	獲取submit提交按鈕
:reset	獲取reset重置按鈕
:image	獲取type="image"的圖像域
:button	獲取button按鈕，包括<button></button>和type="button"
:file	獲取type="file"的文件域
:hidden	獲取隱藏表單項(xiàng)
:enabled	獲取所有可用表單元素
:disabled	獲取所有不可用表單元素
:checked	獲取所有選中的表單元素，主要針對(duì)radio和checkbox
:selected	獲取所有選中的表單元素，主要針對(duì)select

需要注意的是，$("input")與$(":input")雖然都可以獲取表單項(xiàng)，但是它們表達(dá)的含義有一定的區(qū)別，前者僅能獲取表單標(biāo)簽是<input>的控件，后者則可以同時(shí)獲取頁(yè)面中所有的表單控件，包括表單標(biāo)簽是<select>以及<textarea>的控件。

猜你喜歡：

Jquery常用的選擇器有哪些？用途有什么不同？

jQuery怎樣使用選擇器獲取元素？

jQery選擇器怎樣篩選元素？

JQuery--數(shù)據(jù)庫(kù)階段總結(jié)

黑馬程序員前端高手班培訓(xùn)

上一篇：什么是動(dòng)畫(huà)隊(duì)列？怎樣停止動(dòng)畫(huà)隊(duì)列效果？ 下一篇：ES6 的 class 和構(gòu)造函數(shù)的區(qū)別