1.基本選擇器
選擇器 描述
#id 根據給定的id匹配匹配一個元素 例如 $('#id')
.class 根據給定的類名匹配元素 例如 $('.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 獲取索引是偶數的所有元素 例如：$("tr:even") 選取所有tr的索引為偶數的
:odd 獲取索引是奇數的所有元素 例如：$("tr:odd") 選取所有tr的索引為奇數的
: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 獲取當前執行jQuery影片的元素 例如：$("div:animated") 選取當前執行影片的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.內容過濾器選擇器
| 選擇器 | 描述 | 示例 |
| :contains(text) | 選取含有文本內容為text的元素 |
$("div:contains('abc')")選取含有文本 “abc"的div元素 |
| :empty | 選擇所有沒有子元素的元素（包括文本節點）， | $("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結束的 | $("div[title$=test]")選取屬性title以test結尾的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] |
用屬性選擇器合并成一個復合屬性選擇器，滿足多個條件 | $("div[id][title$=test]")選取擁有屬性Id，并且屬性title以test結尾 |
5.表單物件屬性過濾選擇器
| 選擇器 | 描述 | 示例 |
| :enabled | 選取所有可用元素 | $("#form1:enabled")選取Id為from1的表單內所有可用元素 |
| :disabled | 選取所有不可用元素 | $("#form1:disabled")選取id為form1的表單內的所有不可以的元素 |
| :checked | 選取所有被選中的元素(單選按鈕，復選框) | $("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 | 選取所有的復選框 | $(":checkbox") |
| :submit | 選取所有的提交按鈕 | $(":submit") |
| :image | 選取所有的影像按鈕 | $(":image") |
| :reset | 選取所有的重置按鈕 | $(":reset") |
| :button | 選取所有的按鈕 | $(":button") |
| :file | 選取所有的上傳檔案 | $(":file") |
| :hidden | 選取所有不可見的元素 | $(":hidden") |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/19524.html
標籤：jQuery