捕獲したタグに色々してみる
ではDOMの取得ができましたので、そいつらを色々やっていきましょう。
属性
タグには色んな属性があります。
href id class width height alt title とかなんとか
JSでそいつらを取得したり書き換えたりもできます。
addClass([クラス名])
指定要素に対してクラスを付与してあげます。
$('#hoge').addClass('ponzu');
/**************************
例
<div id="hoge">
が
<div id="hoge" class="ponzu">
になります。
***************************/
attr([属性名],[上書き値])
指定要素の属性を取得/変更する事ができます。
上書き値を指定しない場合が取得になります。
$('a').attr('href'); // hrefの中身を取得
$('a').attr('href','http://gogole.com'); // hrefの中身を書き換え
hasClass([クラス名])
指定したクラスがあるかどうかをチェックします。
戻り値は true falseとなります。
if($('a').hasClass('noLink')){
alert('押すな');
} else {
alert('よくぞ押した');
}
removeAttr([属性名])
指定した属性を削除します。
指定がない場合は全ての属性を削除します。
$('img').removeAttr('alt');
removeClass([クラス名])
指定したクラスを削除します。
指定がない場合は全てのクラスを削除します。
$('p').removeClass('hoge');
val([値])
value値を取得/変更します。
$('input').val('hoge');
練習問題的な
-
1:クラス名の書き換え
適当につけたクラス名を削除し、別のクラス名を再度つけてみましょう。
※ヒント:メソッドチェーンで、できます。つなげる事ができるのです。 -
2:hrefの書き換え
hrefの書き換えを行ってみましょう。 -
3:クラス名の判定と処理
class:[test]がついている要素のみ、testクラスを削除し、別クラス名をつけてあげます。
※ヒント;if文で分岐させます。