1.基本選擇器
| 選擇器 |
描述 |
返回 |
實例 |
| #id |
根據給定的id匹配一個元素 |
單個元素 |
$("#test") 選取id為test的元素 |
| .class |
根據給定的類名匹配元素 |
集合元素 |
$(".test") 選取class 為test的元素 |
| * |
匹配所有元素 |
集合元素 |
$("*") 選取所有的元素 |
| element |
根據給定的元素名匹配元素 |
集合元素 |
$("p") 選取所有的<p>元素 |
| selector1,selector2,..... |
將每一個選擇器匹配到的元素合并在一起 |
集合元素 |
$("div,span,p.myClass")選取所有<div>,<span>和擁有 class為myClass的<p> 標簽的一組元素 |
2.層次選擇器
| 選擇器 |
描述 |
返回 |
實例 |
| $("ancestor descendant") |
選取ancestor元素里的所有descend（后代）元素 |
集合元素 |
$("div span")選取<div>里所有的<span>元素 |
| $("parent>child") |
選取parent元素下的child（子）元素,與$("ancestor descendant")有區別，$("ancestor descendant")選取的是后代元素 |
集合元素 |
$("div>span")選取<div>元素下元素名是<span>的子元素 |
| $("prev+next") |
選取緊接在prev元素后的next元素 |
集合元素 |
$(".one+div")選取class為one的下一個<div>同輩元素 |
| $("prev~siblings") |
選取prev元素之后的所有siblings元素 |
集合元素 |
$("#two~div")選取id為two的元素后面的所有<div>同輩元素 |
3.基本過濾選擇器
| 選擇器 |
描述 |
返回 |
實例 |
| :first |
選取第1個元素 |
單個 元素 |
$("div:first")選取所有<div>元素中第1個<div>元素 |
| :last |
選取最后1個元素 |
單個 元素 |
$("div:last") 選取所有<div>元素中最后一個<div>元素 |
| :not(selector) |
去除所有與給定選取器匹配的元素 |
集合 元素 |
$("input:not(.myClass)")選取class不是myClass的<input>元素 |
| :even |
選取索引是偶數的所有元素，索引是從0開始 |
集合 元素 |
$("input:even")選取索引是偶數的<input>元素 |
| :odd |
選取索引是奇數的所有元素，索引是從0開始 |
集合 元素 |
$("input:odd")選取索引是奇數的<input>元素 |
| ：eq(index) |
選取索引等于index的元素(index從0開始) |
單個 元素 |
$("input:eq(1)")選取索引等于1的<input>元素 |
| ：gt(index) |
選取索引大于index的元素(index從0開始) |
集合 元素 |
$("input:gt(1)")選取索引大于1的<input>元素 |
| ：lt(index) |
選取索引小于index的元素(index從0開始) |
集合 元素 |
$("input:lt(1)")選取索引小于1的<input>元素 |
| ：header |
選取所有的標題元素,列如 h1,h2,h3等等 |
集合 元素 |
$(":header")選取網頁中所有的<h1> <h2> <h3> ..... |
| ：animated |
選取當前正在執行動畫的所有元素 |
集合 元素 |
$("div:animated")選取正在執行動畫的<div>元素 |
| :focus |
選取當前獲取焦點的元素 |
集合 元素 |
$("focus") 選取當前獲取焦點的元素 |
4.內容過濾選擇器
| 選擇器 |
描述 |
返回 |
實例 |
| :contains(text) |
選取含有文本內容為 "text" 的元素 |
集合元素 |
$("div:contains('我')") 選取含有文本 "我"的div元素 |
| :empty |
選取不包含子元素或者文本的空元素 |
集合元素 |
$("div:empty") 選取不包含子元素(包括文本元素)的<div>空元素 |
| :has(selector) |
選取含有選擇器所匹配的元素的元素 |
集合元素 |
$("div:has(p)") 選取含有<p> 元素的<div>元素 |
| ：parent |
選取含有子元素或者文本的元素 |
集合元素 |
$("div:parent")選取擁有子元素(包括文本元素)的<div>元素 |
5.可見性過濾選擇器
| 選擇器 |
描述 |
返回 |
實例 |
| :hidden |
選取所有不可見的元素 |
集合元素 |
$(":hidden") 選取所有不可見的元素。包括<input type="hidden"/>,<div style="display:none;">和<div style="visibility:hidden;">等元素。如果只想選取<input>元素,可以使用$("input:hidden")
|
| :visible |
選取所有可見的元素 |
集合元素 |
$("div:visible") 選取所有可見的<div>元素 |
6.屬性過濾選擇器
| 選擇器 |
描述 |
返回 |
實例 |
| [attribute] |
選取擁有此屬性的元素 |
集合元素 |
$("div[id]") 選取擁有屬性id的元素 |
| [attribute=value] |
選取屬性值為value的元素 |
集合元素 |
$("div[title=test]") 選取屬性title為"test"的<div>元素 |
| [attribute!=value] |
選取屬性值不為value的元素 |
集合元素 |
$("div[title!=test]") 選取屬性title不等于"test"的<div>元素(注意:沒有屬性title的<div>元素也會被選) |
| [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 |
=value] |
選取屬性等于給定字符串或以改字符串為前綴(該字符串后跟一個連字符"_")的元素 |
集合元素 |
$('div[title |
="en"]')選取屬性title等于en或以en為前綴 |
| [attribute~=value] |
選取屬性用空格分隔的值中包含一個給定值的元素 |
集合元素 |
$("div[title~="uk"]")選取屬性title用空格分隔的值中包含字符uk的元素 |
| [attribute1][attribbute2] |
用屬性選擇器合并成一個復合屬性選擇器，滿足多個條件。每次選擇一次，縮小一次范圍 |
集合元素 |
$("div[id][title$='test']") 選取擁有屬性id,并且屬性title 以test 結束的<div>元素 |
7.子元素過濾選擇器
| 選擇器 |
描述 |
返回 |
實例 |
| :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 |
選取每個父元素的最后一個子元素 |
集合 元素 |
同樣,:last 只返回單個元素，而last-child 選擇符將為每個父元素匹配最后一個子元素。$("ul li:last-child");選擇每個<ul> 中最后一個<li> 元素 |
| :only-child |
如果某個元素是她父元素中唯一的子元素，那么將會匹配。如果父元素中含有其他元素，則不會匹配 |
集合 元素 |
$("ul li:only-child")在 <ul>中選取是唯一子元素的<li>元素 |
:nth-child() 選擇器是很常用的子元素過濾選擇器，詳細功能如下.
(1) ：nth-child(even) 能選取每個父元素下的索引值是偶數的元素
(2) :nth-child(odd) 能選取每個父元素下的索引值是奇數的元素
(3) :nth-child(2) 能選取每個父元素下單索引值等于2的元素
(4) :nth-child(3n) 能選取每個父元素下的索引值是3的倍數的元素,(n從1開始)。
(5) :nth-child(3n+1) 能選取每個父元素下的索引值是(3n+1)的元素(n從1開始)。
``
8.表單對象屬性過濾選取器
| 選擇器 |
描述 |
返回 |
實例 |
| :enabled |
選取所有可用的元素 |
集合元素 |
$("#form1:enabled");選取id為 "form1"的表單內所有可用元素 |
| :disabled |
選取所有不可用元素 |
集合元素 |
$("#form2:disabled")選取id為 "form2"的表單內所有不可用元素 |
| ：checked |
選取所有被選中的元素(單選框，復選框) |
集合元素 |
$("input:checked");選取所有被選中的<input>的元素 |
| :selected |
選取所有被選中的選項元素(下拉列表) |
集合元素 |
$("select option:selected");選取所有被選中的選項元素 |
9.表單選擇器
| 選擇器 |
描述 |
返回 |
實例 |
| :text |
選取所有單行文本框 |
集合元素 |
$(":text")選取所有的文本框 |
| :password |
選取所有的密碼框 |
集合元素 |
$(":password")選取所有密碼框 |
| ：radio |
選取所有的單選框 |
集合元素 |
$(":radio")選取所有的單選框 |
| :checkbox |
選取所有的復選框 |
集合元素 |
$(":checkbox")選取所有的復選框 |
| :submit |
選取所有的提交按鈕 |
集合元素 |
$(":submit")選取所有的提交按鈕 |
| :image |
選取所有的圖像按鈕 |
集合元素 |
$(":image") 選取所有的圖像按鈕 |
| :reset |
選取所有的重置按鈕 |
集合元素 |
$(":reset") 選取所有的重置按鈕 |
| :button |
選取所有的按鈕 |
集合元素 |
$(":button")選取所有的按鈕 |
| :file |
選取所有的上傳域 |
集合元素 |
$(":file") 選取所有的上傳域 |
| :hidden |
選取所有不可見元素 |
集合元素 |
$("hidden")選取所有不可見的元素 |
| :input |
選取所有的<input>,<textarea>,<select>,<button>元素 |
集合元素 |
$(":input")選取所有<input>,<textarea>,<select> 和<button>元素 |
Deom code 下載
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
