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が
hello→hello, again!
に変更されます。

##emptyメソッド,removeメソッド

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

emptyメソッドを使うと、p要素は空、つまり
<p>jQueryの練習</p> →　</p></p>
となります。

removeメソッドを使うと、p要素そのものが削除されます。
<p>jQueryの練習</p> →