お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

捕獲したタグに色々してみる

では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文で分岐させます。