选择器至关重要。大多数jquery方法都需要某种元素选择才能发挥作用。例如，将click事件附加到按钮需要您首先选择该按钮。
由于常见的jQuery选择器基于现有的CSS选择器，因此您可能非常熟悉它们。然而，也有一些选择器没有被广泛使用。在本教程中，我将重点关注这些鲜为人知但重要的选择器。
所有选择器(*)
这个选择器被正确地称为通用选择器，因为它选择文档中的所有元素，包括
,,<script>或<link>标签。这个演示应该可以说明我的观点。<divclass="code"style="position:relative;padding:0px;margin:0px;"><preclass="brush:javascript;toolbal:false;">$("section*")//Selectsalldescendants$("section>*")//Selectsalldirectdescendants$("section>*>*")//Selectsallsecondleveldescendants$("section>*>*a")//Selects3rdlevellinks</pre><divclass="contentsignin"></div></div><p>如果与其他元素结合使用，此选择器会非常慢。但是，这完全取决于选择器的使用方式以及在哪个浏览器中执行。在Firefox中，$("#selector>*").find("li")比$("#selector>ul").find("li").有趣的是，Chrome执行$("#selector>*").find("li")的速度稍快一些。所有浏览器执行$("#selector*").find("li")的速度都比$("#selectorul").find("li"慢)。我建议您在使用此选择器之前比较性能。<p><p>这里是一个比较all选择器执行速度的演示。<h2>动画选择器(:animated)<p>您可以使用:animated选择器来选择在此选择器运行时动画仍在进行中的所有元素。唯一的问题是它只会选择使用jQuery进行动画处理的元素。此选择器是jQuery扩展，不会受益于本机querySelectorAll()方法带来的性能提升。<p>此外，您无法使用jQuery检测CSS动画。不过，您可以使用animationend事件检测动画何时结束。<p>观看以下演示。<p>在上面的演示中，在执行$(":animated").css("background","#6F9")之前，仅对奇数div元素进行动画处理;.因此，只有那些div元素会更改为绿色。之后，我们对div元素的其余部分调用animate函数。如果您现在点击按钮，所有div元素都应该变成绿色。<h2>属性不等于选择器（[attr!="value"]）<p>通用属性选择器通常会检测具有给定名称或值的属性是否存在。另一方面，[attr!="value"]选择器将选择所有不具有指定属性或该属性存在但不等于特定值的元素。它相当于:not([attr="value"])。与[attr="value"]不同，[attr!="value"]不是CSS规范的一部分。因此，使用$("css-selector").not("[attr='value']")可以提高现代浏览器的性能。<p>下面的代码片段将mismatch类添加到所有li元素，其data-category属性不等于css.这在调试或使用JavaScript设置正确的属性值时很有帮助。<divclass="code"style="position:relative;padding:0px;margin:0px;"><preclass="brush:javascript;toolbal:false;">$("li[data-category!='css']").each(function(){$(this).addClass("mismatch");//Addsamismatchclasstofilteredoutselectors.$(".mismatch").attr("data-category",attributeValue);//Setcorrectattributevalue});</pre><divclass="contentsignin"></div></div><p>在演示中，我检查了两个列表并更正了元素的类别属性的值。<h2>包含选择器（:contains(text)）<p>该选择器用于选择包含指定字符串的所有元素。匹配字符串可以直接位于相关元素内部或其任何后代内部。<p>下面的示例应该可以帮助您更好地理解这个选择器。我们将为所有出现的短语LoremIpsum添加黄色背景。<p>让我们从标记开始：<divclass="code"style="position:relative;padding:0px;margin:0px;"><preclass="brush:html;toolbal:false;"><section><p>LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknownprintertookagalleyoftypeandscrambledittomakeatypespecimenbook.Ithassurvivednotonlyfivecenturies,butalsotheleapintoelectronictypesetting,remainingessentiallyunchanged.</p><p>Itwaspopularisedinthe1960swiththereleaseofLetrasetsheetscontainingLoremIpsumpassages,andmorerecentlywithdesktoppublishingsoftwarelikeAldusPageMakerincludingversionsof<b>LoremIpsum</b>.</p><ahref="https://en.wikipedia.org/wiki/Lorem_ipsum">LoremIpsumWikipediaLink</a></section><section><p>This<spanclass="small-u">loremipsum</span>shouldnotbehighlighted.</p></section><ul><li>ALoremIpsumList</li><li>MoreElementsHere</li></ul></pre><divclass="contentsignin"></div></div><p>观察短语LoremIpsum出现在七个不同的位置。我特意在其中一个实例中使用小型大写字母，以表明匹配区分大小写。<p>以下是突出显示所有匹配项的JavaScript代码：<divclass="code"style="position:relative;padding:0px;margin:0px;"><preclass="brush:javascript;toolbal:false;">$("section:contains('LoremIpsum')").each(function(){$(this).html($(this).html().replace(/LoremIpsum/g,"<spanclass='match-o'>LoremIpsum</span>"));});</pre><divclass="contentsignin"></div></div><p>字符串周围的引号是可选的。这意味着$("section:contains('LoremIpsum')")和$("section:contains(LoremIpsum)")均有效在上面的代码片段中。我仅针对部分元素，因此列表元素内的LoremIpsum文本应保持不变。此外，由于大小写不匹配，第二个section元素内的文本也不应突出显示。正如您在此演示中所看到的，这正是所发生的情况。<h2>有选择器(:has(selector))<p>此选择器将选择至少包含一个与给定选择器匹配的元素的所有元素。需要匹配的选择器不必是直接子级。:has()不是CSS规范的一部分。在现代浏览器中，您应该使用$("pure-css-selector").has(selector)而不是$("pure-css-selector:has(选择器)")以提高性能。<p>此选择器的一个可能的应用是操作其中包含特定元素的元素。在我们的示例中，我将更改内部包含链接的所有列表元素的颜色。<p>这是演示的标记：<divclass="code"style="position:relative;padding:0px;margin:0px;"><preclass="brush:html;toolbal:false;"><ul><li>Pellentesque<ahref="dummy.html">habitantmorbi</a>tristiquesenectus.</li><li>Pellentesquehabitantmorbitristiquesenectus.</li>(...morelistelementshere...)<li>Pellentesquehabitantmorbitristiquesenectus.</li><li>Pellentesque<ahref="dummy.html">habitantmorbi</a>tristiquesenectus.</li></ul></pre><divclass="contentsignin"></div></div><p>以下是更改列表元素颜色的JavaScript代码：<divclass="code"style="position:relative;padding:0px;margin:0px;"><preclass="brush:javascript;toolbal:false;">$("li:has(a)").each(function(index){$(this).css("color","crimson");});</pre><divclass="contentsignin"></div></div><p>这段代码背后的逻辑非常简单。我循环遍历所有包含链接的列表元素并将其颜色设置为深红色。您还可以操作列表元素内的文本或将它们从DOM中删除。我确信这个选择器可以用在很多其他情况下。在CodePen上查看此代码的实时版本。<h2>基于索引的选择器<p>除了像:nth-child()这样的CSS选择器之外，jQuery也有自己的一组基于索引的选择器。这些选择器是:eq(index)、:lt(index)和:gt(index)。与基于CSS的选择器不同，这些选择器使用从零开始的索引。这意味着:nth-child(1)将选择第一个子级，而:eq(1)将选择第二个子级。要选择第一个孩子，您必须使用:eq(0)。<p>这些选择器也可以接受负值。当指定负值时，将从最后一个元素开始向后计数。<p>:lt(index)选择索引小于指定值的所有元素。要选择前三个元素，您将使用:lt(3)。这是因为前三个元素的索引值分别为0、1和2。使用负索引将选择向后计数后到达的元素之前的所有值。同样，:gt(index)选择索引大于指定值的所有元素。<divclass="code"style="position:relative;padding:0px;margin:0px;"><preclass="brush:html;toolbal:false;">:lt(4)//Selectsfirstfourelements:lt(-4)//Selectsallelementsbesideslast4:gt(4)//Selectsallelementsbesidesfirst5:gt(-4)//Selectslastthreeelements:gt(-1)//SelectsNothing:eq(4)//Selectsfifthelement:eq(-4)//Selectsfourthelementfromlast</pre><divclass="contentsignin"></div></div><p>尝试单击演示中的各个按钮以更好地了解索引选择器。<h2>表单选择器<p>jQuery定义了许多选择器，以便轻松选择表单元素。例如，:button选择器将选择所有按钮元素以及按钮类型的元素。同样，:checkbox将选择所有类型为checkbox的输入元素。几乎所有输入元素都定义了选择器。考虑下面的表格：<divclass="code"style="position:relative;padding:0px;margin:0px;"><preclass="brush:html;toolbal:false;"><formaction="#"method="post"><div><labelfor="name">TextInput</label><br><inputtype="text"name="name"/><inputtype="text"name="name"/></div><hr><div><labelfor="checkbox">Checkbox:</label><inputtype="checkbox"name="checkbox"/><inputtype="checkbox"name="checkbox"/><inputtype="checkbox"name="checkbox"/><inputtype="checkbox"name="checkbox"/></div></form></pre><divclass="contentsignin"></div></div><p>我在这里创建了两个文本元素和四个复选框。该表单非常基本，但它应该让您了解表单选择器的工作原理。我们将使用:text选择器计算文本元素的数量，并更新第一个文本输入中的文本。<divclass="code"style="position:relative;padding:0px;margin:0px;"><preclass="brush:javascript;toolbal:false;">vartextCount=$(":text").length;$(".text-elements").text('TextInputs:'+textCount);$(":text").eq(0).val('Addedprogramatically!');</pre><divclass="contentsignin"></div></div><p>我使用:text选择所有文本输入，然后使用length方法来计算它们的数量。在第三条语句中，我使用前面讨论的:eq()选择器来访问第一个元素，然后设置其值。<p>请记住，从jQuery1.5.2开始，对于未指定任何type属性的元素，:text返回true。<p>看看演示。<h2>标头选择器(:header)<p>如果您想选择网页上的所有标题元素，可以使用简短的$(":header")版本，而不是详细的$("h1h2h3h4h5h6")选择器。此选择器不是CSS规范的一部分。因此，首先使用纯CSS选择器，然后使用.filter(":header")可以获得更好的性能。<p>例如，假设网页上有一个article元素，并且它具有三个不同的标题。现在，为了简洁起见，您可以使用$("article:header")而不是$("articleh1,articleh2,articleh3")。为了使其更快，您可以使用$("article").filter(":header")。这样您就可以两全其美。<p>要对所有标题元素进行编号，您可以使用以下代码。<divclass="code"style="position:relative;padding:0px;margin:0px;"><preclass="brush:javascript;toolbal:false;">$("article:header").each(function(index){$(this).text((index+1)+":"+$(this).text());//AddsnumberstoHeadings});</pre><divclass="contentsignin"></div></div><p>尝试一下随附的演示。<h2>最终想法<p>在本教程中，我讨论了使用jQuery时可能遇到的不常见选择器。虽然大多数选择器都有可供您使用的替代方案，但了解这些选择器的存在仍然是件好事。<p>我希望您在本教程中学到了一些新东西。如果您有任何问题或建议，请评论。</script>