jQuery 选择器 – 完整列表 · HowToDoInJava 中文系列教程

# 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 |= "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 选择器的示例**，因此我们将在单独的文章中了解这些选择器。学习愉快！