jQuery フィルターの秘密を探ります: どのような機能が含まれているかを明らかにします

jQuery は、DOM 操作とイベント処理を簡素化するために使用される人気のある JavaScript ライブラリです。 jQuery では、フィルターは、開発者が操作する必要があるページ上の要素を正確に選択するのに役立つ強力なツールです。この記事では、jQuery フィルターの謎を探り、そこに含まれる機能を明らかにし、具体的なコード例を示します。

1. 基本フィルター

1. :first: 最初に一致する要素を選択します

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

   ログイン後にコピー

2. :last: 最後に一致した要素を選択します

   $("p:last").css("font-weight", "bold");

   ログイン後にコピー

3. :even / :odd: 偶数または奇数の位置にある要素を選択します

   $("tr:even").css("background-color", "lightgray");
   $("tr:odd").css("background-color", "lightblue");

   ログイン後にコピー

4. :eq(): 指定されたインデックス位置にある要素を選択します

   $("li:eq(2)").css("text-decoration", "underline");

   ログイン後にコピー

5. :gt() / :lt(): 指定されたインデックス位置

   #

   $("div:gt(3)").hide();
   $("div:lt(2)").show();

   ログイン後にコピー

2 より大きいまたは小さい要素を選択します。コンテンツ フィルター

1. # :contains(): 指定されたテキストを含む要素を選択します

   $("div:contains('jQuery')").css("color", "green");

   ログイン後にコピー

2. :empty: 子要素を持たない要素を選択します

   $("p:empty").text("这是一个空段落");

   ログイン後にコピー

3. :has(): 特定のサブ要素を含む要素を選択します

   $("ul:has(li)").css("border", "1px solid black");

   ログイン後にコピー

3. 可視性フィルター

1. :visible / :hidden: 表示または非表示の要素を選択します

   $("div:hidden").show();
   $("div:visible").hide();

   ログイン後にコピー

2. :animated: 現在実行中のアニメーションを選択します効果要素

   $("div:animated").stop();

   ログイン後にコピー

4. 属性フィルター

1. ##[属性]: 指定された属性を持つ要素を選択

   $("[href]").css("color", "blue");

   ログイン後にコピー

2. #[attribute=value]

   : 属性値が指定された値と等しい要素を選択します

   $("[type='text']").css("border", "1px solid gray");

   ログイン後にコピー

#[attribute! = value]
3. : 属性値が指定した値と等しくない要素を選択

   $("[href!='#']").css("text-decoration", "underline");

   ログイン後にコピー
   これらのさまざまな種類のフィルターを使用することで、開発者はページ上の要素をより柔軟に操作できます。多彩なダイナミックエフェクトやインタラクティブ機能を搭載。 jQuery フィルターの強力な機能と簡潔な構文は人気の理由の 1 つであり、開発者に大きな利便性と効率性を提供します。

以上がjQuery フィルターの秘密を探ります: どのような機能が含まれているかを明らかにしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。