title: 《鋒利的jQuery》二、jQuery的選擇器
date: 2017-06-13 14:14:37
tags: 鋒利的jQuery
基本選擇器
| 選擇器 |
描述 |
返回 |
示例 |
| #id |
根據(jù)給定的id匹配一個元素 |
單個元素 |
$('#test')選取id為test的元素 |
| .class |
根據(jù)給定的類名匹配元素 |
集合元素 |
$('.test')選取所有class為test的元素 |
| element |
根據(jù)給定的元素名匹配元素 |
集合元素 |
$('p')選取所有<p>元素 |
| * |
匹配所有元素 |
集合元素 |
$('*')選取所有元素 |
| selector1,selector2...` |
將每個選擇器匹配到的元素合并后一起返回 |
集合元素 |
$('div,span,p.myClass')選取所有<div>``<span>和擁有class為myClass的<p>標(biāo)簽的一組元素 |
層次選擇器
層次選擇器用來獲取后代元素、子元素、相鄰元素和同級元素等。
| 選擇器 |
描述 |
返回 |
示例 |
| $('ancestor descendant') |
選取ancestor元素里所有的descendant(后代)元素 |
集合元素 |
$('div span')選取<div>里的所有的<span>元素 |
| $('parent>child') |
選取parent元素下的child(子)元素 |
集合元素 |
$('div>span')選取<div>元素下元素名是<span>的子元素 |
| $('prev + next') |
選取緊接在prev元素后的next元素 |
單個元素 |
$('.one + div')選取class為one的下一個<div>同級元素，可以用$('.one').next('div')代替 |
| $('prev~siblings') |
選取prev元素之后的所有siblings元素 |
集合元素 |
$('#two~div')選取id為two的元素后面的所有<div>同級元素，可以用$('#two').nextAll('div')代替 |
過濾選擇器
通過特定的過濾規(guī)則來選定元素。
基本過濾選擇器
| 選擇器 |
描述 |
返回 |
示例 |
| :first |
選取第一個元素 |
單個元素 |
$('div:first')選取所有<div>元素中第1個<div>元素 |
| :last |
選取最后一個元素 |
單個元素 |
$('div:last')選取所有<div>元素中的最后一個<div>元素 |
| :not(selector) |
去除所有與給定選擇器匹配的元素 |
集合元素 |
$('input:not(.myClass)')選取class不是myClass的<input>元素 |
| :even |
選取索引是偶數(shù)的所有元素 |
集合元素 |
$('input:even')選取索引是偶數(shù)的<input>元素 |
| :odd |
選取索引是奇數(shù)的所有元素 |
集合元素 |
$('input:odd')選取索引是奇數(shù)的<input>元素 |
| :eq(index) |
選取索引等于index的元素 |
單個元素 |
$('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)頁中所有標(biāo)題元素 |
| :animated |
選取當(dāng)前正在執(zhí)行動畫的所有元素 |
集合元素 |
$('div:animated')選取正在執(zhí)行動畫的<div>元素 |
| :focus |
選區(qū)當(dāng)前獲取焦點的元素 |
集合元素 |
$(':focus')選取當(dāng)前獲取焦點的元素 |
內(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屬性的元素也會被選取) |
| [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] |
選取屬性等于給定字符串或以該字符串為前綴(該字符串后跟一個連字符'-'的元素) |
集合元素 |
$(div[title<span>|</span>='en'])選取title屬性等于en或以en為前綴的<div>元素 |
| [attribute~=value] |
選取屬性用空格分隔的值中包含一個給定值的元素 |
集合元素 |
$(div[title~='uk'])選取屬性title用空格分隔的值中包含字符uk的元素 |
| [attributeN] |
用屬性選擇器合并成一個復(fù)合屬性選擇器，滿足多個條件。每選擇一次，縮小一次范圍 |
集合元素 |
$('div[id][title$='test']')選取擁有屬性id，并且屬性title以'test'結(jié)束的<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選擇符將為每個父元素匹配第1個子元素。例如$('ul li:first-child');選取每個<ul>中第1個<li>元素 |
| :last-child |
選取每個父元素的最后一個子元素 |
集合元素 |
區(qū)別和上面相同，$('ul li:last-child');選取每個<ul>中最后一個<li>元素 |
| :only-child |
如果某個元素是它父元素中唯一的子元素，那么將會被匹配。如果父元素中含有其他元素，則不會被匹配 |
集合元素 |
$(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 |
選取所有被選中的選項元素 |
集合元素 |
$(select option: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')選取所有不可見元素 |
使用選擇器的注意事項
含有'·'、'#'、'('或']'等特殊字符
碰到id或者class屬性值帶有這些特殊字符的需要轉(zhuǎn)譯之后才能使用，不能直接寫
$('#box#b')這種不經(jīng)過轉(zhuǎn)譯的寫法是錯誤的，應(yīng)該寫為$('#box\\#b')，通過\\進(jìn)行轉(zhuǎn)譯。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
