めったに使用されない jQuery セレクター

セレクターは非常に重要です。ほとんどの jQuery メソッドが機能するには、何らかの要素の選択が必要です。たとえば、click イベントをボタンにアタッチするには、最初にボタンを選択する必要があります。

一般的な jQuery セレクターは既存の CSS セレクターに基づいているため、おそらくよくご存じでしょう。ただし、あまり広く使用されていないセレクターがいくつかあります。このチュートリアルでは、これらのあまり知られていないが重要なセレクターに焦点を当てます。

すべてのセレクター (*)

このセレクターは、ドキュメント内のすべての要素を選択するため、正しくはユニバーサル セレクターと呼ばれます。 、、<script></script> または <link> ラベル。このデモは私の主張を説明するものです。

リーリー

このセレクターを他の要素と組み合わせて使用​​すると、非常に遅くなる可能性があります。ただし、それはすべてセレクターの使用方法と、セレクターが実行されるブラウザーによって異なります。 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 関数を呼び出します。ここで button をクリックすると、すべての div 要素が緑色に変わるはずです。

属性がセレクター ([attr!="value"]) と等しくありません

ユニバーサル属性セレクターは通常、指定された名前または値を持つ属性が存在するかどうかを検出します。一方、[attr!="value"] セレクターは、指定された属性を持たない要素、またはその属性は存在するが特定の値に等しくないすべての要素を選択します。これは :not([attr="value"]) と同等です。 [attr="value"] とは異なり、[attr!="value"] は CSS 仕様の一部ではありません。したがって、$("css-selector").not("[attr='value']") を使用すると、最新のブラウザーでのパフォーマンスを向上させることができます。

次のコード スニペットは、data-category 属性が css と等しくないすべての li 要素に mismatch クラスを追加します。これは、JavaScript を使用してデバッグまたは正しいプロパティ値を設定する場合に役立ちます。

リーリー

デモでは、両方のリストを確認し、要素の category 属性の値を修正しました。

含まれるセレクター (:contains(text))

このセレクターは、指定された文字列を含むすべての要素を選択するために使用されます。一致文字列は、関連する要素内に直接配置することも、その子孫のいずれかに配置することもできます。

以下の例は、このセレクターをよりよく理解するのに役立ちます。 「Lorem Ipsum」というフレーズが出現するすべてに黄色の背景を追加します。

タグから始めましょう:

リーリー

Lorem Ipsum というフレーズが 7 つの異なる場所に出現することに注目してください。あるインスタンスでは、一致において大文字と小文字が区別されることを示すために、意図的に小文字を使用しています。

これは、すべての一致を強調表示する JavaScript コードです:

リーリー

文字列の前後の引用符はオプションです。これは、上記のスニペットでは $("section:contains('Lorem Ipsum')") と $("section:contains(Lorem Ipsum)") が両方とも有効であることを意味します。一部の要素のみをターゲットにしているため、リスト要素内の Lorem Ipsum テキストは変更されないはずです。さらに、2 番目の section 要素内のテキストは、大文字と小文字が一致しないため強調表示しないでください。このデモでわかるように、まさにそれが起こっているのです。

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

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

以上がめったに使用されない jQuery セレクターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。