不常见的jQuery选择器

选择器至关重要。大多数 jquery 方法都需要某种元素选择才能发挥作用。例如，将click 事件附加到按钮需要您先选择按钮。

由于常见的 jQuery 选择器基于现有的css选择器，因此您可能对它们很熟悉。但是，也有一些选择器使用得不多。在本教程中，我将重点介绍这些鲜为人知但重要的选择器。

所有选择器 (*)

这个选择器被正确地称为通用选择器，因为它选择了文档中的所有元素，包括、<head>或标签。这个演示应该说明我的观点。<body><script><link

$("section *")         // Selects all descendants
$("section > *")       // Selects all direct descendants
$("section > * > *")   // Selects all second level descendants
$("section > * > * a") // Selects 3rd level links

如果与其他元素结合使用，此选择器会非常慢。但是，这完全取决于选择器的使用方式以及它在哪个浏览器中执行。在 Firefox 中， $("#selector > *").find("li") 它比 $("#selector > ul").find("li"). 有趣的是，chrome 的执行速度稍$("#selector > *").find("li") 快一些。所有浏览器的执行 $("#selector *").find("li") 速度都比 $("#selector ul").find("li"). 我建议您在使用此选择器之前比较性能。

这是一个比较 all 选择器的执行速度的演示。

动画选择器 (:animated)

您可以使用 :animated选择器选择在此选择器运行时动画仍在进行中的所有元素。唯一的问题是它只会选择使用 jQuery 动画的元素。这个选择器是一个 jQuery 扩展，并不能从原生 queryselectorAll()方法带来的性能提升中受益。

此外，您无法使用 jQuery 检测 css 动画。但是，您可以使用 animationend事件检测动画何时结束。

看看下面的演示。

在上面的演示中，只有奇数 div元素在执行之前被动画化 $(":animated").css("background","#6F9");。结果，只有那些div元素变为绿色。之后，我们在其余div元素上调用 animate 函数。如果单击button现在，所有div元素都应变为绿色。

属性不等于选择器 ([attr!="value"])

通用属性选择器通常检测具有给定名称或值的属性是否存在。另一方面， [attr!="value"] 选择器将选择所有不具有指定属性或属性存在但不等于特定值的元素。它相当于 :not([attr="value"])。不像 [attr="value"] , [attr!="value"]不是 CSS 规范的一部分。因此，使用 $("css-selector").not("[attr='value']") 可以提高现代浏览器的性能。

下面的代码片段为属性不等于的所有元素添加了一个类。这在使用javascript调试或设置正确的属性值时会很有帮助。mismatchlidata-categorycss

$("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
});

在演示中，我遍历了两个列表并更正了元素的类别属性的值。

包含选择器 (:contains(text))

此选择器用于选择包含指定字符串的所有元素。匹配的字符串可以直接在相关元素内或其任何后代内。

下面的示例应该可以帮助您更好地理解此选择器。我们将为所有出现的短语 Lorem Ipsum添加黄色背景。

让我们从标记开始：

<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>

观察到短语 Lorem Ipsum 出现在七个不同的位置。我故意在其中一种情况下使用小型大写字母来表明匹配是区分大小写的。

这是突出显示所有匹配项的 JavaScript 代码：

$("section:contains('Lorem Ipsum')").each(function() {
  $(this).html(
      $(this).html().replace(/Lorem Ipsum/g, "<span class='match-o'>Lorem Ipsum</span>")
    );
});

字符串周围的引号是可选的。这意味着在上面的代码段中两者都 $("section:contains('Lorem Ipsum')") 有效 $("section:contains(Lorem Ipsum)") 。我只针对section 元素，因此列表元素内的 Lorem Ipsum 文本应保持不变。此外，由于大小写不匹配，第二个section元素内的文本也不应突出显示。正如您在这个演示中看到的那样，这正是发生的事情。

有选择器 (:has(selector))

此选择器将选择包含至少一个与给定选择器匹配的元素的所有元素。需要匹配的选择器不必是直接子代。:has()不是 CSS 规范的一部分。在现代浏览器中，您应该使用 $("pure-css-selector").has(selector)代替 $("pure-css-selector:has(selector)") 来提高性能。

