---

title: 《鋒利的jQuery》二、jQuery的選擇器
date: 2017-06-13 14:14:37
tags: 鋒利的jQuery

---

基本選擇器

選擇器描述返回示例

#id	根據(jù)給定的id匹配一個(gè)元素	單個(gè)元素	$('#test')選取id為test的元素
.class	根據(jù)給定的類名匹配元素	集合元素	$('.test')選取所有class為test的元素
element	根據(jù)給定的元素名匹配元素	集合元素	$('p')選取所有<p>元素
*	匹配所有元素	集合元素	$('*')選取所有元素
selector1,selector2...`	將每個(gè)選擇器匹配到的元素合并后一起返回	集合元素	$('div,span,p.myClass')選取所有<div>``<span>和擁有class為myClass的<p>標(biāo)簽的一組元素

層次選擇器

層次選擇器用來獲取后代元素、子元素、相鄰元素和同級(jí)元素等。

選擇器描述返回示例

$('ancestor descendant')	選取ancestor元素里所有的descendant(后代)元素	集合元素	$('div span')選取<div>里的所有的<span>元素
$('parent>child')	選取parent元素下的child(子)元素	集合元素	$('div>span')選取<div>元素下元素名是<span>的子元素
$('prev + next')	選取緊接在prev元素后的next元素	單個(gè)元素	$('.one + div')選取class為one的下一個(gè)<div>同級(jí)元素，可以用$('.one').next('div')代替
$('prev~siblings')	選取prev元素之后的所有siblings元素	集合元素	$('#two~div')選取id為two的元素后面的所有<div>同級(jí)元素，可以用$('#two').nextAll('div')代替

過濾選擇器

通過特定的過濾規(guī)則來選定元素。

基本過濾選擇器

選擇器描述返回示例

:first	選取第一個(gè)元素	單個(gè)元素	$('div:first')選取所有<div>元素中第1個(gè)<div>元素
:last	選取最后一個(gè)元素	單個(gè)元素	$('div:last')選取所有<div>元素中的最后一個(gè)<div>元素
:not(selector)	去除所有與給定選擇器匹配的元素	集合元素	$('input:not(.myClass)')選取class不是myClass的<input>元素
:even	選取索引是偶數(shù)的所有元素	集合元素	$('input:even')選取索引是偶數(shù)的<input>元素
:odd	選取索引是奇數(shù)的所有元素	集合元素	$('input:odd')選取索引是奇數(shù)的<input>元素
:eq(index)	選取索引等于index的元素	單個(gè)元素	$('input:eq(1)')選取索引等于1的<input>元素
:gt(index)	選取索引大于index的元素(不包括index本身)	集合元素	$('input:gt(1)')選取索引大于1的<input>元素
:lt(index)	選取索引小于index的元素(不包括index本身)	集合元素	$('input:lt(1)')選取索引小于1的<input>元素
:header	選取所有標(biāo)題元素	集合元素	$(':header')選取網(wǎng)頁(yè)中所有標(biāo)題元素
:animated	選取當(dāng)前正在執(zhí)行動(dòng)畫的所有元素	集合元素	$('div:animated')選取正在執(zhí)行動(dòng)畫的<div>元素
:focus	選區(qū)當(dāng)前獲取焦點(diǎn)的元素	集合元素	$(':focus')選取當(dāng)前獲取焦點(diǎn)的元素

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

選擇器描述返回示例

:contains(text)	選取含有文本內(nèi)容為'text'的元素	集合元素	$('div:contains('我')')選取含有文本'我'的<div>元素
:empty	選取不包含子元素或者文本的空元素	集合元素	$('div:empty')選取不包含子元素(包含文本元素)的<div>空元素
:has(selector)	選取含有選擇器所匹配的元素的元素	集合元素	$('div:has(p)')選取還有<p>元素的<div>元素
:parent	選取含有子元素或者文本的元素	集合元素	$(div:parent)選取擁有子元素(包含文本元素)的<div>元素

可見性過濾選擇器

選擇器描述返回示例

:hidden	選取所有不可見的元素	集合元素	$(':hidden')選取所有不可見的元素，包括visibility:hidden、display:none、type='hidden'
:visible	選取所有可見的元素	集合元素	$('div:visible')選取所有可見的<div>元素

屬性過濾選擇器

選擇器描述返回示例

[attribute]	選取擁有此屬性的元素	集合元素	$('div[id]')選取擁有屬性id的<div>元素
[attribute=value]	選取屬性的值為value的元素	集合元素	$('div[title=test]')選擇屬性title為'test'的<div>元素
[attribute!=value]	選取屬性的值不等于value的元素	集合元素	$('div[title!=test]')選取屬性title不等于'test'的<div>元素(沒有title屬性的元素也會(huì)被選取)
[attribute^=value]	選取屬性的值以value開始的元素	集合元素	$('div[title^=test]')選取屬性title以'test'開始的<div>元素
[attribute$=value]	選取屬性的值以value結(jié)束的元素	集合元素	$('div[title$=test]')選取屬性title以'test'結(jié)束的<div>元素
[attribute*=value]	選取屬性的值含有value的元素	集合元素	$('div[title*=test]') 選取屬性title含有'test'的<div>元素
[attribute<span>|</span>=value]	選取屬性等于給定字符串或以該字符串為前綴(該字符串后跟一個(gè)連字符'-'的元素)	集合元素	$(div[title<span>|</span>='en'])選取title屬性等于en或以en為前綴的<div>元素
[attribute~=value]	選取屬性用空格分隔的值中包含一個(gè)給定值的元素	集合元素	$(div[title~='uk'])選取屬性title用空格分隔的值中包含字符uk的元素
[attributeN]	用屬性選擇器合并成一個(gè)復(fù)合屬性選擇器，滿足多個(gè)條件。每選擇一次，縮小一次范圍	集合元素	$('div[id][title$='test']')選取擁有屬性id，并且屬性title以'test'結(jié)束的<div>元素

子元素過濾選擇器

選擇器描述返回示例

:nth-child(index/even/odd/equation)	選取每個(gè)父元素下的第index個(gè)子元素或者奇偶元素(index從1算起)	集合元素	:eq(index)只匹配一個(gè)元素，而:nth-child將為每一個(gè)父元素匹配子元素，并且:nth-child(index)的index是從1開始的，而:eq(index)是從0算起的
:first-child	選取每個(gè)父元素的第1個(gè)子元素	集合元素	:first只返回單個(gè)元素，而:first-child選擇符將為每個(gè)父元素匹配第1個(gè)子元素。例如$('ul li:first-child');選取每個(gè)<ul>中第1個(gè)<li>元素
:last-child	選取每個(gè)父元素的最后一個(gè)子元素	集合元素	區(qū)別和上面相同，$('ul li:last-child');選取每個(gè)<ul>中最后一個(gè)<li>元素
:only-child	如果某個(gè)元素是它父元素中唯一的子元素，那么將會(huì)被匹配。如果父元素中含有其他元素，則不會(huì)被匹配	集合元素	$(ul li:only-child)在<ul>中選取是惟一子元素的<li>元素

表單屬性過濾選擇器

選擇器描述返回示例

:enabled	選取所有可用元素	集合元素	$('#form1 :enabled');選取id為form1的表單內(nèi)所有可用的元素
:disabled	選取所有不可用元素	集合元素	$('#form1 :disabled');選取id為form2的表單內(nèi)的所有不可用的元素
:checked	選取所有被選中的元素	集合元素	$('input:checked');選取所有被選中的<input>元素
:selected	選取所有被選中的選項(xiàng)元素	集合元素	$(select option:selected);選取所有被選中的選項(xiàng)元素

表單選擇器

為了使用戶能夠更加靈活的操作表單，可以使用表單選擇器，更加方便的獲取到表單的某個(gè)類型的元素。

選擇器描述返回示例

: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')選取所有不可見元素

使用選擇器的注意事項(xiàng)

含有'·'、'#'、'('或']'等特殊字符

碰到id或者class屬性值帶有這些特殊字符的需要轉(zhuǎn)譯之后才能使用，不能直接寫

$('#box#b')這種不經(jīng)過轉(zhuǎn)譯的寫法是錯(cuò)誤的，應(yīng)該寫為$('#box\#b')，通過`\`進(jìn)行轉(zhuǎn)譯。

總結(jié)

以上是生活随笔為你收集整理的《锋利的jQuery》二、jQuery的选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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