タイトル: 要素セレクタ
SEOタイトル: jQuery 要素セレクタ完全ガイド
| この記事の要点 |
|
要素セレクタの基本
jQuery の要素セレクタ (タグ セレクタ) は、HTML のタグ名で要素を選択する最も基本的な記法です。CSS のセレクタ仕様にほぼ準拠しており、追加で jQuery 独自の擬似セレクタも使えます。
// 全ての <p> 要素
$('p')
// 全ての <div> 要素
$('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 |
<!-- HTML -->
<div id="content">
<h2>見出し1</h2>
<p>段落A</p>
<p>段落B</p>
<ul>
<li>項目1
<ul>
<li>ネスト</li>
</ul>
</li>
</ul>
</div>$('#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 年公開、軽量化されました。