jQuery 选择器 – 完整列表 - 《HowToDoInJava 中文系列教程》

基本的 jQuery 选择器
jQuery 选择器属性
内容选择器
层次选择器
表单选择器
可见性选择器
筛选选择器

原文： https://howtodoinjava.com/jquery/jquery-selectors/

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

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

$(selector).methodName();

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

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

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

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 选择器的示例，因此我们将在单独的文章中了解这些选择器。

学习愉快！