More than 5 years have passed since last update.

[jQuery] 内容や属性を変更するメソッド

Last updated at 2017-10-14Posted at 2017-10-09

text/html

要素の内容をまるごと書き換えるメソッド。

text は要素のテキストを、
html は要素のHTMLを丸ごと書き換える。

書き方

jQueryObject.text('書き換え後のテキストを入力');
jQueryObject.html('<span>書き換え後のHTMLを入力</span>');

サンプル

$('.className').text('textメソッドでテキストを書き換えたよ');
$('.className').html('<span>書き換え後のHTMLを入力</span>');

htmlメソッドは要素のHTMLを書き換える事が可能な為、
慎重に扱わないと悪意のあるscriptを埋め込まれる、
脆弱性がある設計になってしまう可能性がある。
取扱いには慎重になるべき。

ドキュメント

empty

要素の中身を空っぽにするメソッド。
内容を丸ごと消したい時に使う。

指定した要素の中に入っている要素を全て（テキストもHTMLも）消す。
同時にイベントハンドラや内部でキャッシュしているデータも削除する。

書き方

jQueryObject.empty();

サンプル

$('.className').empty();

ドキュメント

empty() リファレンス

attr

要素の属性値を変更するメソッド。

出来ることの一例

要素のclass属性を変更する
input要素などのdisabled属性を変更して、コントロールの制御を行う
a要素のhref属性を変更して、リンク先を変更する
a要素のtarget属性を変更して、別ウィンドウで開くなどの制御を行う
スタイルシートを読み込んでいるlink要素のhref属性を変更して、別のスタイルシートに切り替える

書き方

jQueryObject.attr('属性名', '変更後の値');

サンプル

// 読み込んでいる画像を img1.png から img2.png に変更
$('.className').attr('src', 'img2.png');

// リンク先をGoogleに変更
$('.className').attr('href', 'https://www.google.co.jp');

// class名を classNameChange に変更
$('.className').attr('class', 'classNameChange');

ドキュメント

val

input要素やtextarea に入力されたvalue属性の値を変更する事ができるメソッド。

出来ることの一例

テキストエリアの初期テキストを任意の物に変更する
セレクトメニュー（プルダウン）の初期選択を任意の物に変更する

書き方

jQueryObject.val('変更後の値');

サンプル

// input要素のテキストを変更
$('#input1').val('書き換えたよ');

// select要素（プルダウンメニュー）で任意のvalue属性値（'tokyo'）を持つ項目を選択する
$('#select1').val('tokyo');

// select要素（リストメニュー）で任意のvalue属性値（'tokyo'）を持つ項目を複数選択する
$('#select2').val(['shinjukuku' , 'chiyodaku']);

addClass / removeClass

要素のclass属性の値を操作するメソッド。

addClass 指定した値（class）を追加する。
removeClass 指定した値（class）を削除する。

※jQueryに依存しないで、ほぼ同様のことが行える「classList」という機能もある。

出来ることの一例

状態ごとに違う見栄えを表現したい場合などに、予めその為のclassにスタイルをあてたものを用意し、classの追加／削除を行う事で見栄えの変化を表現する。

書き方

jQueryObject.addClass('クラス名');
jQueryObject.removeClass('クラス名');

サンプル

// 要素がアクティブになった時のための見栄えのclass 'is-active' に予めスタイルシートを作成しておき、classの追加／削除で状態変化を再現する
$('.className').addClass('is-active');
$('.className').removeClass('is-active');

ドキュメント

参考ドキュメント

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up