# jQuery 选择器 – 完整列表

> 原文： [https://howtodoinjava.com/jquery/jquery-selectors/](https://howtodoinjava.com/jquery/jquery-selectors/)

jQuery 选择器也许是 jQuery 库中最重要的方面。 这些选择器使用类似于 CSS 的语法，使开发人员可以轻松选择任何页面元素集并对其执行操作。 了解 jQuery 选择器是最有效地使用 jQuery 库的关键。

jQuery 语句通常遵循以下语法模式：

```java
$(selector).methodName();
```

`selector`是一个字符串表达式，用于标识将被收集到要操作的匹配集合中的 DOM 元素集合。 jQuery 选择器返回 jQuery 对象，而不是从 JavaScript 选择器返回的 DOM 对象。

如果要使用任何元字符（例如`.#()`）作为类 / id / 名称的一部分，则需要使用`\\`两个反斜杠对字符进行转义。 例如，如果您的元素带有`id="my.element"`，则可以使用选择器`$("my\\.element")`。

jQuery 提供了许多应用这些选择器的方法。 大致来说，您可以将它们分为以下几类：

```java
Basic Selectors
Attribute Selectors
Content Selectors
Hierarchy Selectors
Form Selectors
Visibility Selectors
Filtered Selectors
```

## 基本的 jQuery 选择器

基本选择器集中于 HTML 元素的 **id 属性**，**类属性**和**标签名称**。

| 语法/范例 | 描述 |
| --- | --- |
| 所有选择器`("*")` | 选择页面中的所有元素 |
| 类选择器`(".className")` | 选择具有给定类的所有元素。 |
| 元素选择器`("element")` | 选择具有给定标签名称的所有元素。 |
| ID 选择器`("#id")` | 选择具有给定 id 属性的单个元素。 |
| 多重选择器`("selector1, selector2, selectorN")` | 选择所有指定选择器的合并结果。 |

## jQuery 选择器属性

使用 jQuery 选择器的另一种方法是根据 HTML 元素的属性值来选择它们。 它可以是默认属性或任何自定义属性。 在选择器语法中，属性值用`[]`括号括起来，例如`$("a[rel='nofollow']")`。

这些选择器将属性值视为单个字符串。 例如，`$("a[rel='nofollow']")`将选择`<a href=”example.html” rel=”nofollow”>Some text</a>`，但不会`<a href=”example.html” rel=”nofollow otherValue”>Some text</a>`。

| 语法/示例 | 描述 |
| --- | --- |
| `[attributeName]` | 选择具有指定属性且具有任何值的元素。 |
| `[attributeName = "value"]` | 选择具有指定属性且其值与特定值完全相等的元素。 |
| `[attributeName != "value"]` | 选择具有指定属性的元素，该元素的值恰好以给定字符串开头。 |
| `[attributeName ^= "value"]` | 选择具有指定属性的元素，该元素的值恰好以给定字符串开头。 |
| `[attributeName $= "value"]` | 选择具有指定属性且其值完全以给定字符串结尾的元素。 比较是区分大小写的。 |
| `[attributeName ~= "value"]` | 选择具有指定属性的元素，该元素的值包含以空格分隔的给定单词。 |
| `[attributeName *= "value"]` | 选择具有指定属性且其值包含给定子字符串的元素。 |
| `[attributeName &#124;= "value"]` | 选择具有指定属性的元素，该元素的值等于给定字符串或以该字符串开头，后跟连字符（`-`）。 |
| `[attributeName = "value"][attributeName2="value2"]` | 匹配与所有指定的属性过滤器匹配的元素。 |

## 内容选择器

内容选择器允许您基于 HTML 元素内的内容选择 HTML 元素。

| 语法/示例 | 描述 |
| --- | --- |
| `:contains()` | 选择所有包含指定文本的元素。 |
| `:empty` | 选择所有没有子元素的元素（包括文本节点）。 |
| `:has()` | 选择包含至少一个与指定选择器匹配的元素的元素。 |
| `:parent` | `:empty`的逆。 选择具有至少一个子节点的所有元素（元素或文本）。 |

## 层次选择器

层次选择器允许您基于 DOM 层次选择 HTML 元素。 这使您能够通过仅基于 DOM 树中的父项，子项或围绕它们的其他元素来选择内容，从而编写具有更多内容意识的动态代码。

| 语法/示例 | 描述 |
| --- | --- |
| 子选择器`("parent > child")` | 选择`parent`指定的元素的`child`指定的所有直接子元素。 |
| 后代选择器`("ancestor descendant")` | 选择作为给定祖先的后代的所有元素。 |
| 下一个相邻选择器`("prev + next")` | 选择所有与“`next`”匹配的`next`元素，并紧随其后的是“`prev`”。 |
| 下一兄弟姐妹选择器`("prev ~ siblings")` | 选择“`prev`”元素之后的所有兄弟元素，它们具有相同的父元素，并与过滤“`siblings`”选择器匹配。 |

## 表单选择器

表单选择器使您可以根据表单元素的状态选择表单中的元素。

| 语法/示例 | 描述 |
| --- | --- |
| `:button`选择器 | 选择所有按钮元素和按钮类型的元素。 |
| `:checkbox`选择器 | 选择所有类型的元素复选框。 |
| `:checked`选择器 | 匹配所有选中或选中的元素。 |
| `:disabled`选择器 | 选择所有禁用的元素。 |
| `:enabled`选择器 | 选择所有启用的元素。 |
| `:file`选择器 | 选择文件类型的所有元素。 |
| `:focus`选择器 | 选择当前处于焦点状态的元素。 |
| `:image`选择器 | 选择类型为图像的所有元素。 |
| `:input`选择器 | 选择所有输入，文本区域，选择和按钮元素。 |
| `:password`选择器 | 选择类型为密码的所有元素。 |
| `:radio`选择器 | 选择单选类型的所有元素。 |
| `:reset`选择器 | 选择所有类型为重置的元素。 |
| `:selected`选择器 | 选择所有选定的元素。 |
| `:submit`选择器 | 选择类型为提交的所有元素。 |
| `:text`选择器 | 选择文本类型的所有输入元素。 |

## 可见性选择器

如果使用可见性来控制网页组件的流程和交互，则使用可见性 jQuery 选择器可以轻松选择隐藏或可见的 HTML 元素。

| 语法/示例 | 描述 |
| --- | --- |
| `:hidden`选择器 | 选择所有隐藏的元素。 |
| `:visible`选择器 | 选择所有可见的元素。 |

## 筛选选择器

通常，您将需要将 jQuery 选择器优化为更具体的子集。 一种实现方法是使用过滤的选择器。 筛选的选择器在选择器语句的末尾附加一个筛选器，以限制选择器返回的结果。

| 语法/示例 | 描述 |
| --- | --- |
| `:animated`选择器 | 运行选择器时，选择动画进行中的所有元素。 |
| `:eq()`选择器 | 选择匹配集中索引 n 处的元素。 |
| `:even`选择器 | 选择零索引的偶数元素。 |
| `:odd`选择器 | 选择零索引的奇数元素。 |
| `:first`选择器 | 选择第一个匹配的元素。 |
| `:last`选择器 | 选择最后一个匹配的元素。 |
| `:focus`选择器 | 选择当前处于焦点状态的元素。 |
| `:gt()`选择器 | 选择索引大于匹配集中索引的所有元素。 |
| `:lt()`选择器 | 选择索引小于匹配集中索引的所有元素。 |
| `:header`选择器 | 选择所有作为标头的元素，例如`h1`，`h2`，`h3`等。 |
| `:lang()`选择器 | 选择指定语言的所有元素。 |
| `:not()`选择器 | 选择与给定选择器不匹配的所有元素。 |
| `:root`选择器 | 选择作为文档根目录的元素。 |
| `:target`选择器 | 选择由文档 URI 的片段标识符指示的目标元素。 |

不可能在上面给出所有 **jQuery 选择器的示例**，因此我们将在单独的文章中了解这些选择器。

学习愉快！