Posted at

jQueryでHTML要素を操作する


HTML要素の属性操作

jQueryでは、nameやvalue,type,idなどの属性値を変更したり、取得するメソッドが用意されています。


属性値の取得・変更

attrメソッドを使うと、HTML要素の属性値を取得したり、変更したりできます。

属性値は、

セレクタ.attr(属性)

で取得できます。

また、

セレクタ.attr(属性,値)

とすると、属性値を第2引数の値に変更できます。

要素に指定した属性がなければ、新しく追加します。

実際にaタグをattrメソッドを使って操作してみます。

<a href="http://yahoo.co.jp">Yahoo!</a>


console.log($('a').attr('href'));
$('a').attr('href','http://google.co.jp');
console.log($('a').attr('href'));

1行目の出力の時点ではhref属性の値はhttp://yahoo.co.jpです。

2行目でattrメソッドを使ってhref属性の値をhttp://google.co.jpに変更しました。

そのため、3行目の出力ではhttp://google.co.jpが出力されます。


data属性の取得・変更


data属性とは?

data属性とは、自分で作ることができるカスタム属性です。

data-属性 = "値"

タグの<>内に記述することで、作成できます。


dataメソッド

dataメソッドを使うと、このdata属性の値を取得したり、変更したりすることができます。

data(属性)

とすると、data-属性 = "値"の値が取得できます。

data(属性,値)

とすると、data-属性 = "値"の値を第2引数の値に変更できます。

また指定したdata属性がなければ、新しく追加します。

次のaタグは、カスタム属性data-sitenameをもっています。

<a href="http://google.com" data-sitename='google'>Google</a>


console.log($('a').data('sitename'));

dataメソッドを使ってaタグのdata-sitenameの値を取得しています。

コンソールには、googleと表示されます。


HTML要素の中身の操作

jQueryでは、次のようなHTMLタグの中身を操作できるメソッドが用意されています。

メソッド
意味

text
テキスト情報の変更・取得

html   
 テキスト情報の変更・取得 (HTML要素を出力に反映)

val
フォームの中身(value)を変更・取得

empty
要素の中身を空にする

remove
要素をそのものを削除する

<p>jQueryの練習</p>

<input id = "name" type="text" value="hello">


この2つのHTML要素を実際に操作してみます。


textメソッド


$('p').text('just changed');

textメソッドによって

<p>jQueryの練習</p> → </p>just changed</p>

と変更されます。


htmlメソッド

$('p').html('<a href = "">click me!</a> ');

htmlメソッドによって

<p>jQueryの練習</p><p><a href = "">click me!</a></p>

と変更されます。

textメソッドでは、引数の値に含まれるHTML要素は無視されます。

一方、htmlメソッドでは、HTML要素を認識し、"click me!"というリンクを表示してくれます。


valメソッド


$('input').val('hello, again!');

valメソッドによってinputタグのvalueが

hellohello, again!

に変更されます。


emptyメソッド,removeメソッド


$('p').empty();
$('p').remove();

emptyメソッドを使うと、p要素は空、つまり

<p>jQueryの練習</p> → </p></p>

となります。

removeメソッドを使うと、p要素そのものが削除されます。

<p>jQueryの練習</p> →