jQuery フィルターの包括的な説明: どの要素がフィルターされるかを確認する

jQuery は、Web 開発で広く使用されている人気のある JavaScript ライブラリです。 jQuery では、フィルターは非常に一般的に使用される関数であり、開発者がセレクターを通じて操作する必要がある要素をフィルターで除外するのに役立ち、それによってページ要素の効果的な制御を実現できます。この記事では、jQuery のフィルター機能を包括的に説明します。主に、どの要素がフィルターされるかを調べるフィルターの使用方法を紹介し、具体的なコード例を示します。

1. 基本フィルター

1. :first フィルター

まず、よく使用されるフィルター:first を紹介します。このフィルターは、一致する最初の要素を選択します。具体的な使用法は次のとおりです。

$("p:first").css("background-color", "yellow");

上記のコードは、ページ上のすべての段落要素 (

) を選択し、最初の段落要素の背景色を黄色に設定します。

2. :last フィルター

:first とは対照的に、:last フィルターは、一致する要素の中から最後の要素を選択するために使用されます。サンプル コードは次のとおりです。

$("p:last").css("color", "red");

このコードは、ページ上のすべての段落要素を選択し、最後の段落要素のテキストの色を赤に設定します。

3. :even フィルターと :odd フィルター

:even フィルターと :odd フィルターは、一致する要素の偶数位置と奇数位置にある要素をそれぞれ選択するために使用されます。例:

$("tr:even").css("background-color", "#f2f2f2");
$("tr:odd").css("background-color", "#e6e6e6");

上記のコードは、テーブルの偶数行と奇数行に異なる背景色を設定します。

2. コンテンツ フィルター

4. :contains filter

:contains フィルターは、要素に含まれるテキスト コンテンツに基づいて要素をフィルターできます。例:

$("p:contains('jQuery')").css("font-weight", "bold");

このコードは、「jQuery」テキストを含む段落要素を選択し、そのテキストを太字にします。

5. :empty フィルターと :not フィルター

:empty フィルターは子要素を持たない要素を選択するために使用され、:not フィルターは子要素の一致を除外するために使用されます。指定されたセレクター要素。例:

$("div:empty").text("这个元素没有内容");
$("p:not(.intro)").css("color", "blue");

コードの最初の部分は、ページ上で子要素を持たないすべての

$("div:parent").css("border", "1px solid black");
$("ul:has(li.active)").css("background-color", "lightgrey");