Sélecteurs jQuery rarement utilisés

Les sélecteurs sont cruciaux. La plupart des méthodes jQuery nécessitent une sorte de sélection d'éléments pour fonctionner. Par exemple, pour attacher un événement click à un bouton, vous devez d'abord sélectionner le bouton.

Étant donné que les sélecteurs jQuery courants sont basés sur des sélecteurs CSS existants, vous les connaissez probablement très bien. Cependant, certains sélecteurs ne sont pas largement utilisés. Dans ce tutoriel, je me concentrerai sur ces sélecteurs moins connus mais importants.

Tous les sélecteurs (*)

Ce sélecteur est appelé à juste titre sélecteur universel car il sélectionne tous les éléments du document, y compris 93f0f5c25f18dab9d176bd4f6de5d30e, 6c04bd5ca3fcae76e30b72ad730ca86d, 3f1c4e4b6b16bbbd69b2ee476dc4f83a 或 2cdf5bf648cf2f33323966d7f58a7f3f Étiquette. Cette démo devrait illustrer mon propos.

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

Ce sélecteur peut être très lent s'il est utilisé en combinaison avec d'autres éléments. Cependant, tout dépend de la manière dont le sélecteur est utilisé et dans quel navigateur il est exécuté. Dans Firefox, $("#selector > *").find("li") 比 $("#selector > ul").find("li").有趣的是，Chrome 执行 $("#selector > *").find("li") 的速度稍快一些。所有浏览器执行 $("#selector *").find("li") 的速度都比 $("#selector ul").find("li" 慢). Je vous recommande de comparer les performances avant d'utiliser ce sélecteur.

Voici une démo comparant la vitesse d'exécution du sélecteur all.

Sélecteur animé (:animé)

Vous pouvez utiliser les améliorations de performances apportées par la méthode :animated 选择器来选择在此选择器运行时动画仍在进行中的所有元素。唯一的问题是它只会选择使用 jQuery 进行动画处理的元素。此选择器是 jQuery 扩展，不会受益于本机 querySelectorAll().

De plus, vous ne pouvez pas détecter les animations CSS à l'aide de jQuery. Cependant, vous pouvez utiliser l'événement animationend pour détecter la fin de l'animation.

Regardez la démo ci-dessous.

Dans la démo ci-dessus, lors de l'exécution de $(":animated").css("background","#6F9") 之前，仅对奇数 <code class="inline">div 元素进行动画处理;.因此，只有那些 div 元素会更改为绿色。之后，我们对 div 元素的其余部分调用 animate 函数。如果您现在点击 按钮，所有 div, les éléments devraient tous devenir verts.

Attribut différent du sélecteur ([attr!="value"])

Les sélecteurs d'attributs universels détectent généralement si un attribut avec un nom ou une valeur donnée existe. D'un autre côté, [attr!="value"] 选择器将选择所有不具有指定属性或该属性存在但不等于特定值的元素。它相当于 :not([attr="value"])。与 [attr="value"] 不同，[attr!="value"] 不是 CSS 规范的一部分。因此，使用 $("css-selector").not("[attr='value']") peut améliorer les performances des navigateurs modernes.

L'extrait de code ci-dessous sera mismatch 类添加到所有 li 元素，其 data-category 属性不等于 css Ceci est utile lors du débogage ou de la définition de la valeur de propriété correcte à l'aide de JavaScript.

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

Dans la démo, j'ai vérifié les deux listes et corrigé la valeur de l'attributcategory de l'élément.

Contient le sélecteur (:contains(text))

Ce sélecteur est utilisé pour sélectionner tous les éléments contenant la chaîne spécifiée. La chaîne de correspondance peut être située directement à l'intérieur de l'élément concerné ou dans l'un de ses descendants.

L'exemple ci-dessous devrait vous aider à mieux comprendre ce sélecteur. Nous ajouterons un fond jaune à toutes les occurrences de l’expression Lorem Ipsum.

Commençons par les balises :

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

Observez que l’expression Lorem Ipsum apparaît à sept endroits différents. J'utilise intentionnellement des petites majuscules dans un cas pour indiquer que la correspondance est sensible à la casse.

Voici le code JavaScript qui met en évidence toutes les correspondances :

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

Les guillemets autour des chaînes sont facultatifs. Cela signifie que le texte à l’intérieur des éléments $("section:contains('Lorem Ipsum')") 和 $("section:contains(Lorem Ipsum)") 均有效在上面的代码片段中。我仅针对部分元素，因此列表元素内的 Lorem Ipsum 文本应保持不变。此外，由于大小写不匹配，第二个 section ne doit pas non plus être mis en surbrillance. Comme vous pouvez le voir dans cette démo, c'est exactement ce qui se passe.

有选择器 (:has(selector))

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

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

这是演示的标记：

<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 上查看此代码的实时版本。

基于索引的选择器

除了像 :nth-child() 这样的 CSS 选择器之外，jQuery 也有自己的一组基于索引的选择器。这些选择器是 :eq(index)、:lt(index) 和 :gt(index)。与基于 CSS 的选择器不同，这些选择器使用从零开始的索引。这意味着 :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 将选择所有类型为 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 选择所有文本输入，然后使用 length 方法来计算它们的数量。在第三条语句中，我使用前面讨论的 :eq() 选择器来访问第一个元素，然后设置其值。

请记住，从 jQuery 1.5.2 开始，对于未指定任何 type 属性的元素，: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 时可能遇到的不常见选择器。虽然大多数选择器都有可供您使用的替代方案，但了解这些选择器的存在仍然是件好事。

我希望您在本教程中学到了一些新东西。如果您有任何问题或建议，请评论。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!