jQuery選擇器可以分為基本選擇器、層次選擇器、過濾選擇器和表單選擇器。
1、基本選擇器
| 選擇器 | 描述 | 示例 |
|---|---|---|
| #id | 根據(jù)id匹配一個元素 | $("#id") |
| .class | 根據(jù)類名匹配元素,獲得集合 | $(".clazz") |
| element | 根據(jù)給定元素名匹配 | $("p") |
| * | 匹配所有元素 | $("*") |
| selector1,selector2,...,selectorN | 所有選擇器的合集 | $("div,span,p.myClass") |
2、層次選擇器
| 選擇器 | 描述 | 示例 |
|---|---|---|
| $("ancestor descendant") | 選取ancestor元素里的所有descendant后代元素 | $("div span") |
| $("parent>child") | 選取parent元素下的child元素 | $("div>span") |
| $("prev+next") | 選取class為one的下一個<div>同輩元素 | $(".one+div") |
| $("prev~siblings") | 選取id為two的元素后面的所有<div> | $("#two~div") |
3、過濾選擇器
- 基本過濾選擇器
| 選擇器 | 示例 | 描述 |
|---|---|---|
| :first | $("div:first") | 選取所有<div>元素中的第一個<div> |
| :last | $("div:last") | |
| :not(selector) | $(input:not(.myClass)) | 選取class不是myClass的<input>元素 |
| :even | $("input:even") | 選取索引是偶數(shù)的<input> |
| :odd | $("input:odd") | 選取索引是奇數(shù)的<input> |
| :eq(index) | $("input:eq(1)") | 選取索引等于1的<input> |
| :gt(index) | $("input:gt(1)") | 選取索引大于1的<input> |
| :lt(index) | $("input:lt(1)") | 選取索引小于1的<input> |
| :header | $(":header") | 選取頁面中所有的h標簽 |
| :animated | $("div:animated") | 選取正在執(zhí)行動畫的<div> |
| :focus | $(":focus") | 選取當前獲取焦點的元素 |
- 內(nèi)容過濾選擇器
| 選擇器 | 示例 | 描述 |
|---|---|---|
| :contains(text) | $("div:contains('我')") | 選取含有文本“我”的<div>元素 |
| :empty | $("div:empty") | 選取不包含子元素（包括文本元素）的<div>元素 |
| :has(selector) | $("div:has(p)") | 選取含有<p>元素的<div>元素 |
| :parent | $("div:parent") | 選取擁有子元素（包括文本元素）的<div>元素 |
- 可見性選擇器
| 選擇器 | 示例 | 描述 |
|---|---|---|
| :hidden | $(":hidden") | 選取所有不可見元素 |
| :visible | $("div:visible") | 選取所有可見的<div>元素 |
- 屬性過濾選擇器
| 選擇器 | 示例 | 描述 |
|---|---|---|
| [attribute] | $("div[id]") | 選取擁有屬性id的元素 |
| [attribute=value] | $("div[title=test]") | 選取屬性title為test的<div>元素 |
| != ^= $= *= | = ~= | |
| [attribute1][attribute2][attributeN] | $("div[id][title$='test']") | 選取擁有屬性id，并且屬性title以‘test’結(jié)束的<div>元素 |
- 子元素過濾選擇器
| 選擇器 | 示例 | 描述 |
|---|---|---|
| :nth-child(even) | 選取每個父元素下的索引值是偶數(shù)的元素 | |
| :nth-child(odd) | 選取每個父元素下的索引值是奇數(shù)的元素 | |
| :nth-child(2) | 選取每個父元素下的索引值是2的元素 | |
| :nth-child(3n) | 選取每個父元素下的索引值是3的倍數(shù)的元素 | |
| :nth-child(3n+1) | 選取每個父元素下的索引值是3的倍數(shù)+1的元素 | |
| :first-child | $("ul li:first-child") | 選取每個<ul>中的第一個<l i> |
| :last-child | $("ul li:last-child") | 選取每個<ul>中的最后一個<l i> |
| :only-child | $("ul li:only-child") | 在<ul>中選取唯一子元素的<l i>元素 |
- 表單對象屬性過濾選擇器
| 選擇器 | 示例 | 描述 |
|---|---|---|
| :enabled | $("#form1:enabled") | 選取id為form1的表單內(nèi)的所有可用元素 |
| :disabled | $("#form2:disabled") | 選取id為form2的表單內(nèi)的所有不可用的元素 |
| :checked | $("input:checked") | 選取所有被選中的<input>元素 |
| :selected | $("select option:selected") | 選取所有被選中的select元素 |
4、表單選擇器
| 選擇器 | 示例 | 描述 |
|---|---|---|
| :input | $(":input") | 選取所有input，select、textarea、button |
| :text | $(":text") | 選取所有單行文本框 |
| :password | $(":password") | 選取所有密碼框 |
| :radio | $(":radio") | |
| :checkbox | $(":checkbox") | |
| :submit | $(":submit") | |
| :image | $(":image") | |
| :reset | $(":reset") | 選取所有重置按鈕 |
| :button | $(":button") | |
| :file | $(":file") | |
| :hidden | $(":hidden") |
