内容目录
本文是jQuery选择器的参考手册，主要总结归纳所有的jQuery选择器。
jQuery 选择器
以下选择器的棕色部分，表示该部分需要根据实际需要进行设置。这些部分可能是一个选择器、序号、索引或者其他符合要求的表达式(表格中s1s2sN中的蓝色s2也是如此，这里标注为蓝色，以便于与两侧的s1和sN进行区分)。
| 选择器 | 起始版本 | 实例 | 选取 |
|---|---|---|---|
| 基本选择器——根据多个选择器的组合筛选元素 | |||
| s1,s2,sN | 1.0 | $("p,div,#abc") | 所有的p元素、div元素和id="abc"的元素 |
| s1s2sN | 1.0 | $(":radio[name=uid]:checked") | 所有被选中的name="uid"的radio元素 |
| ancestor escendant | 1.0 | $("p span") | <p>标签内的所有<span>元素 |
| parent > child | 1.0 | $("p > span") | 所有作为<p>标签的直接子元素的<span>元素 |
| prev + next | 1.0 | $("label + input") | 所有紧跟在<label>元素后面的那个同辈<input>元素 |
| prev ~ sibings | 1.0 | $("tr#L2 ~ tr") | 在id="L2"的<tr>元素之后的所有同辈<tr>元素 |
| 基本选择器——根据id、class类名、标签名等筛选元素 |
|||
| * | 1.0 | $("*") | 所有元素 |
| #id | 1.0 | $("#abc") | id="abc"的元素 |
| .className | 1.0 | $(".post") | 所有包含类名"post"的元素 |
| tagName | 1.0 | $("p") | 所有<p>元素 |
| 伪类选择器——根据元素在匹配到的所有元素中的特定次序筛选元素 | |||
| :first | 1.0 |
$("p:first") | 第一个<p>标签 |
| :last | 1.0 | $("p:last") | 最后一个<p>标签 |
| :even | 1.0 | $("tr:even") | 所有偶数<tr>标签 |
| :odd | 1.0 | $("tr:odd") | 所有奇数<tr>标签 |
| :eq(index) | 1.0 |
$("li:eq(3)") | 第4个li标签(index从0开始算起) |
| :gt(index) | 1.0 | $("li:gt(2)") | 所有index大于2的li标签(第4、5、6……个li标签) |
| :lt(index) | 1.0 | $("li:lt(2)") | 所有index小于2的li标签(第1、2个li标签) |
| 伪类选择器——根据元素在父元素的子元素中的特定次序筛选元素 | |||
| :first-child | 1.1.4 | $("span:first-child") | 所有作为父元素的第一个子元素的<span>元素 |
| :last-child | 1.1.4 | $("span:last-child") | 所有作为父元素的最后一个子元素的<span>元素 |
| :only-child | 1.1.4 | $("span:only-child") | 所有作为父元素的唯一子元素的<span>元素 |
| :nth-child(n) | 1.1.4 | $("li:nth-child(2)") | 所有作为父元素的第2个子元素的<li>标签(n从1开始算起) |
| :nth-last-child(n) | 1.9 | $("li:nth-last-child(2)") | 所有作为父元素的倒数第2个子元素的<li>标签 |
| :first-of-type | 1.9 | $("p:first-of-type") | 所有作为父元素的第一个<p>类型的子元素 |
| :last-of-type | 1.9 | $("p:last-of-type") | 所有作为父元素的最后一个<p>类型的子元素 |
| :only-of-type | 1.9 | $("p:only-of-type") | 所有作为父元素的唯一一个<p>类型的子元素 |
| :nth-of-type(n) | 1.9 | $("li:nth-of-type(2)") | 所有作为父元素的第2个<li>类型的子元素(n从1开始算起) |
| :nth-last-of-type(n) | 1.9 | $("li:nth-last-child(2)") | 所有作为父元素的倒数第2个<li>类型的子元素 |
| 伪类选择器——根据包含、排除、可见、动画或其他关系筛选元素 | |||
| :has(selector) | 1.1.4 | $("ul:has(li.abc)") | 所有包含类名为"abc"的<li>标签的<ul>元素 |
| :not(selector) | 1.0 | $("input:not(:text)") | 所有不是文本框的<input>元素 |
| :contains(text) | 1.1.4 | $(":contains(abc)") | 所有包含文本"abc"的元素 |
| :parent | 1.0 | $(":parent") | 所有包含子元素或文本内容(哪怕是空格或换行)的元素 |
| :empty | 1.0 | $(":empty") | 所有没有子元素和文本内容(哪怕是空格或换行)的元素 |
| :visible | 1.0 | $(":visible") | 所有可见的元素 |
| :hidden | 1.0 | $(":hidden") | 所有不可见的元素(包括type="hidden"的<input>元素) |
| :header | 1.2 | $(":header") | 所有标题标签：h1 ~ h6 |
| :animated | 1.2 | $(":animated") | 所有正在执行动画效果的元素 |
| :focus | 1.6 | $(":focus") | 当前获得焦点的元素 |
| :root | 1.9 | $(":root") | 当前文档的根元素(<html>元素) |
| :target | 1.9 | $(":target") | id属性等于当前页面URI中的hash码值的元素 |
| :lang(language) | 1.9 | $(":lang(en)") | 所有lang属性以"en"为前缀的元素 |
| 属性相关选择器 | |||
| [attribute] | 1.0 | $("[href]") | 所有带有href属性的元素 |
| [attribute=value] | 1.0 | $("[name=uid]") | 所有name="uid"的元素 |
| [attribute!=value] | 1.0 | $("[name!=uid]") | 所有name属性的值不等于"uid"的元素 |
| [attribute^=value] | 1.0 | $("[name^=uid]") | 所有name属性的值以"uid"开头的元素 |
| [attribute$=value] | 1.0 | $("[src$='.gif']") | 所有src属性以".gif"结尾的元素 |
| [attribute|=value] | 1.0 | $("[name|=uid]") | name属性的值等于"uid"，或以"uid-"开头的所有元素 |
| [attribute~=value] | 1.0 | $("[name~='uid']") | name属性的值包含给定的单词"uid"的所有元素("uid"与其他词以空格分隔) |
| [attribute*=value] | 1.0 | $("[name*=uid]") | 所有name属性的值包含"uid"的元素 |
| 伪类选择器——表单相关 | |||
| :input | 1.0 | $(":input") | 所有input、select、textarea和button标签 |
| :text | 1.0 | $(":text") | 所有type="text"的<input>元素 |
| :password | 1.0 | $(":password") | 所有type="password"的<input>元素 |
| :radio | 1.0 | $(":radio") | 所有type="radio"的<input>元素 |
| :checkbox | 1.0 | $(":checkbox") | 所有type="checkbox"的<input>元素 |
| :submit | 1.0 | $(":submit") | 所有type="submit"的<input>和<button>元素 |
| :reset | 1.0 | $(":reset") | 所有type="reset"的<input>元素和<button>元素 |
| :button | 1.0 | $(":button") | 所有<button>标签(不区分type)和type="button"的<input>元素 |
| :image | 1.0 | $(":image") | 所有type="image"的<input>元素 |
| :file | 1.0 | $(":file") | 所有type="file"的<input>元素 |
| 伪类选择器——表单状态相关(表单控件是指input、select、textarea、button、option元素) | |||
| :enabled | 1.0 | $(":enabled") | 所有可用(没有disabled属性)的表单控件元素 |
| :disabled | 1.0 | $(":disabled") | 所有禁用(带有disabled属性)的表单控件元素 |
| :selected | 1.0 | $(":selected") | 所有被选中的<option>元素 |
| :checked | 1.0 | $(":checked") | 所有被选中的radio、checkbox和<option>元素 |
0 条评论
撰写评论