jQuery フィルターの包括的な説明: どの要素がフィルターされるかを確認する-jsチュートリアル-php.cn

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

WBOY

リリース： 2024-02-27 13:54:03

オリジナル

544 人が閲覧しました

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

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

1. 基本フィルター

:first フィルター

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

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

ログイン後にコピー

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

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

:last フィルター

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

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

ログイン後にコピー

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

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

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

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

ログイン後にコピー

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

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

:contains filter

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

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

ログイン後にコピー

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

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

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

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

ログイン後にコピー

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

要素を選択し、そのテキストコンテンツを「この要素にはコンテンツがありません」に設定します。 2 番目のコードは、.intro 以外のクラスを持つすべての段落要素を選択し、そのテキストの色を青に設定します。

3. 関係フィルター

:parent および :has filter

:parent フィルターは、子要素を含む要素を選択するために使用されます。 has フィルターは、指定されたセレクターに一致する要素を含む要素を選択するために使用されます。サンプルコードは次のとおりです:

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

ログイン後にコピー

上記のコードは、子要素を含むすべての

要素を選択し、それらに黒い境界線を追加します。同時に、子要素を含むすべての

要素を選択します。 class active

上記の例を通して、Web 開発における jQuery フィルターの強力な機能がわかります。さまざまなフィルターを適切に使用することで、開発者は操作する必要がある要素を簡単に見つけて、それに応じて処理することができます。この記事での紹介が、読者の jQuery のフィルター機能の理解と応用に役立ち、Web ページ開発の効率が向上することを願っています。

以上がjQuery フィルターの包括的な説明: どの要素がフィルターされるかを確認するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。