HTML
jQuery
属性

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> →