你了解这些不常见的jQuery选择器吗？

jQuery provides a variety of selectors to target elements, including lesserknown ones like the attribute selector $("[attribute='value']"), child selector $("parent > child"), and sibling selector $("prev + next"). These can help in complex scenarios where common selectors are insufficient.

在jQuery中，选择器是用于定位HTML元素的一种方式，它们允许你根据元素的id、类、类型、属性、状态等来找到并操作DOM元素，尽管有些选择器在日常开发中使用得非常频繁，如ID选择器(#)、类选择器(.)和元素选择器(tagName)，但jQuery还提供了一些不常用但在某些情况下极其有用的选择器。

下面是一些较少使用但功能强大的jQuery选择器：

1. 可见性选择器 (:visible 和:hidden)

这些选择器用于选取当前可见或隐藏的元素。

:visible 选择器选取当前可见的元素。

:hidden 选择器选取当前隐藏的元素。

2. 包含文本的选择器 (:contains(text))

这个选择器用于选取包含指定文本的元素。

$("div:contains('John')")

上述代码会选择所有包含文本“John”的<div>元素。

3. 子元素选择器 (:nthchild(index/even/odd/equation))

这个选择器基于元素在其父级元素中的位置来选取元素。

:nthchild(index) 根据索引位置选取元素。

:nthchild(even) 和:nthchild(odd) 分别选取偶数和奇数位置的元素。

:nthchild(equation) 使用公式来选取元素，例如:nthchild(3n) 会选取每第三个元素。

4. 属性选择器 ([attribute])

这类选择器基于元素的属性来选取元素。

[attribute] 选取拥有指定属性的元素。

[attribute=value] 选取属性值等于指定值的元素。

[attribute!=value] 选取属性值不等于指定值的元素。

[attribute^=value] 选取属性值以指定值开头的元素。

[attribute$=value] 选取属性值以指定值结尾的元素。

[attribute*=value] 选取属性值中含有指定值的元素。

[attribute|=value] 选取属性值以指定值开头（后面跟着一个连字符）的元素。

[attribute~=value] 选取属性值是一个空格分隔的值列表，其中一个值等于指定值的元素。

[attribute^=value i] 选取属性值以指定值开始，不区分大小写。

5. 表单选择器

jQuery为表单元素提供了一系列特殊的选择器：

:input 选取所有的<input>,<textarea>,<select> 和<button> 元素。

:text 选取所有的单行文本输入框。

:password 选取所有的密码输入框。

:radio 选取所有的单选按钮。

:checkbox 选取所有的复选框。

:submit 和:reset 和:button 分别选取提交按钮、重置按钮和按钮元素。

:image 选取图像输入类型。

:file 选取文件上传输入框。

:enabled 和:disabled 分别选取可用和不可用的表单元素。

6. 动态过滤选择器 (:first,:last,:not(selector),:has(selector))

这些选择器允许你基于元素的状态或相对于其他元素的位置进行筛选。

:first 和:last 分别选取第一个和最后一个匹配的元素。

:not(selector) 排除与给定选择器匹配的元素。

:has(selector) 选取含有与给定选择器匹配的元素的元素。

7. 表单类型选择器 (:input)

这个选择器用于选取所有的表单输入元素，它包括文本框、密码框、单选按钮、复选框、下拉选择框、隐藏域、文件上传控件以及按钮等。

$(":input")

上面的代码会选择页面上所有的表单输入元素。

8. 头元素选择器 (:header)

这个选择器用于选取所有的标题元素，包括<h1>到<h6>。

$(":header")

上面的代码会选择所有的标题元素。

9. 多元素选择器 (,)

使用逗号可以将多个选择器合并为一个选择器，从而同时选取多种类型的元素。

$("div, span, p")

上述代码会选择所有的<div>,<span>和<p>元素。

列出了一些不常被提及但在特定场景下非常有用的jQuery选择器，掌握这些选择器的使用可以极大地提高你在处理复杂DOM操作时的灵活性和效率。