选择器至关重要。大多数 jquery 方法都需要某种元素选择才能发挥作用。例如，将 click 事件附加到按钮需要您首先选择该按钮。
由于常见的 jQuery 选择器基于现有的 CSS 选择器，因此您可能非常熟悉它们。然而，也有一些选择器没有被广泛使用。在本教程中，我将重点关注这些鲜为人知但重要的选择器。
所有选择器 (*)
这个选择器被正确地称为通用选择器，因为它选择文档中的所有元素，包括
, , <script> 或 <link> 标签。这个演示应该可以说明我的观点。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">$("section *") // Selects all descendants $("section > *") // Selects all direct descendants $("section > * > *") // Selects all second level descendants $("section > * > * a") // Selects 3rd level links </pre><div class="contentsignin">登录后复制</div></div> <p>如果与其他元素结合使用，此选择器会非常慢。但是，这完全取决于选择器的使用方式以及在哪个浏览器中执行。在 Firefox 中，$("#selector > *").find("li") 比 $("#selector > ul").find("li").有趣的是，Chrome 执行 $("#selector > *").find("li") 的速度稍快一些。所有浏览器执行 $("#selector *").find("li") 的速度都比 $("#selector ul").find("li" 慢)。我建议您在使用此选择器之前比较性能。 </p><p></p> <p>这里是一个比较 all 选择器执行速度的演示。</p> <h2>动画选择器 (:animated)</h2> <p>您可以使用 :animated 选择器来选择在此选择器运行时动画仍在进行中的所有元素。唯一的问题是它只会选择使用 jQuery 进行动画处理的元素。此选择器是 jQuery 扩展，不会受益于本机 querySelectorAll() 方法带来的性能提升。 </p> <p>此外，您无法使用 jQuery 检测 CSS 动画。不过，您可以使用 animationend 事件检测动画何时结束。</p> <p>观看以下演示。</p> <p>在上面的演示中，在执行 $(":animated").css("background","#6F9") 之前，仅对奇数 div 元素进行动画处理;.因此，只有那些 div 元素会更改为绿色。之后，我们对 div 元素的其余部分调用 animate 函数。如果您现在点击 按钮，所有 div 元素都应该变成绿色。</p> <h2>属性不等于选择器（[attr!="value"]）</h2> <p>通用属性选择器通常会检测具有给定名称或值的属性是否存在。另一方面，[attr!="value"] 选择器将选择所有不具有指定属性或该属性存在但不等于特定值的元素。它相当于 :not([attr="value"])。与 [attr="value"] 不同，[attr!="value"] 不是 CSS 规范的一部分。因此，使用 $("css-selector").not("[attr='value']") 可以提高现代浏览器的性能。 </p> <p>下面的代码片段将 mismatch 类添加到所有 li 元素，其 data-category 属性不等于 css.这在调试或使用 JavaScript 设置正确的属性值时很有帮助。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">$("li[data-category!='css']").each(function() { $(this).addClass("mismatch"); // Adds a mismatch class to filtered out selectors. $(".mismatch").attr("data-category", attributeValue); // Set correct attribute value }); </pre><div class="contentsignin">登录后复制</div></div> <p>在演示中，我检查了两个列表并更正了元素的类别属性的值。</p> <h2>包含选择器（:contains(text)）</h2> <p>该选择器用于选择包含指定字符串的所有元素。匹配字符串可以直接位于相关元素内部或其任何后代内部。 </p> <p>下面的示例应该可以帮助您更好地理解这个选择器。我们将为所有出现的短语 Lorem Ipsum 添加黄色背景。</p> <p>让我们从标记开始：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbal:false;"><section> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of <b>Lorem Ipsum</b>.</p> <a href="https://en.wikipedia.org/wiki/Lorem_ipsum">Lorem Ipsum Wikipedia Link</a> </section> <section> <p>This <span class="small-u">lorem ipsum</span> should not be highlighted.</p> </section> <ul> <li>A Lorem Ipsum List</li> <li>More Elements Here</li> </ul> </pre><div class="contentsignin">登录后复制</div></div> <p>观察短语 Lorem Ipsum 出现在七个不同的位置。我特意在其中一个实例中使用小型大写字母，以表明匹配区分大小写。 </p> <p>以下是突出显示所有匹配项的 JavaScript 代码：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">$("section:contains('Lorem Ipsum')").each(function() { $(this).html( $(this).html().replace(/Lorem Ipsum/g, "<span class='match-o'>Lorem Ipsum</span>") ); }); </pre><div class="contentsignin">登录后复制</div></div> <p>字符串周围的引号是可选的。这意味着 $("section:contains('Lorem Ipsum')") 和 $("section:contains(Lorem Ipsum)") 均有效在上面的代码片段中。我仅针对部分元素，因此列表元素内的 Lorem Ipsum 文本应保持不变。此外，由于大小写不匹配，第二个 section 元素内的文本也不应突出显示。正如您在此演示中所看到的，这正是所发生的情况。</p> <h2>有选择器 (:has(selector))</h2> <p>此选择器将选择至少包含一个与给定选择器匹配的元素的所有元素。需要匹配的选择器不必是直接子级。 :has() 不是 CSS 规范的一部分。在现代浏览器中，您应该使用 $("pure-css-selector").has(selector) 而不是 $("pure-css-selector:has(选择器)") 以提高性能。 </p> <p>此选择器的一个可能的应用是操作其中包含特定元素的元素。在我们的示例中，我将更改内部包含链接的所有列表元素的颜色。</p> <p>这是演示的标记：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbal:false;"><ul> <li>Pellentesque <a href="dummy.html">habitant morbi</a> tristique senectus.</li> <li>Pellentesque habitant morbi tristique senectus.</li> (... more list elements here ...) <li>Pellentesque habitant morbi tristique senectus.</li> <li>Pellentesque <a href="dummy.html">habitant morbi</a> tristique senectus.</li> </ul> </pre><div class="contentsignin">登录后复制</div></div> <p>以下是更改列表元素颜色的 JavaScript 代码：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">$("li:has(a)").each(function(index) { $(this).css("color", "crimson"); }); </pre><div class="contentsignin">登录后复制</div></div> <p>这段代码背后的逻辑非常简单。我循环遍历所有包含链接的列表元素并将其颜色设置为深红色。您还可以操作列表元素内的文本或将它们从 DOM 中删除。我确信这个选择器可以用在很多其他情况下。在 CodePen 上查看此代码的实时版本。</p> <h2>基于索引的选择器</h2> <p>除了像 :nth-child() 这样的 CSS 选择器之外，jQuery 也有自己的一组基于索引的选择器。这些选择器是 :eq(index)、:lt(index) 和 :gt(index)。与基于 CSS 的选择器不同，这些选择器使用从零开始的索引。这意味着 :nth-child(1) 将选择第一个子级，而 :eq(1) 将选择第二个子级。要选择第一个孩子，您必须使用 :eq(0)。 </p> <p>这些选择器也可以接受负值。当指定负值时，将从最后一个元素开始向后计数。 </p> <p>:lt(index) 选择索引小于指定值的所有元素。要选择前三个元素，您将使用 :lt(3)。这是因为前三个元素的索引值分别为 0、1 和 2。使用负索引将选择向后计数后到达的元素之前的所有值。同样，:gt(index) 选择索引大于指定值的所有元素。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbal:false;">:lt(4) // Selects first four elements :lt(-4) // Selects all elements besides last 4 :gt(4) // Selects all elements besides first 5 :gt(-4) // Selects last three elements :gt(-1) // Selects Nothing :eq(4) // Selects fifth element :eq(-4) // Selects fourth element from last </pre><div class="contentsignin">登录后复制</div></div> <p>尝试单击演示中的各个按钮以更好地了解索引选择器。</p> <h2>表单选择器</h2> <p>jQuery 定义了许多选择器，以便轻松选择表单元素。例如， :button 选择器将选择所有按钮元素以及按钮类型的元素。同样， :checkbox 将选择所有类型为 checkbox 的输入元素。几乎所有输入元素都定义了选择器。考虑下面的表格：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbal:false;"><form action="#" method="post"> <div> <label for="name">Text Input</label> <br> <input type="text" name="name" /> <input type="text" name="name" /> </div> <hr> <div> <label for="checkbox">Checkbox:</label> <input type="checkbox" name="checkbox" /> <input type="checkbox" name="checkbox" /> <input type="checkbox" name="checkbox" /> <input type="checkbox" name="checkbox" /> </div> </form> </pre><div class="contentsignin">登录后复制</div></div> <p>我在这里创建了两个文本元素和四个复选框。该表单非常基本，但它应该让您了解表单选择器的工作原理。我们将使用 :text 选择器计算文本元素的数量，并更新第一个文本输入中的文本。 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">var textCount = $(":text").length; $(".text-elements").text('Text Inputs : ' + textCount); $(":text").eq(0).val('Added programatically!'); </pre><div class="contentsignin">登录后复制</div></div> <p>我使用 :text 选择所有文本输入，然后使用 length 方法来计算它们的数量。在第三条语句中，我使用前面讨论的 :eq() 选择器来访问第一个元素，然后设置其值。 </p> <p>请记住，从 jQuery 1.5.2 开始，对于未指定任何 type 属性的元素，:text 返回 true。</p> <p>看看演示。</p> <h2>标头选择器 (:header)</h2> <p>如果您想选择网页上的所有标题元素，可以使用简短的 $(":header") 版本，而不是详细的 $ ("h1 h2 h3 h4 h5 h6") 选择器。此选择器不是 CSS 规范的一部分。因此，首先使用纯 CSS 选择器，然后使用 .filter(":header") 可以获得更好的性能。 </p> <p>例如，假设网页上有一个 article 元素，并且它具有三个不同的标题。现在，为了简洁起见，您可以使用 $("article :header") 而不是 $("article h1,article h2,article h3")。为了使其更快，您可以使用 $("article").filter(":header")。这样您就可以两全其美。</p> <p>要对所有标题元素进行编号，您可以使用以下代码。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">$("article :header").each(function(index) { $(this).text((index + 1) + ": " + $(this).text()); // Adds numbers to Headings }); </pre><div class="contentsignin">登录后复制</div></div> <p>尝试一下随附的演示。 <h2>最终想法 <p>在本教程中，我讨论了使用 jQuery 时可能遇到的不常见选择器。虽然大多数选择器都有可供您使用的替代方案，但了解这些选择器的存在仍然是件好事。 <p>我希望您在本教程中学到了一些新东西。如果您有任何问题或建议，请评论。</script>以上就是Rarely Used jQuery Selectors的详细内容，更多请关注其它相关文章！
本文地址：http://yunji1.cn