THE HAM MEDIA BLOG

jQuer基礎:attrを学ぶ

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
javascript
DOM

attrを学ぶ

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

今回はattrを勉強



DOMの属性関連を扱うattr

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

■サンプル1ソース

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

■サンプル1 HTMLソース

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

■サンプル1 プレビュー

ここのタイトルが変化します→変化後のタイトル名をここに表示

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

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

■サンプル2ソース

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

■サンプル2 HTMLソース

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

■サンプル2 プレビュー

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

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

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

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

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

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

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



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。