jQuery * セレクタ

jQuery セレクタ：DOM 要素を正確に指定する強力なツール

説明: jQuery セレクタについて深く理解し、その強力な要素選択能力を習得することで、HTML ドキュメントを容易に操作できるようになります。この記事では、基本セレクタ、階層セレクタ、フィルタセレクタ、フォームセレクタなど、さまざまなセレクタの種類について詳しく説明し、豊富なコード例を示して、jQuery セレクタの使用方法をすばやく習得できるようにします。

一、jQuery セレクタの概要

jQuery セレクタとは？

  • CSS セレクタの構文に基づいて、HTML 要素をすばやく検索および操作するために使用されます。

  • jQuery の中核部分を構成し、DOM 要素を操作するための基礎となります。

二、基本セレクタ

セレクタ 説明 例
タグセレクタ $("tagName") 指定されたタグ名に一致するすべての要素を選択します。 $("div") は、すべての div 要素を選択します。
ID セレクタ $("#elementId") 指定された ID 属性値に一致する一意の要素を選択します。 $("#header") は、ID が "header" の要素を選択します。
クラスセレクタ $(".className") 指定されたクラス名に一致するすべての要素を選択します。 $(".active") は、クラス名が "active" のすべての要素を選択します。
汎用セレクタ $("*") ページ上のすべての要素を選択します。  
複数要素セレクタ $("selector1, selector2, ...") コンマで区切って複数のセレクタを指定し、すべての一致するセレクタの結果を選択します。 $("div, p, .highlight")

三、階層セレクタ

セレクタ 説明 例
子孫セレクタ $("ancestor descendant") 指定された祖先要素内のすべての子孫要素を選択します。 $("div p") は、すべての div 要素内の p 要素を選択します。
子要素セレクタ $("parent > child") 指定された親要素の直接の子要素を選択します。 $("#menu > li") は、ID が "menu" の要素の直接の子要素である li を選択します。
隣接兄弟セレクタ $("prev + next") 指定された要素の直後に続く兄弟要素を選択します。 $("h2 + p") は、すべての h2 要素の直後に続く p 要素を選択します。
汎用兄弟セレクタ $("prev ~ siblings") 指定された要素の後にあるすべての兄弟要素を選択します。 $("dt ~ dd") は、すべての dt 要素の後にある dd 兄弟要素を選択します。

四、フィルタセレクタ

1. 基本フィルタセレクタ:

  • :first, :last, :not(selector), :even, :odd, :eq(index), :gt(index), :lt(index) など

  • 要素の位置、インデックスなどの条件に基づいてフィルタリングします。例：$("li:first") は、最初の li 要素を選択します。

2. コンテンツフィルタセレクタ:

  • :contains(text), :empty, :has(selector)

  • 要素のテキストコンテンツに基づいてフィルタリングします。例：$("p:contains('jQuery')") は、テキスト "jQuery" を含む p 要素を選択します。

3. 可視性フィルタセレクタ:

  • :visible, :hidden

  • 要素の可視性に基づいてフィルタリングします。例：$("div:visible") は、すべての表示されている div 要素を選択します。

4. 属性フィルタセレクタ:

  • [attribute], [attribute=value], [attribute!=value], [attribute^=value], [attribute$=value], [attribute*=value]

  • 要素の属性に基づいてフィルタリングします。例：$("a[href]") は、"href" 属性を持つすべての a 要素を選択します。

五、フォームセレクタ

セレクタ 説明
:input すべての <input>, <textarea>, <select> および <button> 要素を選択します。
:text すべてのテキストフィールド (<input type="text">) を選択します。
:password すべてのパスワードフィールド (<input type="password">) を選択します。
:radio すべてのラジオボタン (<input type="radio">) を選択します。
:checkbox すべてのチェックボックス (<input type="checkbox">) を選択します。
:submit すべての送信ボタン (<input type="submit"> や <button type="submit">) を選択します。
:image すべての画像ボタン (<input type="image">) を選択します。
:reset すべてのリセットボタン (<input type="reset">) を選択します。
:button すべてのボタン (<button>) を選択します。
:file すべてのファイル選択フィールド (<input type="file">) を選択します。
:enabled 有効なフォーム要素を選択します。
:disabled 無効なフォーム要素を選択します。
:checked チェックされているラジオボタンやチェックボックスを選択します。
:selected 選択されている <option> 要素を選択します。

六、jQuery セレクタを使いこなす

jQuery セレクタは、その柔軟性と強力な表現力により、複雑なDOM構造から目的の要素を正確に選択することができます。 上記のセレクタを組み合わせることで、さらに複雑な条件で要素を選択することも可能です。

例:

  • $("#menu li:nth-child(2) a"): ID が "menu" の要素内の2番目の <li> 要素内にある <a> 要素を選択します。

  • $("div.container:visible:not(.hidden)"): 表示されていて、クラス名が "hidden" でない、クラス名が "container" の <div> 要素を選択します。

jQuery セレクタをマスターすることで、JavaScriptによるDOM操作をより効率的に行い、動的なWebページを簡単に作成することができます。