Pemilih jQuery yang Jarang Digunakan

Pemilih adalah penting. Kebanyakan kaedah jQuery memerlukan beberapa jenis pemilihan elemen untuk berfungsi. Contohnya, melampirkan acara klik pada butang memerlukan anda memilih butang itu terlebih dahulu. click 事件附加到按钮需要您首先选择该按钮。

由于常见的 jQuery 选择器基于现有的 CSS 选择器，因此您可能非常熟悉它们。然而，也有一些选择器没有被广泛使用。在本教程中，我将重点关注这些鲜为人知但重要的选择器。

所有选择器 (*)

这个选择器被正确地称为通用选择器，因为它选择文档中的所有元素，包括 93f0f5c25f18dab9d176bd4f6de5d30e, 6c04bd5ca3fcae76e30b72ad730ca86d, 3f1c4e4b6b16bbbd69b2ee476dc4f83a 或 2cdf5bf648cf2f33323966d7f58a7f3f 标签。这个演示应该可以说明我的观点。

$("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 事件检测动画何时结束。

观看以下演示。

在上面的演示中，在执行 $(":animated").css("background","#6F9") 之前，仅对奇数 <code class="inline">div 元素进行动画处理;.因此，只有那些 div 元素会更改为绿色。之后，我们对 div 元素的其余部分调用 animate 函数。如果您现在点击 按钮，所有 div 元素都应该变成绿色。

属性不等于选择器（[attr!="value"]）

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

下面的代码片段将 mismatch 类添加到所有 li 元素，其 data-category 属性不等于 css.这在调试或使用 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
});

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

包含选择器（: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)") 均有效在上面的代码片段中。我仅针对部分元素，因此列表元素内的 Lorem Ipsum 文本应保持不变。此外，由于大小写不匹配，第二个 section

Memandangkan pemilih jQuery biasa adalah berdasarkan pemilih CSS sedia ada, anda mungkin sudah biasa dengan mereka. Walau bagaimanapun, terdapat beberapa pemilih yang tidak digunakan secara meluas. Dalam tutorial ini, saya akan menumpukan pada pemilih yang kurang dikenali tetapi penting ini. 🎜

Semua pemilih (*)

🎜Pemilih ini betul-betul dipanggil pemilih universal kerana ia memilih semua elemen dalam dokumen, termasuk 93f0f5c25f18dab9d176bd4f6de5d30e, 6c04bd5ca3fcae76e30b72ad730ca86d, 3f1c4e4b6b16bbbd69b2ee476dc4f83a atau 2cdf5bf648cf2f33323966d7f58a7f3f Label. Demo ini sepatutnya menggambarkan maksud saya. 🎜

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

🎜Pemilih ini boleh menjadi sangat perlahan jika digunakan dalam kombinasi dengan elemen lain. Walau bagaimanapun, semuanya bergantung pada cara pemilih digunakan dan dalam pelayar mana ia dilaksanakan. Dalam Firefox, $("#selector > *").find("li") adalah lebih perlahan daripada $("#selector > ul" ).find("li"). Menariknya, Chrome melaksanakan $("#selector > *").find("li") lebih pantas sedikit. Semua penyemak imbas melaksanakan $("#selector *").find("li") lebih pantas daripada $("#selector ul" ).find ("li" perlahan). Saya syorkan anda membandingkan prestasi sebelum menggunakan pemilih ini. 🎜🎜🎜 🎜Berikut ialah demo membandingkan kelajuan pelaksanaan semua pemilih. 🎜

Pemilih animasi (:animasi)

🎜Anda boleh menggunakan pemilih :animated untuk memilih semua elemen yang animasinya masih dalam proses semasa pemilih ini berjalan. Satu-satunya masalah ialah ia hanya akan memilih elemen yang dianimasikan menggunakan jQuery. Pemilih ini ialah sambungan jQuery dan tidak mendapat manfaat daripada peningkatan prestasi kaedah querySelectorAll() asli. 🎜 🎜Selain itu, anda tidak boleh mengesan animasi CSS menggunakan jQuery. Walau bagaimanapun, anda boleh menggunakan acara animationend untuk mengesan apabila animasi tamat. 🎜 🎜Tonton demo di bawah. 🎜 🎜Dalam demo di atas, sebelum melaksanakan $(":animated").css("background","#6F9") , hanya <code class="inline">div yang ganjil ialah kod> elemen dianimasikan; Oleh itu, hanya elemen div tersebut akan bertukar kepada hijau. Selepas itu, kami memanggil fungsi animasi pada elemen div yang lain. Jika anda kini mengklik butang , semua elemen div hendaklah bertukar menjadi hijau. 🎜

Atribut tidak sama dengan pemilih ([attr!="value"])

🎜Pemilih atribut universal biasanya mengesan sama ada atribut dengan nama atau nilai tertentu wujud. Sebaliknya, pemilih [attr!="value"] akan memilih semua elemen yang tidak mempunyai atribut yang ditentukan atau atribut itu wujud tetapi tidak sama dengan nilai tertentu . Ia bersamaan dengan :not([attr="value"]). Tidak seperti [attr="value"], [attr!="value"] bukan sebahagian daripada spesifikasi CSS. Oleh itu, menggunakan $("css-selector").not("[attr='value']") boleh meningkatkan prestasi dalam penyemak imbas moden. 🎜 🎜Coretan kod di bawah menambahkan kelas mismatch kepada semua elemen li yang data-category sifat tidak sama dengan <code class="inline">css Ini berguna apabila menyahpepijat atau menggunakan JavaScript untuk menetapkan nilai sifat yang betul. 🎜

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

🎜Dalam demo, saya menyemak kedua-dua senarai dan membetulkan nilai atribut kategori elemen. 🎜

Mengandungi pemilih (:contains(text))

🎜Pemilih ini digunakan untuk memilih semua elemen yang mengandungi rentetan yang ditentukan. Rentetan padanan boleh terletak terus di dalam elemen yang berkaitan atau dalam mana-mana keturunannya. 🎜 🎜Contoh di bawah seharusnya membantu anda memahami pemilih ini dengan lebih baik. Kami akan menambah latar belakang kuning pada semua kemunculan frasa Lorem Ipsum. 🎜 🎜Mari mulakan dengan tag: 🎜

: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

🎜Perhatikan bahawa frasa Lorem Ipsum muncul di tujuh tempat yang berbeza. Saya sengaja menggunakan huruf kecil dalam satu contoh untuk menunjukkan bahawa padanan itu sensitif huruf besar-besaran. 🎜 🎜Berikut ialah kod JavaScript yang menyerlahkan semua padanan: 🎜

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

🎜Petikan sekitar rentetan adalah pilihan. Ini bermakna $("section:contains('Lorem Ipsum')") dan $("section:contains(Lorem Ipsum)") adalah sah dalam coretan kod di atas. Saya hanya menyasarkan beberapa elemen, jadi teks Lorem Ipsum dalam elemen senarai harus kekal tidak berubah. Selain itu, teks dalam elemen section kedua tidak boleh diserlahkan kerana ketidakpadanan kes. Seperti yang anda lihat dalam demo ini, itulah yang berlaku. 🎜

有选择器 (: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 时可能遇到的不常见选择器。虽然大多数选择器都有可供您使用的替代方案，但了解这些选择器的存在仍然是件好事。

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

Atas ialah kandungan terperinci Pemilih jQuery yang Jarang Digunakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!