首頁技術文章正文

jQuery選擇器大全【jQuery選擇器分類及用法】

更新時間:2021年07月19日15時42分來源:傳智教育瀏覽次數:

jQuery中的選擇器非常多，對于初學者來說，并沒有必要全部掌握，只記住常用的選擇器即可。當需要使用其他不熟悉的選擇器時，可以通過查閱文檔查看具體的解釋。為了方便讀者查閱，接下來簡單介紹一些其他在開發(fā)中可能會用到的選擇器。

1. 獲取同級元素

選擇器	功能描述	示例
prev + next	獲取當前元素緊鄰的下一個同級元素	$("div + .title")獲取緊鄰<div>的下一個class名為title的兄弟節(jié)點
prev ~ siblings	獲取當前元素后的所有同級元素	$(".bar ~ li")獲取class名為bar的元素后的所有同級元素節(jié)點<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	匹配當前獲取焦點的元素	$("input:focus")匹配當前獲取焦點的<input>元素
:animated	匹配所有正在執(zhí)行動畫效果的元素	$("div:not(:animated)")匹配當前沒有執(zhí)行動畫的<div>元素
:target	選擇由文檔URI的格式化識別碼表示的目標元素	若URI為`http://example.com/#foo`，則$("div:target")將獲取<div id="foo">元素
:contains(text)	獲取內容包含text文本的元素	$("li:contains('js')")獲取內容中含“js”的<li>元素
:empty	獲取內容為空的元素	$("li:empty")獲取內容為空的<li>元素
:has(selector)	獲取內容包含指定選擇器的元素	$("li:has('a')")獲取內容中含<a>元素的所有<li>元素
:parent	選取帶有子元素或包含文本的元素	$("li:parent")選取帶有子元素或包含文本的li元素
:hidden	獲取所有隱藏元素	$("li:hidden")獲取所有隱藏的<li>元素
:visible	獲取所有可見元素	$("li:visible")獲取所有可見的<li>元素

3. 屬性選擇器

jQuery中還提供了根據元素的屬性獲取指定元素的方式。例如，含有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開始的元素	$("div[class^='box']")獲取class屬性值以box開始的所有<div>元素
[attr$=value]	獲取屬性值以value結尾的元素	$("div[class$='er']")獲取class屬性值以er結尾的所有<div>元素
[attr*=value]	獲取屬性值包含value的元素	$("div[class*='-']")獲取class屬性值中含有“-”符號的所有<div>元素
[attr~=value]	獲取元素的屬性值包含一個value，以空格分隔	$("div[class~='box']")獲取class屬性值等于“box”或通過空格分隔并含有box的<div>元素，如“t box”
[attr1][attr2]...[attrN]	獲取同時擁有多個屬性的元素	$("input[id][name$='usr']")獲取同時含有id屬性和屬性值以usr結尾的name屬性的<input>元素

4. 子元素選擇器

利用子元素選擇器可以對子元素進行篩選，常用的如表4所示。

表4 子元素選擇器

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

5. 表單選擇器

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

表5 表單選擇器

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