|
1.基本選擇器
選擇器 描述
#id 根據(jù)給定的id匹配匹配一個元素 例如 $('#id')
.class 根據(jù)給定的類名匹配元素 例如 $('.myclass')
selector1,selector2... 將每一個選擇器匹配到的元素合并后一起返回 例如 $(selector1,selector2..)
* 匹配所有的元素
2.層次選擇器
選擇器 描述
$("ancestor descendant") 選取ancestor元素里面的所有descendant元素
$("parent > child") 選取parent元素下的child元素
$("prev + next") 選取緊接在prev元素后的next元素
$("prev ~ siblings") 選取prev元素之后的所有siblings元素
3.過濾選擇器
1.基本過濾器選擇器
選擇器 描述
:frist 選取第一個元素 例如：$("div:frist") 選取所有div的第一個
:last 選取最后一個元素 例如：$("div:last") 選取所有div的最后一個
:even 獲取索引是偶數(shù)的所有元素 例如：$("tr:even") 選取所有tr的索引為偶數(shù)的
:odd 獲取索引是奇數(shù)的所有元素 例如：$("tr:odd") 選取所有tr的索引為奇數(shù)的
:not(selector)獲取除了選擇器以外的元素 例如：$("div:not('.mydiv')") 選取所有div為.mydiv以為的所有div
:eq(index) 獲取索引等于index的元素 例如：$("div:eq(1)") 選取div索引為1的div
:gt(index) 獲取索引大于index的元素 例如：$("div:gt(1)") 選取所有div索引大于1的(返回集合)
:lt(index) 獲取索引小于index的元素 例如：$("div:lt(1)") 選取所有div索引小于1的(返回集合)
:header 獲取所有的標題元素，比如(h1,h2,...) 例如：$("div:header") 選取所有div的標題元素
:animated 獲取當前執(zhí)行jQuery動畫的元素 例如：$("div:animated") 選取當前執(zhí)行動畫的div
3.子元素過濾選擇器
| 選擇器 |
描述 |
示例 |
| :nth-child(index/even/odd/eq) |
選擇的他們所有父元素的第n個子元素。(這里的index是從1開始算起) |
$("p:nth-child(2)")選取body中第二個p元素
|
| :first-child |
選擇所有父級元素下的第一個子元素。 |
$("div span:frist-child")
匹配 div 中查找第一個 span
|
| :last-child |
選擇所有父級元素下的最后一個子元素。 |
$("div span:last-child")
匹配 div 中查找最后一個 span
|
| :only-child |
如果某個元素是其父元素的唯一子元素，那么它就會被選中 |
$("ul li:only-child")在ul中選取是唯一子元素的li元素 |
2.內(nèi)容過濾器選擇器
| 選擇器 |
描述 |
示例 |
| :contains(text) |
選取含有文本內(nèi)容為text的元素 |
$("div:contains('abc')")選取含有文本
“abc"的div元素
|
| :empty |
選擇所有沒有子元素的元素（包括文本節(jié)點）。 |
$("div:empty")選取不包含子元素(包括文本元素)的div元素 |
| :has(selector) |
選取含有選擇器所匹配的元素的元素 |
$("div:has(p)")選取含有P元素的div元素 |
| ：parent |
選擇所有含有子元素或者文本的父級元素。 |
$("div:parent")選取擁有子元素(包括文本元素)的div元素 |
4.屬性過濾選擇器
| 選擇器 |
描述 |
示例 |
| [attribute] |
選取擁有此屬性的元素 |
$("div[id]")選取擁有屬性Id的div元素 |
| [attribute=value] |
選取屬性的值為value的元素 |
$("div[title=test")選取屬性title為test的div元素 |
| [attribute!=value] |
選取屬性的值不等于value的元素 |
$("div[title!=test]")選取屬性title不等于test的div元素(注意，沒有屬性的div元素也會被選取) |
| [attribute^=value] |
選取屬性的值以value開始的 |
$("div[title^=test]")選取屬性title以test開始的div元素 |
| [attribute$=value] |
選取屬性的值以value結(jié)束的 |
$("div[title$=test]")選取屬性title以test結(jié)尾的div元素 |
| [attribure|=value] |
選取屬性的前綴等于value或為value 和-連接為前綴的元素 |
$("div[title|=test]")選取屬性title前綴等于test或以test-*的div元素
(注意，沒有title屬性的div元素也會被選取)
|
| [attribute~=value] |
選取屬性的值包含value的元素，value和其他字符用空格分隔 |
$("div[title~=test]")選取屬性title包含test的div元素(注意，沒有title屬性的div元素也會被選取) |
| [attribute*=value] |
選取屬性的值含有value的元素 |
$("div[title*=test]")選取屬性title含有test的div元素 |
|
[selector1]
[selector2]
|
用屬性選擇器合并成一個復(fù)合屬性選擇器，滿足多個條件 |
$("div[id][title$=test]")選取擁有屬性Id，并且屬性title以test結(jié)尾 |
5.表單對象屬性過濾選擇器
| 選擇器 |
描述 |
示例 |
| :enabled |
選取所有可用元素 |
$("#form1:enabled")選取Id為from1的表單內(nèi)所有可用元素 |
| :disabled |
選取所有不可用元素 |
$("#form1:disabled")選取id為form1的表單內(nèi)的所有不可以的元素 |
| :checked |
選取所有被選中的元素(單選按鈕，復(fù)選框) |
$("input:checked")選取所有被選中的input元素 |
| :selected |
選取所有被選中的選項元素(下拉列表) |
$("select:selected")選取所有被選中的選項元素 |
6.可見性過濾選擇器
| 選擇器 |
描述 |
示例 |
| ：hidden |
選擇所有隱藏的元素。 |
$(":hidden")選取所有不可見的元素。
包括<input type=hidden/>,
<div style="display:none"/>和
<div style="visibility:hidden"/>等元素。
如果只是選取input元素，可以使用$("input:hidden")
|
| ：visible |
選取所有可見的元素 |
$("div:visible")選取所有可見的div元素 |
4. 表單選擇器
| 選擇器 |
描述 |
示例 |
| :input |
選取所有的input,textarea,select,button元素 |
$(":input") |
| :text |
選取所有的單行文本框 |
$(":text") |
| :password |
選取所有的密碼框 |
$(":password") |
| :radio |
選取所有的單選框 |
$(":radio") |
| :checkbox |
選取所有的復(fù)選框 |
$(":checkbox") |
| :submit |
選取所有的提交按鈕 |
$(":submit") |
| :image |
選取所有的圖像按鈕 |
$(":image") |
| :reset |
選取所有的重置按鈕 |
$(":reset") |
| :button |
選取所有的按鈕 |
$(":button") |
| :file |
選取所有的上傳文件 |
$(":file") |
| :hidden |
選取所有不可見的元素 |
$(":hidden") |
|
