この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:3
ページ更新者:atom
更新日時:2026-05-13 08:20:23

タイトル: セレクタ

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

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

本ページの子ページ

セレクタの基本構文

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

主なセレクタ一覧

分類記法意味
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 で済むことも多い

関連