jQueryセレクターの包括的な見方

この記事は、Matt SmithとTim Severienによるピアレビューの恩恵を受けました。 コンテンツの品質を向上させてくれたSitePointのピアレビュアーに感謝します！ 要素の選択は、jQueryを使用してWebページを操作するための基本です。 コンテンツの変更、イベントの添付、その他のアクションの実行など、最初に適切な要素をターゲットにする必要があります。 このチュートリアルでは、ライブラリの重要なコンポーネントであるjQueryセレクターを探索します。

重要な概念

jQueryセレクターは、コンテンツの操作、イベントの添付ファイルなどのWebページ要素をターゲットにするために不可欠です。 これらのセレクターは、ID、クラス、属性、その組み合わせなどの基準を利用しています。

jQueryは、基本、インデックスベース、子、属性、コンテンツ、階層、フォーム、視認性セレクターなど、幅広いセレクターを提供します。各タイプは、特定の条件とパラメーターに基づいてユニークな選択機能を提供します。 JQuery 3の

拡張により、
• や
などのカスタムセレクターの速度が大幅に向上しました（場合によっては最大17倍高速）。 視認性は、
• 。
からのレイアウトボックスの存在によって決定されます。
• 選択した要素のキャッシュは、特に多数のセレクターを使用すると、パフォーマンスを高めます。 変数に選択を保存すると、冗長なDOMスキャンが減少します :visible多くのjQueryセレクターはCSSセレクターを反映していますが、jQueryには、より簡潔で効率的な要素選択のための独自のカスタムセレクターも含まれています。 :hidden getClientRects
jQueryセレクターは詳細に
• jQueryセレクターは、主にID、クラス、属性、組み合わせなどの基準に基づいて要素を識別します。 多くはCSSセレクターに基づいていますが、jQueryはカスタムセレクターで機能を拡張します。
基本的なセレクター

ID（）、class（）、またはタグ名（

）で要素を選択します。 これらを組み合わせるか（例：

）、コンマで区切られた複数のセレクターを使用します（例：

）。

追加の基本セレクター：

$("#id")$(".class")：すべての見出しを選択します（$("li")から$(".class tag")）。 各見出しタグを個別にリストするよりも簡潔です。$("selectorA, selectorB, selectorC")

：IDがURLフラグメント識別子と一致する要素を選択します（例えば、

）。

• ：現在アニメーションを受けている要素を選択します（jQuery効果モジュールが必要です）。 :header <h1></h1>インデックスベースのセレクター<h6></h6>
jQueryはゼロベースのインデックスセレクターを提供します：
• • :eq(n)：インデックスで要素を選択しますn（正と負の指標をサポートします）。
  • ：インデックスが少ない:lt(n)。nを持つ要素を選択します
  • ：:gt(n)。n。
  • ：最初の一致した要素を選択します。:first
  • ：最後の一致した要素を選択します。:last
  • ：均一なインデックス（0、2、4 ...）を持つ要素を選択します :even
  ：奇妙なインデックス（1、3、5 ...）を持つ要素を選択します。
  • :odd
  インデックスベースのセレクターを紹介するインタラクティブなデモ

  子セレクター

  これらのセレクターは、インデックスまたはタイプに基づいて子供をターゲットにします：

  ：各親の最初の子を選択します。
  • :first-child
  ：そのタイプの最初の兄弟を選択します。
  • :first-of-type
  ：各親の最後の子を選択します。
  • :last-child
  ：そのタイプの最後の兄弟を選択します。
  • :last-of-type
  ：n番目の子供を選択します（数字、
  • 、:nth-child(n)、式などのさまざまな式をサポートします）。 evenodd：
  に似ていますが、最後の子供からカウントされます。
  • :nth-last-child(n)：そのタイプのnth兄弟を選択します。:nth-child
  • ：:nth-of-type(n)に似ていますが、最後の兄弟からカウントされます。
  • ：親の唯一の子である要素を選択します。:nth-last-of-type(n) :nth-of-type
  ：同じタイプの兄弟がない要素を選択します。
  • :only-child
  子どもセレクターを紹介するインタラクティブなデモ
  • :only-of-type
  属性セレクター

  属性値に基づいて要素を選択します：

  ：正確な属性値を持つ要素を選択します。

  ：属性値が「値」から始まる要素を選択します。
  • [attribute="value"]：属性値が「値」で終了する要素を選択します。
  • [attribute^="value"]：属性値に「値」が含まれている要素を選択します。
  • [attribute$="value"]：属性値が「値」に等しいか、それに続くハイフンが続く要素を選択します。
  • ：属性値に「値」がスペース分離の単語として含まれる要素を選択します。 [attribute*="value"]
  ：属性のないまたは異なる値で要素を選択します。
  • [attribute|="value"]
  ：値に関係なく、指定された属性を持つ要素を選択します。
  • [attribute~="value"]コンテンツセレクター
  • これらのセレクターは、コンテンツに基づいて要素をターゲットにします
    • :contains(text)：指定されたテキスト（ケースセンシティブ）を含む要素を選択します。
    • :has(selector)：提供されたセレクターに一致する少なくとも1つの要素を含む要素を選択します。
    • ：子供がいない要素を選択します。:empty
    • ：少なくとも1人の子供を持つ要素を選択します。:parent
    階層セレクター
    これらのセレクターは、DOM階層を使用しています：
    • ：先祖要素のすべての子孫を選択します。ancestor descendant
    • ：親要素の直接の子供を選択します。parent > child
    • ：prev next要素の次の兄弟を選択します。prev
    • ：prev ~ siblings要素のすべての後続の兄弟を選択します prev
    フォームセレクター
    フォーム要素のための

    単純化されたセレクター：

    ：ボタン要素を選択します。
    • :button
    ：チェックボックス要素を選択します
    • :checkbox：ラジオボタン要素を選択します
    • ：テキスト入力要素を選択します。:radio
    • ：パスワード入力要素を選択します。:text
    • ：[ボタン要素を送信]:passwordを選択します
    • ：[リセット]ボタン要素を選択します。:submit
    • ：画像ボタン要素を選択します :reset
    ：ファイル入力要素を選択します
    • :image：非表示のフォーム要素を選択します。
    • :file：[有効なフォーム要素]を選択します。
    • :hidden：無効なフォーム要素を選択します
    • ：チェックボタンとラジオボタン、および選択したオプションを選択します。 :enabled
    ：選択したオプションを
    • 要素で選択します。:disabled
    • 可視性セレクター:checked
    • :selected：目に見える要素を選択します。<select></select>
    ：非表示の要素を選択します。
    • jQuery 3変更:visible
    • jQuery 3は、:hiddenおよび
    のパフォーマンスの改善を導入し、可視性の定義を改良しました。 無効なセレクターのエラー処理も強化されました パフォーマンスのためのキャッシュ

    キャッシング

    選択した要素をキャッシュすると、繰り返されるDOMスキャンを回避することでパフォーマンスが向上します。 再利用のための変数に選択を保存します。

    :visible:hidden結論

    このチュートリアルは、jQueryセレクターを包括的にカバーしています。最適なパフォーマンスのためにキャッシュを使用することを忘れないでください。 これらのセレクターを理解することは、効果的なjQuery開発に不可欠です よくある質問（FAQ）

    元の入力からのFAQSセクションは、すでに十分に構造化されており、包括的です。 おそらく、フローと明確さを改善するための小さな言葉遣いの調整でそれを保持することをお勧めします。

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