title: 《鋒利的jQuery》二、jQuery的選擇器
date: 2017-06-13 14:14:37
tags: 鋒利的jQuery
基本選擇器
選擇器 |
描述 |
返回 |
示例 |
---|
#id |
根據給定的id匹配一個元素 |
單個元素 |
$('#test') 選取id爲test的元素 |
.class |
根據給定的類名匹配元素 |
集合元素 |
$('.test') 選取所有class爲test的元素 |
element |
根據給定的元素名匹配元素 |
集合元素 |
$('p') 選取所有<p> 元素 |
* |
匹配所有元素 |
集合元素 |
$('*') 選取所有元素 |
selector1,selector2...` |
將每個選擇器匹配到的元素合併後一起返回 |
集合元素 |
$('div,span,p.myClass') 選取所有<div>``<span> 和擁有class爲myClass的<p> 標籤的一組元素 |
層次選擇器
層次選擇器用來獲取後代元素、子元素、相鄰元素和同級元素等。
選擇器 |
描述 |
返回 |
示例 |
---|
$('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') 代替 |
過濾選擇器
通過特定的過濾規則來選定元素。
基本過濾選擇器
選擇器 |
描述 |
返回 |
示例 |
---|
:first |
選取第一個元素 |
單個元素 |
$('div:first') 選取所有<div> 元素中第1個<div> 元素 |
:last |
選取最後一個元素 |
單個元素 |
$('div:last') 選取所有<div> 元素中的最後一個<div> 元素 |
:not(selector) |
去除所有與給定選擇器匹配的元素 |
集合元素 |
$('input:not(.myClass)') 選取class不是myClass的<input> 元素 |
:even |
選取索引是偶數的所有元素 |
集合元素 |
$('input:even') 選取索引是偶數的<input> 元素 |
:odd |
選取索引是奇數的所有元素 |
集合元素 |
$('input:odd') 選取索引是奇數的<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 |
選取所有標題元素 |
集合元素 |
$(':header') 選取網頁中所有標題元素 |
:animated |
選取當前正在執行動畫的所有元素 |
集合元素 |
$('div:animated') 選取正在執行動畫的<div> 元素 |
:focus |
選區當前獲取焦點的元素 |
集合元素 |
$(':focus') 選取當前獲取焦點的元素 |
內容過濾選擇器
選擇器 |
描述 |
返回 |
示例 |
---|
:contains(text) |
選取含有文本內容爲'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結束的元素 |
集合元素 |
$('div[title$=test]') 選取屬性title以'test'結束的<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] |
用屬性選擇器合併成一個複合屬性選擇器,滿足多個條件。每選擇一次,縮小一次範圍 |
集合元素 |
$('div[id][title$='test']') 選取擁有屬性id,並且屬性title以'test'結束的<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 |
選取每個父元素的最後一個子元素 |
集合元素 |
區別和上面相同,$('ul li:last-child'); 選取每個<ul> 中最後一個<li> 元素 |
:only-child |
如果某個元素是它父元素中唯一的子元素,那麼將會被匹配。如果父元素中含有其他元素,則不會被匹配 |
集合元素 |
$(ul li:only-child) 在<ul> 中選取是惟一子元素的<li> 元素 |
表單屬性過濾選擇器
選擇器 |
描述 |
返回 |
示例 |
---|
:enabled |
選取所有可用元素 |
集合元素 |
$('#form1 :enabled'); 選取id爲form1的表單內所有可用的元素 |
:disabled |
選取所有不可用元素 |
集合元素 |
$('#form1 :disabled'); 選取id爲form2的表單內的所有不可用的元素 |
: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屬性值帶有這些特殊字符的需要轉譯之後才能使用,不能直接寫
$('#box#b')
這種不經過轉譯的寫法是錯誤的,應該寫爲$('#box\#b')
,通過`\`進行轉譯。