THE HAM MEDIA BLOG

また基礎的な事を勉強。
今までしっかり勉強していなかった分、
基礎の学習は本当にいろいろな事を学ぶ。

今回はattrを勉強

DOMの属性関連を扱うattr

例えば、titleのないところにtitleをつけたりできる。

■サンプル１ソース

$(document).ready(function(){
    $("input.samp1").click(function(){
        $("p.addtitle").attr({title:"タイトルを付けました"});
        var title = $("p.addtitle").attr("title");
        $("span.sp1").text(title);
    });
});

■サンプル１ HTMLソース

<p class="addtitle">ここのタイトルが変化します→
    <span class="sp1">変化後のタイトル名をここに表示</span>
</p>

■サンプル１ プレビュー

クリック後に「ここのタイトルが変化します」の部分に
マウスカーソルをのせてみてください。
titleがついて変化したのがわかると思います。

下記のようなこともできるようです

■サンプル２ソース

$(document).ready(function(){
    $("input.samp:gt(0)").attr("disabled","disabled");
});

■サンプル２ HTMLソース

<input class="samp" type="button" value="button1" />
<input class="samp" type="button" value="button2" />
<input class="samp" type="button" value="button3" />

■サンプル２ プレビュー

disabledを0番目以降のinputに適応させたものだ。
disabledによって、ボタンが押せなくなっている。

フォームのチェックなどの機能を付けるときに
これは使えるかなとか思う。

一度に複数の属性をつける

attrで一度に複数の属性をつけるには、
下記のようにするようだ。

$("img").attr({
    title: "タイトル" ,
    alt: "説明" ,
    src: "指定"
});

titleやalt、srcなどの変更の際に使えそうだ。

・・・一つしぼったらやけにあっさりなエントリーになってしまった。