此选择器的一种可能应用是操作其中包含特定元素的元素。在我们的示例中，我将更改所有包含链接的列表元素的颜色。

这是演示的标记：

<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>

这是更改列表元素颜色的 javaScript 代码：

$("li:has(a)").each(function(index) {
  $(this).css("color", "crimson");
});

这段代码背后的逻辑非常简单。我遍历所有包含链接的列表元素并将它们的颜色设置为深红色。您还可以操作列表元素内的文本或将它们从dom中删除。我确信这个选择器可以在很多其他情况下使用。在 CodePen 上查看此代码的实时版本。

基于索引的选择器

除了 CSS 选择器，jQuery 也有自己的一组基于索引的选择器。这些选择器是、和。与基于 CSS 的选择器不同，这些选择器使用从零开始的索引。这意味着 while将选择第一个孩子，将选择第二个孩子。要选择第一个孩子，您必须使用. :nth-child():eq(index):lt(index):gt(index):nth-child(1):eq(1):eq(0)

这些选择器也可以接受负值。当指定负值时，从最后一个元素开始向后计数。

:lt(index)选择索引小于指定值的所有元素。要选择前三个元素，您将使用:lt(3). 这是因为前三个元素的索引值分别为 0、1 和 2。使用负索引将选择我们倒数后到达的元素之前的所有值。同样，:gt(index)选择索引大于指定值的所有元素。

: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

尝试单击演示中的各种按钮以更好地了解索引选择器。

表单选择器

jQuery 定义了很多选择器，以便于选择表单元素。例如，:button选择器将选择所有按钮元素以及具有按钮类型的元素。同样，:checkbox将选择类型为复选框的所有输入元素。几乎所有输入元素都定义了选择器。考虑下面的表格：

<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>

我在这里创建了两个文本元素和四个复选框。表单非常基本，但它应该让您了解表单选择器的工作原理。我们将使用选择器计算文本元素的数量， :text并更新第一个文本输入中的文本。

var textCount = $(":text").length;
$(".text-elements").text('Text Inputs : ' + textCount);
 
$(":text").eq(0).val('Added programatically!');

我使用:text选择所有文本输入，然后使用长度方法来计算它们的数量。在第三个语句中，我使用前面讨论的:eq()选择器来访问第一个元素，然后设置它的值。

请记住，从 jQuery 1.5.2 开始，:text返回true没有指定任何类型属性的元素。

看看演示。

标题选择器 (:header)

如果您想选择网页上的所有标题元素，您可以使用短 $(":header")版本而不是详细 $("h1 h2 h3 h4 h5 h6")选择器。这个选择器不是 CSS 规范的一部分。因此，首先使用纯 CSS 选择器然后使用 .filter(":header").

例如，假设article 网页上有一个元素，它有三个不同的标题。现在，为了简洁起见，您可以使用$("article :header")而不是 $("article h1, article h2, article h3")。为了使其更快，您可以使用 $("article").filter(":header"). 这样，您就可以两全其美。

要对所有标题元素进行编号，您可以使用以下代码。

$("article :header").each(function(index) {
  $(this).text((index + 1) + ": " + $(this).text());
  // Adds numbers to Headings
});

试试这个随附的演示。

最后的想法

在本教程中，我讨论了在使用 jQuery 时可能会遇到的不常见的选择器。尽管这些选择器中的大多数都有可供您使用的替代方案，但知道这些选择器的存在仍然是件好事。

文章目录

所有选择器 (*)

动画选择器 (:animated)

属性不等于选择器 ([attr!="value"])

包含选择器 (:contains(text))

有选择器 (:has(selector))

基于索引的选择器

表单选择器

标题选择器 (:header)

最后的想法

所有选择器 (*)

动画选择器 (:animated)

属性不等于选择器 ([attr!="value"])

包含选择器 (:contains(text))

有选择器 (:has(selector))

基于索引的选择器

表单选择器

标题选择器 (:header)

最后的想法

相关推荐

最新文章 | 热门文章 | 随机文章