jqueryで属性を変更させる方法

属性とはhtmlでいうと要素で設定しているいろいろな値、
例えば：<a href="index.html"></a>
属性：href、属性値：index.html、要素：a

属性を変更できると、画像を入れ替えたり、urlを変更したり、大きさを変えたり、ホームページでの表現の幅が広がります。

attr

属性値を変更する場合

$("セレクタ").attr("変更したい属性の名前","変更後の属性値");

例えば、
属性srcをa.jpg→b.jpgに変更する場合。
jquery

$("img").attr("src","b.jpg");

html

変更前：<img src="a.jpg">
変更後：<img src="b.jpg">

さらにたくさんの属性を変更したい時

$("セレクタ").attr({"属性名":"変更後の属性値","属性名2":"変更後の属性値"});

が使えます。
例えば、
属性srcをa.jpg→b.jpg、属性altをa→b、属性widthを100→80に変更する場合
jquery

$("img").attr({"src":"b.jpg","alt":"b","width":"80"});>

html

変更前：<img src="a.jpg" alt="a" width="100">
変更後：<img src="b.jpg" alt="b" width="80">

属性値を取得

attr属性値を取得する事もできます。

$("セレクタ").attr("取得したい属性の名前");

例えば、画像のURLを取得する時

var img_url =$("img").attr("src");

removeAttr

属性をまるごと消せます。

$(セレクタ).removeAttr("属性名");

例えば、画像についてるborder=”0″をけします。

$("img").removeAttr("border");

class属性について

addClass

class属性を追加します。

$("セレクタ").addClass("class属性値");

例えば、aの要素にclassBのclassを追加する
jquery

$("a").addClass("classB");

html

変更前：<a href="" class="classA">トップ</a>
変更後：<a href="" class="classA classB">トップ</a>

removeClass

class属性値を削除します。

$("セレクタ").removeClass("class属性値");

例えば、aの要素のclassBを削除する
jquery

$("a").removeClass("classB");

html

変更前：<a href="" class="classA classB">トップ</a>
変更後：<a href="" class="classA">トップ</a>

フォームについて

val

フォームに入力した値を変更

$("セレクタ").val("変更後の値");

例えば、入力した値をボタンをクリックしてクリアする

$("button").click(function(){
      $("input").val("");
    });

入力した値を取得
val()を空にすることでinputの値を取得することができます。

var name = $("input").val();

例:入力の値を確認する

jquery

$(function(){
	$("button").click(function(){
		$("p.mail").text($("input").val() +"にメールを送信します。");
		$("button").text("送信");
	});
})