タイトル: HTML/CSS操作・制御

jQueryのHTML/CSS操作について記載します。

jQueryにはcssやHTMLを扱うメソッドがある。

CSSの設定を行ったり、HTMLを書き換え等を行うことが出来る。

子ページから選択して下さい。

本ページの子ページ一覧

メソッド	用途
.css()	CSSプロパティの取得・設定
.width()	要素の幅取得・設定
.height()	要素の高さ取得・設定
.show()	非表示要素を表示
.ready()	DOM準備完了時の処理登録
.attr()	HTML属性の取得・設定

HTML/CSS操作で頻出する jQuery メソッド

テキスト・HTML操作

メソッド	用途
`.text()`	テキストの取得・設定（HTMLタグはエスケープ）
`.html()`	innerHTMLとしての取得・設定
`.val()`	フォーム要素の値取得・設定
`.append()` / `.prepend()`	子要素を末尾／先頭に追加
`.before()` / `.after()`	兄弟要素として前／後に挿入
`.remove()` / `.empty()`	要素を削除／中身を空に
`.clone()`	要素を複製

属性・クラス操作

メソッド	用途
`.attr()`	HTML属性の取得・設定（href, src, type 等）
`.prop()`	プロパティの取得・設定（checked, disabled 等）
`.removeAttr()`	属性削除
`.addClass()`	CSSクラス追加
`.removeClass()`	CSSクラス削除
`.toggleClass()`	CSSクラスの切替
`.hasClass()`	CSSクラス保持判定
`.data()`	data-* 属性の取得・設定

表示・サイズ

メソッド	用途
`.show()` / `.hide()`	表示／非表示
`.toggle()`	表示状態切替
`.fadeIn()` / `.fadeOut()`	フェード切替
`.slideUp()` / `.slideDown()`	スライド切替
`.width()` / `.height()`	サイズ取得・設定
`.offset()`	ページ上の絶対位置
`.position()`	親要素基準の位置

使用例

// CSS設定
$('#title').css('color', 'red');
$('#title').css({ color: 'red', fontSize: '20px' });

// クラス操作
$('.item').addClass('active');
$('.item').toggleClass('selected');

// テキスト/HTML
$('#name').text('Taro');
$('#box').html('<b>Hello</b>');

// 属性
$('a').attr('target', '_blank');
$('input[type=checkbox]').prop('checked', true);

// 要素追加
$('#list').append('<li>新規</li>');

注意点

.html() は XSS リスク: ユーザー入力をそのまま入れない。テキストなら .text()
.attr() vs .prop(): checked や disabled は prop()、href や src は attr()
jQueryの依存: 近年はVanilla JSやReact/Vueで済ませることが増えた。新規案件では必要性を再考

IT総合Wiki

過去バージョン