选择器参考手册
目录
jQuery选择器参考手册提供了全面的API文档，涵盖了从基础的元素、ID、类选择器到复杂的属性、层次和过滤选择器。这些选择器基于CSS语法并进行了扩展，用于精确地定位DOM元素，是jQuery核心功能的基础。本手册旨在为开发者提供一个快速、准确的查询工具，涵盖所有官方定义的选择器类型及其用法。
基本选择器
基本选择器是最常用的选择器，通过元素标签名、ID、类名或通配符来选择元素。
| 选择器 | 描述 | 示例 | 版本 |
|---|---|---|---|
* | 选择所有元素。 | $("*") | 1.0 |
#id | 选择具有给定id属性的单个元素。 | $("#myId") | 1.0 |
.class | 选择所有具有给定class的元素。 | $(".myClass") | 1.0 |
element | 选择所有具有给定标签名的元素。 | $("div") | 1.0 |
selector1, selector2, selectorN | 将每个选择器匹配到的元素合并后一起返回。 | $("div, span, p.myClass") | 1.0 |
层次选择器
层次选择器通过文档中元素之间的层级关系（如后代、子元素、兄弟元素）来选择目标元素。
| 选择器 | 描述 | 示例 | 版本 |
|---|---|---|---|
ancestor descendant | 选择ancestor元素内部所有descendant（后代）元素。 | $("form input") | 1.0 |
parent > child | 选择parent元素下的所有直接子元素child。 | $("form > input") | 1.0 |
prev + next | 选择所有紧接在prev元素后的next元素（相邻兄弟）。 | $("label + input") | 1.0 |
prev ~ siblings | 选择prev元素之后的所有siblings兄弟元素（后续兄弟）。 | $("form ~ p") | 1.0 |
过滤选择器
过滤选择器通常以冒号:开头，用于从已选中的元素集合中进一步筛选出特定位置的元素。
基础过滤
| 选择器 | 描述 | 示例 | 版本 |
|---|---|---|---|
:first | 选择匹配集合中的第一个元素。 | $("p:first") | 1.0 |
:last | 选择匹配集合中的最后一个元素。 | $("p:last") | 1.0 |
:even | 选择索引为偶数的元素，索引从0开始。 | $("tr:even") | 1.0 |
:odd | 选择索引为奇数的元素，索引从0开始。 | $("tr:odd") | 1.0 |
:eq(index) | 选择索引等于index的元素，索引从0开始。 | $("li:eq(2)") | 1.0 |
:gt(index) | 选择索引大于index的元素，索引从0开始。 | $("li:gt(1)") | 1.0 |
:lt(index) | 选择索引小于index的元素，索引从0开始。 | $("li:lt(3)") | 1.0 |
:not(selector) | 移除所有与给定选择器匹配的元素。 | $("input:not(:checked)") | 1.0 |
:header | 选择所有标题元素，如h1, h2, h3等。 | $(":header") | 1.0 |
:animated | 选择所有正在执行动画效果的元素。 | $("div:animated") | 1.2 |
:focus | 选择当前获得焦点的元素。 | $(":focus") | 1.6 |
:root | 选择文档的根元素。在HTML中，通常是html。 | $(":root") | 1.9 |
:target | 选择由文档URI的片段标识符（hash）指向的元素。 | $("#content:target") | 1.9 |
:lang(language) | 选择指定语言的所有元素。 | $("p:lang(en)") | 1.9 |
内容过滤
| 选择器 | 描述 | 示例 | 版本 |
|---|---|---|---|
:contains(text) | 选择所有包含指定文本的元素。文本匹配是大小写敏感的。 | $("p:contains('Hello')") | 1.0 |
:empty | 选择所有没有子节点（包括元素节点和文本节点）的元素。 | $("td:empty") | 1.0 |
:parent | 选择所有拥有子节点（包括元素节点和文本节点）的元素，与:empty相反。 | $("div:parent") | 1.0 |
:has(selector) | 选择至少包含一个匹配selector的元素。 | $("div:has(p)") | 1.0 |
可见性过滤
| 选择器 | 描述 | 示例 | 版本 |
|---|---|---|---|
:hidden | 选择所有隐藏的元素。在jQuery 1.3.2之后，:hidden匹配的元素或其父元素在文档中不占据空间（width或height为0），或CSS display为none，或为input类型hidden的元素。 | $("div:hidden") | 1.0 |
:visible | 选择所有可见的元素。可见元素是指在文档中占据物理空间，且width或height大于0的元素。 | $("div:visible") | 1.0 |
属性选择器
属性选择器通过元素的属性及其值来选择元素，语法是用方括号[]包裹。
| 选择器 | 描述 | 示例 | 版本 |
|---|---|---|---|
[name="value"] | 选择属性name的值精确等于value的元素。 | $("input[type='text']") | 1.0 |
[name!="value"] | 选择属性name的值不等于value的元素，或没有name属性的元素。 | $("input[type!='text']") | 1.0 |
[name^="value"] | 选择属性name的值以value开头的元素。 | $("input[name^='user']") | 1.0 |
[name$="value"] | 选择属性name的值以value结尾的元素。 | $("input[name$='_id']") | 1.0 |
[name*="value"] | 选择属性name的值包含value的元素。 | $("input[name*='address']") | 1.0 |
[name~="value"] | 选择属性name的值是以空格分隔的单词列表，且其中一个单词精确等于value的元素。 | $("input[title~='note']") | 1.0 |
[name|="value"] | 选择属性name的值等于value或以value-开头的元素（通常用于lang属性）。 | $("a[hreflang|='en']") | 1.0 |
[name] | 选择所有具有name属性（无论值为何）的元素。 | $("div[data-type]") | 1.0 |
[name="value"][name2="value2"] | 复合属性选择器，需要同时满足多个属性条件。 | $("input[type='checkbox'][checked]") | 1.0 |
表单选择器
表单选择器是专为简化HTML表单元素选择而设计的一组过滤选择器。
| 选择器 | 描述 | 示例 | 版本 |
|---|---|---|---|
:input | 选择所有input, textarea, select, button元素。 | $(":input") | 1.0 |
:text | 选择所有type="text"的input元素。 | $(":text") | 1.0 |
:password | 选择所有type="password"的input元素。 | $(":password") | 1.0 |
:radio | 选择所有type="radio"的input元素。 | $(":radio") | 1.0 |
:checkbox | 选择所有type="checkbox"的input元素。 | $(":checkbox") | 1.0 |
:submit | 选择所有type="submit"的input和button元素。 | $(":submit") | 1.0 |
:image | 选择所有type="image"的input元素。 | $(":image") | 1.0 |
:reset | 选择所有type="reset"的input和button元素。 | $(":reset") | 1.0 |
:button | 选择所有type="button"的input和button元素。 | $(":button") | 1.0 |
:file | 选择所有type="file"的input元素。 | $(":file") | 1.0 |
:checked | 选择所有被选中的checkbox或radio元素。 | $(":checked") | 1.0 |
:selected | 选择所有被选中的option元素。 | $(":selected") | 1.0 |
:enabled | 选择所有可用的（未禁用）表单元素。 | $(":enabled") | 1.0 |
:disabled | 选择所有禁用的表单元素。 | $(":disabled") | 1.0 |
层级与顺序过滤
此类选择器基于元素在其父元素或兄弟元素中的层级位置进行过滤。
| 选择器 | 描述 | 示例 | 版本 |
|---|---|---|---|
:first-child | 选择所有作为其父元素的第一个子元素的元素。 | $("li:first-child") | 1.1.4 |
:last-child | 选择所有作为其父元素的最后一个子元素的元素。 | $("li:last-child") | 1.1.4 |
:nth-child(n/index/even/odd) | 选择所有作为其父元素的第n个子元素的元素。n可以是数字、关键词（even/odd）或公式（如2n+1）。索引从1开始。 | $("tr:nth-child(odd)") | 1.1.4 |
:nth-last-child(n/index/even/odd) | 与:nth-child类似，但从最后一个子元素开始反向计数。 | $("li:nth-last-child(2)") | 1.9 |
:first-of-type | 选择所有在其兄弟元素中，作为相同元素类型的第一个的元素。 | $("p:first-of-type") | 1.9 |
:last-of-type | 选择所有在其兄弟元素中，作为相同元素类型的最后一个的元素。 | $("p:last-of-type") | 1.9 |
:nth-of-type(n) | 选择所有在其兄弟元素中，作为相同元素类型的第n个的元素。 | $("p:nth-of-type(2)") | 1.9 |
:nth-last-of-type(n) | 与:nth-of-type类似，但从最后一个同类兄弟元素开始反向计数。 | $("p:nth-last-of-type(2)") | 1.9 |
:only-child | 选择所有作为其父元素的唯一一个子元素的元素。 | $("p:only-child") | 1.1.4 |
:only-of-type | 选择所有在其父元素中，作为唯一一个具有该元素类型的子元素。 | $("p:only-of-type") | 1.9 |
这份jQuery选择器参考手册汇总了核心的选择器类别。掌握并灵活运用这些选择器，能够实现精确高效的DOM元素定位，是构建复杂交互逻辑的基础。建议在实际开发中，结合具体需求，查阅此手册以选取最优选择策略。