この記事の要点

jQuery の DOM 操作 API は .html() / .text() / .val() が三本柱 属性は .attr() (HTML 属性) / .prop() (DOM プロパティ) / .data() (data-* 属性) スタイルは .css({prop:val})、クラス操作は .addClass/removeClass/toggleClass/hasClass 表示制御は .show/.hide/.toggle/.fadeIn/.slideUp、挿入は .append/prepend/after/before 現代は Vanilla JS (document.querySelector + classList) で同等のことができるため新規プロジェクトでは不要

jQuery DOM 操作の基本

jQuery の最も基本的な使い方は「セレクタで要素を取得し、メソッドで操作する」という流れです:

// 基本パターン
$(selector).method();

// 例
$('#title').text('新しいタイトル');
$('.btn').addClass('active');
$('input[name="email"]').val('test@example.com');

HTML / テキスト / 値の取得・設定

メソッド	取得	設定	備考
.html()	$el.html()	$el.html("<b>X</b>")	innerHTML 相当。XSS 注意
.text()	$el.text()	$el.text("X<Y")	textContent 相当。安全
.val()	$input.val()	$input.val("abc")	input / select / textarea のみ

// 取得
const title = $('#title').text();          // "Hello"
const html  = $('#box').html();            // "<b>X</b>"
const value = $('input[name=email]').val(); // "abc@example.com"

// 設定
$('#title').text('新タイトル');
$('#box').html('<i>イタリック</i>');
$('input[name=email]').val('new@example.com');

// セレクトボックス
$('#country').val('JP');                   // value=JP の option を選択
$('#country').val(['JP', 'US']);           // multiple select

属性操作: attr / prop / data

// attr: HTML 属性 (文字列で扱う)
$('img').attr('src');                      // 取得
$('img').attr('src', '/img/new.png');      // 設定
$('a').attr({ href: '/x', target: '_blank' });
$('img').removeAttr('alt');                // 削除

// prop: DOM プロパティ (boolean / 状態系)
$('#agree').prop('checked');               // true / false
$('#agree').prop('checked', true);         // チェックを入れる
$('input').prop('disabled', true);
$('#opt-jp').prop('selected', true);

// data: data-* 属性 (キャッシュされた値)
$('#box').data('user-id');                 // <div data-user-id="123"> → 123
$('#box').data('userId', 456);             // ※ HTML 属性は更新されない

attr と prop の使い分け: チェックボックス / disabled / selected の状態は prop。href / src / class のような文字列値は attr。

CSS 操作

// 取得
$('#box').css('color');                    // "rgb(0, 0, 0)"
$('#box').css('font-size');                // "16px"

// 設定 (個別)
$('#box').css('color', 'red');
$('#box').css('width', '300px');

// 設定 (オブジェクト)
$('#box').css({
  color: 'red',
  backgroundColor: '#fffbea',  // キャメルケース可
  'font-size': '20px',         // ケバブケースも可 (クォート要)
  border: '1px solid #f4c430'
});

// 関数で動的に
$('div').css('width', function(i, oldWidth) {
  return parseInt(oldWidth) + 10 + 'px';
});

クラス操作

$('#box').addClass('active');
$('#box').addClass('active highlighted');  // 複数

$('#box').removeClass('active');
$('#box').removeClass();                   // 全削除

$('#box').toggleClass('active');           // あれば消し、なければ付ける
$('#box').toggleClass('active', isOn);     // 第2引数で強制

$('#box').hasClass('active');              // true / false

表示・非表示・アニメーション

// 即座
$('#box').show();
$('#box').hide();
$('#box').toggle();

// 時間指定
$('#box').show(400);                       // 400ms
$('#box').hide('slow');                    // 600ms
$('#box').toggle(200);

// フェード
$('#box').fadeIn(300);
$('#box').fadeOut(300);
$('#box').fadeToggle(300);
$('#box').fadeTo(300, 0.5);                // 透明度 0.5

// スライド
$('#box').slideDown(300);
$('#box').slideUp(300);
$('#box').slideToggle(300);

// 汎用アニメーション
$('#box').animate({
  width: '300px',
  opacity: 0.5,
  marginLeft: '+=50px'
}, 500, function() {
  console.log('完了');
});

// アニメーション停止
$('#box').stop();

要素の挿入・削除

// 子要素を追加
$('#list').append('<li>新規</li>');         // 末尾に追加
$('#list').prepend('<li>先頭</li>');        // 先頭に追加

// 兄弟として追加
$('#item').after('<p>あと</p>');
$('#item').before('<p>まえ</p>');

// 反対方向 (引数と主語が逆)
$('<li>新規</li>').appendTo('#list');
$('<p>後</p>').insertAfter('#item');

// 置換
$('#old').replaceWith('<div id="new">新</div>');

// 削除
$('#item').remove();                       // 要素ごと削除
$('#item').empty();                        // 中身だけ削除
$('#item').detach();                       // 削除 (イベント保持)

DOM 走査 (Traversing)

$('#list').find('li');                     // 子孫から li
$('#list').children();                     // 直接の子のみ
$('#item').parent();                       // 直接の親
$('#item').parents('.container');          // 祖先 (一致するもの全部)
$('#item').closest('.container');          // 最も近い祖先 (1つ)
$('#item').siblings();                     // 兄弟全部
$('#item').siblings('.active');            // 兄弟のうち .active
$('#item').next();                         // すぐ次の兄弟
$('#item').nextAll();                      // それ以降の兄弟全部
$('#item').prev();
$('#list li').first();
$('#list li').last();
$('#list li').eq(2);                       // 0-indexed 3番目

each ループ

$('li').each(function(index, el) {
  console.log(index, $(el).text());
});

// オブジェクト / 配列にも使える
$.each([1, 2, 3], function(i, v) { console.log(i, v); });
$.each({a:1, b:2}, function(k, v) { console.log(k, v); });

Vanilla JS への置換

jQuery	Vanilla JS
$("#x")	document.getElementById("x")
$(".x")	document.querySelectorAll(".x")
.text("...")	.textContent = "..."
.html("...")	.innerHTML = "..."
.addClass("a")	.classList.add("a")
.removeClass("a")	.classList.remove("a")
.toggleClass("a")	.classList.toggle("a")
.css("color","red")	.style.color = "red"
.attr("href")	.getAttribute("href")
.append(html)	.insertAdjacentHTML("beforeend", html)
.remove()	.remove()
.on("click", fn)	.addEventListener("click", fn)

FAQ

Q: .html() と .text() どちらを使うべき？
A: ユーザー入力を表示するなら .text() (XSS 安全)。サーバから来た HTML を入れるなら .html()。

Q: .attr("checked") が undefined になる
A: .prop("checked") を使う。HTML 属性の checked は初期値、現在の状態は DOM プロパティ。

Q: 新規プロジェクトで jQuery 使うべき？
A: ほぼ不要。Vanilla JS の querySelector + classList + fetch で十分。React / Vue を使うなら絶対に避ける。