本稿は jQuery のセレクタに関する記事です。jQuery において、操作対象の要素を選ぶ記述を一般に「セレクタ」と呼びます。id セレクタ・class セレクタ・要素セレクタ・子孫セレクタなどがあり、CSS のセレクタ構文がほぼそのまま使えます。

子ページから個別のセレクタを選択してください。

本ページの子ページ

• id セレクタ — $("#myId")
• class セレクタ — $(".myClass")
• 要素セレクタ — $("p")
• 子孫セレクタ — $("ul li")

セレクタの基本構文

$("セレクタ")         // 要素を選ぶ $("セレクタ").メソッド()  // 選んだ要素を操作

主なセレクタ一覧

分類	記法	意味
id	$("#header")	id 属性が header の要素
class	$(".btn")	class に btn を含む要素すべて
要素 (タグ)	$("p")	<p> 要素すべて
全要素	$("*")	全要素 (重い処理のため避けるのが無難)
複数 (グルーピング)	$("h1, h2, p")	カンマで OR
子孫	$("ul li")	ul の中にあるすべての li
子	$("ul > li")	ul の直下の li のみ
隣接	$("h2 + p")	h2 の直後にある p
同階層以降	$("h2 ~ p")	h2 以降の兄弟 p
属性	$("input[type='text']")	属性条件
部分一致 (属性)	$("a[href*='example']")	属性値の部分一致
:first / :last	$("li:first")	最初／最後の一致要素
:eq(n)	$("li:eq(2)")	0 始まりの n 番目
:not()	$("li:not(.active)")	除外
:contains()	$("p:contains('PHP')")	テキスト含む
:has()	$("li:has(a)")	子に a を持つ
:visible / :hidden	$(".menu:visible")	表示／非表示
:checked	$("input:checked")	チェック済み

使い分けの目安

• id セレクタ — ページ内で一意の要素を即座に取得。最速
• class セレクタ — 複数要素をまとめて操作する標準的な選び方
• 要素セレクタ — $("a") など大雑把な範囲指定
• 子孫／子セレクタ — 範囲を限定し、ページ全体スキャンを避ける
• 属性セレクタ — input[name="email"] のように厳密に絞り込みたいとき

パフォーマンス上のポイント

• $("*") や $(":visible") などは全要素走査になる。範囲を限定する
• セレクタは右から評価される。$(".list .item") は「全 .item を集めてから .list の中か判定」
• 頻繁に使う集合はキャッシュ: const $items = $(".item");
• ループ内で同じセレクタを毎回 $(...) しない
• 絞れるなら $(".item", container) のようにコンテキストを渡す

注意点

• HTML5 では id 値の重複は禁止。id セレクタは1要素を前提に
• 動的に追加された要素は事後にバインドが必要。$(document).on("click", ".btn", ...) のような委任イベントを使う
• 新規プロジェクトでは jQuery を入れず、標準 querySelector / querySelectorAll で済むことも多い

関連

• 親カテゴリ: 文法 (jQuery)
• 子ページ: id セレクタ / class セレクタ / 要素セレクタ / 子孫セレクタ
• jQuery本体: jQuery