Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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();

ドキュメント

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');

ドキュメント

ドキュメント

参考ドキュメント

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした