以下に、jQueryセレクタの指定方法を表形式でまとめました。
補足がある方を遠慮せずコメントをいただければ幸いです。
以下は、jQueryによるカスタムセレクタかどうかを示す列を追加した表です。
| カテゴリ | セレクタ例 | 説明 | 例 | jQueryカスタムセレクタ |
|---|---|---|---|---|
| IDセレクタ | $("#id") |
特定のIDを持つ要素を選択 |
$("#header").hide(); IDがheaderの要素を非表示に |
❌ |
| クラスセレクタ | $(".class") |
特定のクラスを持つ要素を選択 |
$(".active").addClass("highlight"); クラスがactiveにhighlight追加 |
❌ |
| タグセレクタ | $("tag") |
特定のタグ名の要素を選択 |
$("p").css("color", "blue"); 全ての<p>タグを青に |
❌ |
| グループセレクタ | $("a, p, div") |
複数のタグやセレクタを同時に選択 |
$("*").hide(); 全ての要素を非表示 |
❌ |
| 子孫セレクタ | $("#id tag") |
特定の親子関係にある要素を選択 |
$("#menu li").css("color", "red"); IDmenuの子<li>を赤に |
❌ |
| 直接の子セレクタ | $("#id > tag") |
親の直接の子要素を選択 |
$("#list > li").css("font-size", "20px"); 直下の<li>を拡大 |
❌ |
| 兄弟セレクタ | $("#id + tag") |
指定要素の直後の兄弟要素を選択 |
$("#item1 + p").css("color", "green"); #item1の直後の<p>を緑に |
❌ |
$("#id ~ tag") |
指定要素の後に続く兄弟要素を全て選択 |
$("#item ~ li").addClass("bg-red"); #item以降の<li>を装飾 |
❌ | |
| 属性セレクタ | $("[attr]") |
属性を持つ要素を選択 |
$("[disabled]").hide(); 無効化された要素を非表示 |
❌ |
$("[attr='value']") |
属性の値が一致する要素を選択 |
$("[type='checkbox']").prop("checked", true); チェックボックスを選択 |
❌ | |
$("[attr^='value']") |
属性が指定値で始まる要素を選択 |
$("[href^='http']").css("color", "blue"); httpで始まるリンクを青に |
❌ | |
$("[attr$='value']") |
属性が指定値で終わる要素を選択 |
$("[src$='.png']").hide(); PNG画像を非表示 |
❌ | |
$("[attr*='value']") |
属性が指定値を含む要素を選択 |
$("[title*='sample']").css("border", "1px solid red"); タイトルがsampleを含む要素に赤枠 |
❌ | |
| フォーム関連 | :input |
全ての入力要素を選択 |
$(":input").val(""); 全入力フォームをリセット |
✅ |
:text |
テキストボックスを選択 |
$(":text").addClass("highlight"); テキスト入力を強調表示 |
✅ | |
:radio |
ラジオボタンを選択 |
$(":radio").prop("checked", true); 全てのラジオボタンを選択 |
✅ | |
:checkbox |
チェックボックスを選択 |
$(":checkbox:checked").css("color", "green"); チェックされたものを緑に |
✅ | |
:submit |
送信ボタンを選択 |
$(":submit").attr("disabled", true); 送信ボタンを無効化 |
✅ | |
:button |
ボタンを選択 |
$(":button").css("background", "yellow"); ボタンを黄色に |
✅ | |
| 状態セレクタ | :first |
最初の要素を選択 |
$("ul li:first").css("color", "red"); 最初の<li>を赤に |
✅ |
:last |
最後の要素を選択 |
$("ul li:last").css("color", "blue"); 最後の<li>を青に |
✅ | |
:even |
偶数番目の要素を選択 |
$("tr:even").css("background", "#f2f2f2"); 偶数行の背景色を変更 |
✅ | |
:odd |
奇数番目の要素を選択 |
$("tr:odd").css("background", "#ddd"); 奇数行の背景色を変更 |
✅ | |
:eq(index) |
指定したインデックスの要素を選択 |
$("li:eq(2)").css("color", "orange"); 3番目の<li>をオレンジに |
✅ | |
:gt(index) |
指定インデックスより後の要素を選択 |
$("li:gt(1)").hide(); 2番目以降の<li>を非表示 |
✅ | |
:lt(index) |
指定インデックスより前の要素を選択 |
$("li:lt(2)").css("font-weight", "bold"); 最初の2つを太字に |
✅ | |
| コンテンツ系 | :contains("text") |
指定テキストを含む要素を選択 |
$(":contains('重要')").css("color", "red"); 重要を含む要素を赤に |
✅ |
:empty |
子要素を持たない要素を選択 |
$(":empty").remove(); 空の要素を削除 |
✅ | |
:has(selector) |
子要素に指定のセレクタを持つものを選択 |
$(":has('img')").css("border", "1px solid green"); 画像を含む要素に枠線 |
✅ | |
:parent |
子要素を持つ要素を選択 |
$(":parent").css("background", "lightgrey"); 子要素があるものを灰色に |
✅ |
説明
- ✅（カスタムセレクタ）: jQueryが提供する独自のセレクタ。
- ❌（標準セレクタ）: CSSの標準セレクタ（ブラウザでもサポートされているもの）。
カスタムセレクタの補足
カスタムセレクタとは？
jQueryが標準で提供しているセレクタに加え、独自に条件を定義して利用できるセレクタです。以下のように作成します。
// カスタムセレクタの定義
$.expr.pseudos.customSelector = function(elem) {
return $(elem).hasClass('custom-class'); // 例: 'custom-class' を持つ要素
};
これにより、div:customSelector のようにセレクタを使って要素を選択できます。