この記事の要点

基本: $('#id') / $('.class') / $('tag') で CSS セレクタによる取得 トラバース: .find() / .children() / .parent() / .closest() / .siblings() 絞り込み: .filter() / .not() / .eq(n) / .first() / .last() 配列化: .toArray() / ループ .each(function(i, el) {...}) 現代の素 JS: document.querySelectorAll() + forEach でほぼ代替可能

基本のセレクタ

// ID
$('#header')

// クラス
$('.btn')

// タグ
$('div')
$('p')

// 子孫
$('ul li')
$('.card .title')

// 直接の子
$('ul > li')

// 隣接兄弟
$('h2 + p')

// 全兄弟
$('h2 ~ p')

// 属性
$('input[type="text"]')
$('a[href^="https://"]')
$('img[alt$=".jpg"]')

// 複数（カンマ）
$('h1, h2, h3')

// 擬似クラス
$('li:first-child')
$('tr:nth-child(odd)')
$('input:checked')
$(':input')              // 全フォーム要素
$('p:contains("hello")') // jQuery 独自
$(':visible')            // 表示中のみ（jQuery 独自）

トラバース（DOM 移動）

メソッド	取得対象
.find(sel)	子孫から sel に一致
.children([sel])	直接の子のみ
.parent([sel])	直近の親
.parents([sel])	祖先全部
.closest(sel)	自身含む最も近い親で sel に一致
.next([sel])	次の兄弟
.prev([sel])	前の兄弟
.nextAll() / .prevAll()	後 / 前の全兄弟
.siblings([sel])	自分以外の兄弟

$('.row')
  .find('.btn')           // .row の中の .btn 全部
  .closest('form')        // それを含む直近の form
  .siblings('.error')     // form の兄弟の .error
  .first();               // 最初の 1 つ

// クリックされた行の input を取得
$('.row .btn').on('click', function() {
    const $row = $(this).closest('.row');
    const $input = $row.find('input');
    console.log($input.val());
});

絞り込みフィルタ

$('li').first();              // 最初の 1 つ
$('li').last();               // 最後の 1 つ
$('li').eq(2);                // 0 始まりで 3 番目
$('li').eq(-1);               // 最後（負インデックス）

// filter : セレクタ or 関数で絞る
$('li').filter('.active');
$('li').filter(function(i, el) {
    return $(el).text().length > 10;
});

// not : 除外
$('li').not('.disabled');

// has : 子要素を持つもの
$('li').has('a.external');

// slice : 範囲
$('li').slice(0, 3);         // 0,1,2

取得結果の扱い

const $items = $('.item');

// 長さ
$items.length;            // 数値（要素数）

// DOM 要素配列に
$items.toArray();         // [HTMLElement, HTMLElement, ...]
$items.get();             // 同上
$items.get(0);            // 最初の HTMLElement
$items[0];                // [] でも OK

// ループ : .each
$items.each(function(i, el) {
    console.log(i, el, $(el).text());
});

// map : 値の配列を作る
const texts = $items.map(function() {
    return $(this).text();
}).get();
// ['A', 'B', 'C']

// 任意の要素が含まれるか
$items.is('.active');     // 1 つでも .active があれば true

属性 / プロパティ取得

$('#myInput').val();             // input/select の値
$('#myInput').val('hello');      // 値を設定

$('#myLink').attr('href');       // 属性
$('#myLink').attr('href', '/');  // 属性設定

$('#chk').prop('checked');       // チェック状態
$('#chk').prop('checked', true);

$('#box').data('user-id');       // <div data-user-id="42">
$('#box').data();                // 全 data-* 取得（オブジェクト）

$('h1').text();                  // テキスト取得
$('h1').html();                  // 内部 HTML

動的に追加された要素の取得

イベントは on() でデリゲートすると、後から追加された要素にも反応します:

// ❌ 後から追加された .row には効かない
$('.row .delete').on('click', function() { ... });

// ✅ 親に委譲（イベントデリゲーション）
$(document).on('click', '.row .delete', function() {
    const $row = $(this).closest('.row');
    $row.remove();
});

// 追加されたかチェック
if ($('.new-item').length) {
    // ある
}

パフォーマンス Tips

• 変数にキャッシュ: const $btn = $('#btn'); を使い回す
• ID セレクタが一番速い（getElementById 直結）
• find より直接: $('.row .btn') より $('.row').find('.btn') の方が速い場合あり
• コンテキスト指定: $('.btn', container) でルート限定
• 巨大な DOM では document.querySelectorAll + forEach の方が速いことも

現代の素 JavaScript で書き直す

jQuery	素 JS
$('#id')	document.getElementById('id')
$('.cls')	document.querySelectorAll('.cls')
$('a').first()	document.querySelector('a')
.find(sel)	el.querySelectorAll(sel)
.closest(sel)	el.closest(sel) (IE 非対応)
.parent()	el.parentElement
.next()	el.nextElementSibling
.children()	el.children
.each(fn)	nodes.forEach(fn)
.text()	el.textContent
.html()	el.innerHTML
.attr('href')	el.getAttribute('href')
.addClass('x')	el.classList.add('x')
.on('click', fn)	el.addEventListener('click', fn)

jQuery → 素 JS の書き換え例

// jQuery
$('.btn').on('click', function() {
    const $row = $(this).closest('.row');
    $row.find('.title').text('Updated');
});

// 素 JS
document.querySelectorAll('.btn').forEach((btn) => {
    btn.addEventListener('click', () => {
        const row = btn.closest('.row');
        row.querySelector('.title').textContent = 'Updated';
    });
});

// Ajax: jQuery
$.getJSON('/api/users', function(data) { ... });

// 素 JS (fetch)
fetch('/api/users').then(r => r.json()).then(data => { ... });

FAQ

Q: jQuery はもう古い？
A: 新規プロジェクトでは React / Vue / Alpine.js / 素の JS が主流で、jQuery の出番は減っています。ただし既存 CMS（WordPress 等）では現役。

Q: $('div')[0] と $('div').get(0) の違いは？
A: 結果は同じ HTMLElement。get() は負インデックス対応（.get(-1) で末尾）の利点があります。

Q: 取得できなかったときの判定は？
A: if ($('.foo').length)。.length === 0 なら存在しない。素 JS なら document.querySelector が null を返すので if (el) で判定。

Q: 大量要素のループが遅い
A: 変数にキャッシュ、DOM 操作をまとめる（$('<div>') で文字列を作って 1 度に append）、必要なら仮想 DOM フレームワークへ移行。