jQuery选择器 之 完整列表

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

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

$(selector).methodName();

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

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

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

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

基本的jQuery选择器

基本选择器集中于HTML元素的id属性class属性标签名称

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

jQuery选择器属性

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

这些选择器将属性值视为单个字符串。例如,,$("a[rel='nofollow']")将选择<a href=”example.html” rel=”nofollow”>一些文本</a>,而不选择<a href=”example.html” rel=”nofollow otherValue”>一些文本</ 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") 选择“父”指定的元素的“子”指定的所有直接子元素。
后代选择器 ("ancestor descendant") 选择作为给定祖先的后代的所有元素。
下一个相邻选择器 ("prev + next") 选择所有与“ next”匹配的next元素,并紧随其后的是“ prev”。
下一个兄弟姐妹选择器 ("prev ~ siblings") 选择“ prev”元素之后的所有兄弟元素,它们具有相同的父元素,并与过滤“ siblings”选择器匹配。

表格选择器

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

语法/范例 描述
:button 选择器 选择所有按钮元素和按钮类型的元素。
:checkbox 选择器 选择所有类型的元素复选框。
:checked 选择器 匹配所有选中或选中的元素。
:disabled 选择器 选择所有禁用的元素。
:enabled 选择器 选择所有启用的元素。
:file 选择器 选择文件类型的所有元素。
:focus 选择器 选择当前处于焦点状态的元素。
:image 选择器 选择类型为image的所有元素。
:input 选择器 选择所有输入,文本区域,选择和按钮元素。
:password 选择器 选择类型为password的所有元素。
:radio 选择器 选择单选类型的所有元素。
:reset 选择器 选择所有类型为reset的元素。
:selected 选择器 选择所有选定的元素。
:submit 选择器 选择类型为Submit的所有元素。
:text 选择器 选择文本类型的所有输入元素。

可见性选择器

如果使用可见性来控制网页组件的 Stream 程和交互,则使用可见性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选择器的示例,因此我们将在其单独的文章中了解这些选择器。

saigon has written 1440 articles

Leave a Reply