选择器非常重要。 大部分jQuery方法需要某种方式选择元素后才能使用。 例如，为一个按钮附加点击事件要求你首先选择这个按钮。
由于常用的jQuery选择器是基于已有的CSS选择器，因此可能你已经非常熟练使用它们了。 然而有些选择器却很少用到。 本教程中，我会聚焦那些鲜为人知但同样重要的选择器。
All选择器（*）
这个选择器正确的叫法是全局选择器，因为它选择的是文档中所有元素，包括<head>、<body>、<script>或<link>标签。 这个示例会证实我的观点。
如果和其他元素组合使用，这个选择器运行极其缓慢。 但其执行速度完全取决于如何使用选择器以及选择器在哪个浏览器中执行。 Firefox中，$("#selector > *").find("li")比$("#selector > ul").find("li")执行更慢。 有意思的是，$("#selector > *").find("li")运行稍快。 在所有所有浏览器中，$("#selector *").find("li")运行都比$("#selector ul").find("li")更慢。 我的建议是在使用之前，你最好比较一次它们之间的执行效率。
这个示例比较了所有元素选择器在每个浏览器中的执行速度。
示例地址：http://codepen.io/Shokeen/pen/KVRzXB
Animated Selector (:animated)
你可以使用:animated选择器选择所有在这个选择器运行期间仍在执行动画的元素。 唯一的问题是它只是选择使用jQuery产生动画的元素。 这个选择器是jQuery的扩展，它并未从本地方法querySelectorAll()伴随的性能提升中受益。
同样，无法使用jQuery监测CSS动画。 但可以使用animationend事件监测动画的结束。
看看下面这个示例。
示例地址：https://codepen.io/Shokeen/pen/OMryOy
上面这个例子中，只有单数的div元素在执行$(":animated").css("background","#6F9");之前是动着的。 反映的结果就是只有div那些元素变为绿色。 在那之后，我们在剩下所有div元素上调用animate函数。 如果现在点击按钮，所有的div元素都会变为绿色。
属性不等选择器([attr!="value"])
常用的属性选择器一般检测特定名或指定值的属性是否存在。 换句话说，[attr!="value"]选择器选择所有不含指定属性或属性存在但值与给定值不等的元素。 它等同于:not([attr="value"])。与[attr="value"]不同，[attr!="value"]并不属于CSS规范 因此，在现代浏览器中，使用$("css-selector").not("[attr='value']") 可以提高效率。
下面这段代码为所有data-category属性不等于css的li元素增加一个值为mismatch的class。 在调试时或使用JavaScirpt设置正确属性值时，这很有帮助。
这个例子中，我循环了两个列表，修正了元素category属性的值。
示例地址：https://codepen.io/Shokeen/pen/vLvBYW
Contains选择器(:contains(text))
这个选择器用来选择所有包含指定字符串的元素。 匹配的字符串可以是当前关注元素直接包含或后辈元素包含。
下面的例子会帮助你更好理解这个选择器。 我们会为所有出现的Lorem Ipsum语句添加黄色背景。
开始写HTML吧：
可以看到句子Lorem Ipsum出现在7个不同的地方。 我特意在其中一处使用了小标题，以显示这里使用的是区分大小写的匹配。
这里使用JavaScript代码高亮显示所有匹配处：
字符串两边的单引号不是必须的。 也就是说$("section:contains('Lorem Ipsum')")与$("section:contains(Lorem Ipsum)")在上述代码中都是合规的。 我的目标只是section元素，所以列表元素中的Lorem Ipsum文本不受影响。 此外，由于与选择器不匹配，第二个section元素中的Lorem Ipsum文本也不会高亮显示。 正如本例所示，事实如此。
示例地址：https://codepen.io/Shokeen/pen/vLjWdR
Has选择器 (:has(selector))
这个选择器会选择所有至少包含一个匹配给定选择器的子元素的元素。 匹配选择器的元素不必是直接子元素。 :has()选择器不属于CSS规范。 现在浏览器中，为了更高的性能，应该使用$("pure-css-selector").has(selector)，而不是$("pure-css-selector:has(selector)")。
这个选择器的一个可能的使用场景是操作包含特定元素的元素。 在我们这个例子中，我将改变所有内部包含链接的列表元素的颜色。
本例的HTML代码如下：
这是改变列表元素颜色的JavaScript代码：
这段代码的逻辑直截了当。 循环所有包含链接的列表元素，设置它们的颜色为crimson。 你也可以操作列表元素中的文本，亦或从DOM中删除这些元素。 我确信这个选择器有其他更多的应用场景。 查看CodePen上这段代码的可运行版本。
示例地址：https://codepen.io/Shokeen/pen/NxMvxq
基于下标的选择器
除了例如:nth-child()等CSS选择器，jQuery也有自己的一系列基于下表的选择器。 包括 :eq(index)、:lt(index)和:gt(index)。 与基于CSS的选择器不同，这些选择器下表从0开始。 这就表明，:nth-child(1)会选择第一个子元素，而:eq(1)会选择第二个子元素。 要选择第一个子元素，则使用:eq(0)。
这些选择器也接收负数值。 当使用负数时，从最后一个元素开始向后（自下向上）计数。
:lt(index)选择所有下标小于指定值的元素。 使用:lt(3)选择前三个元素。 这是因为前三个元素的下标分别为0、1和2。 使用负数下标，会选择向后计数抵达的元素之前的所有值。 :gt(index)与之类似，选择的是所有下标大于指定值的元素。
尝试多点击几次示例中的按钮，以更好理解下标选择器。
示例地址：https://codepen.io/Shokeen/pen/jWxxwM
表单选择器
为更容易选择表单元素，jQuery定义了许多表单选择器。 比如，:button选择器会选择所有按钮元素以及类型为button的元素。 类似，:checkbox选择器会选择所有类型为checkbox的input元素。 有些定义的选择器，几乎所有input元素都可使用。 仔细考虑下面这个表单：
我在这个例子中创建了2个文本元素和4个checkbox。 表单很简单，但它应该使你对表单选择器的工作方式有了一定了解。 我们将使用:text选择器对文本元素进行计数，更新第一个文本输入框的文本内容。
我使用:text选择器选择所有文本输入框，然后使用length方法计算所选元素的个数。 在第三条语句中，使用了前面讨论到的:eq()选择器选择第一个元素，然后对其赋值。
记住，在jQuery 1.5.2版本中，未指定type属性的元素，:text选择器会返回true。
看看这个示例。
示例地址：https://codepen.io/Shokeen/pen/JGvaOB
Header选择器 (:header)
如果你之前想过选择页面上所有的标题元素，可以使用快捷方式$(":header")，而不用繁琐的$("h1 h2 h3 h4 h5 h6")选择器。 这个选择器不属于CSS规则。 因此，为达到更高性能，先使用单纯的CSS选择器，然后使用.filter(":header")选择器。
例如，假设页面上有个包含3个不同标题的article元素。 那么，你可使用$("article :header")，而不是$("article h1, article h2, article h3")，因为前者更简洁。 使用$("article").filter(":header")，运行更快。 这种方式，两全其美（简洁、快速）。
可使用下面的代码对所有标题编号。
尝试运行下这个附加的示例。
地址：https://codepen.io/Shokeen/pen/WrLNBE
注：translation by Cheng chao
原文链接：
https://code.tutsplus.com/zh-hans/tutorials/uncommon-jquery-selectors--cms-25812
本教程中，我讨论了一些在使用jQuery时你可能会遇到的不常用到的选择器。 尽管这里讲到的大多数选择器有替代版本可供使用，但了解到它们的存在也是件好事。
希望从本教程中你能学到新东西。 如果有任何问题或建议，请在下面回复。
公众号
前端达人
长按识别左边二维码关注我