タイトル: 要素セレクタ
SEOタイトル: jQuery 要素セレクタ完全ガイド
| この記事の要点 |
|
要素セレクタの基本
jQuery の要素セレクタ (タグ セレクタ) は、HTML のタグ名で要素を選択する最も基本的な記法です。CSS のセレクタ仕様にほぼ準拠しており、追加で jQuery 独自の擬似セレクタも使えます。
// 全ての 要素
$('p')
// 全ての
要素
$('div')
// 全てのリンク
$('a')
// すべての input
$('input')
// 複数指定 (カンマ区切り、OR 結合)
$('div, span, p')
// 否定
$('div:not(.special)')
結合子: 子孫 / 子 / 兄弟
結合子 意味 例 (半角スペース) 子孫 (任意の深さ) $('div p') = div の中の全 p>直下の子 $('ul > li') = ul の直接の子 li+隣接する次の兄弟 $('h2 + p') = h2 の直後の p~後続の全兄弟 $('h2 ~ p') = h2 以降の同階層 p
見出し1
段落A
段落B
- 項目1
- ネスト
$('#content p') // 段落A, B (子孫)
$('#content > p') // 段落A, B (直接の子)
$('h2 + p') // 段落A (隣接)
$('h2 ~ p') // 段落A, B (後続兄弟)
$('ul li') // 項目1, ネスト (子孫)
$('ul > li') // 項目1, ネスト (それぞれの ul の直接の子)
属性セレクタ
記法 意味 [attr]属性が存在 [attr=value]完全一致 [attr!=value]不一致 (jQuery 拡張) [attr^=value]前方一致 (starts with) [attr$=value]後方一致 (ends with) [attr*=value]部分一致 (contains) [attr~=value]空白区切り単語のいずれかと一致 [attr|=value]value または value- で始まる
// href 属性を持つ a
$('a[href]')
// type が text の input
$('input[type=text]')
$('input[type="text"]') // 引用符でも可
// http で始まる URL
$('a[href^="http"]')
// .pdf で終わるリンク
$('a[href$=".pdf"]')
// example.com を含むリンク
$('a[href*="example.com"]')
// 必須項目 (required 属性付き)
$('input[required]')
// data-* 属性
$('div[data-role="dialog"]')
クラス / ID との組み合わせ
// p で class が note
$('p.note')
// div の中の class が active な li
$('div li.active')
// 複数クラス (両方持つ要素)
$('button.btn.primary')
// id "main" の中の要素セレクタ
$('#main p')
// 要素 + ID は通常不要 (ID は一意)
$('#header') // 推奨
$('div#header') // 動くが冗長
位置指定の擬似セレクタ
jQuery 独自のフィルタです。CSS3 の :nth-child 等とは挙動が異なるので注意。
セレクタ 意味 :firstマッチした集合の最初 :lastマッチした集合の最後 :eq(n)0-indexed の n 番目 :gt(n)n より後 (0-indexed) :lt(n)n より前 (0-indexed) :even偶数番目 (0,2,4...) :odd奇数番目 (1,3,5...) :first-child各親の最初の子 (CSS 標準) :last-child各親の最後の子 (CSS 標準) :nth-child(n)各親の n 番目 (1-indexed!)
$('li:first') // 最初の li 1 個 (集合の中で)
$('li:first-child') // 各親で最初の子になっている li
$('tr:even') // 偶数行 (0-indexed なので見た目の奇数行)
$('p:eq(2)') // 3 番目 (0-indexed)
$('p:nth-child(2)') // 各親で 2 番目 (1-indexed)
コンテンツ / 状態の擬似セレクタ
// テキスト含有
$('p:contains("重要")')
// 空要素
$('div:empty')
// 子要素を持つ
$('div:parent')
// 表示中 / 非表示
$(':visible')
$(':hidden')
// フォーム入力系
$(':input') // input/select/textarea/button 全部
$(':text') // input[type=text]
$(':checkbox')
$(':radio')
$(':checked') // チェック済
$(':selected') // option の選択中
$(':disabled')
$(':enabled')
$(':focus')
セレクタとパフォーマンス
速度 セレクタ 備考 ★★★ 最速 $('#id')document.getElementById 直結 ★★ 速い $('tag')getElementsByTagName ★★ 速い $('.class')getElementsByClassName ★ 中 $('div.cls')querySelectorAll 遅い $('div:first') 等の jQuery 擬似jQuery 自前ループ 遅い 属性部分一致 [attr*=val] 全要素走査
CSS セレクタとの違い
- jQuery は CSS3 セレクタ + jQuery 独自拡張 (Sizzle)
:first / :eq / :contains 等は jQuery 独自で querySelectorAll では使えない:first-child / :nth-child は CSS 標準なので両方で使える
querySelectorAll での書き換え (脱 jQuery)
// jQuery
$('div.note')
$('input[type=text]')
$('ul > li:first-child')
// querySelectorAll (Vanilla JS)
document.querySelectorAll('div.note')
document.querySelectorAll('input[type=text]')
document.querySelectorAll('ul > li:first-child')
// 要素 1 個取得
document.querySelector('#main') // = $('#main')[0]
// jQuery 独自セレクタは querySelectorAll で動かない
$('p:contains("hi")') // OK
document.querySelectorAll('p:contains("hi")') // ❌ SyntaxError
// 代替
[...document.querySelectorAll('p')]
.filter(p => p.textContent.includes('hi'))
FAQ
Q: $('p').first() と $('p:first') はどちらが良い？
A: .first() 推奨。:first セレクタは jQuery 独自で、内部処理が遅め。可読性とパフォーマンスの両面で .first() が良いです。
Q: :eq(0) と :first-child の違い
A: 全く違います。$('li:eq(0)') は集合全体の最初の 1 個、$('li:first-child') は各親で最初の子になっている li 全部 (複数の親があれば複数返る)。
Q: 2026 年も jQuery を使うべき？
A: 新規開発では基本不要 (Vanilla JS / Vue / React で十分)。既存プロジェクトのメンテでは引き続き使われています。jQuery 4.x は 2024 年公開、軽量化されました。