第11回 attrによる属性値の制御　jQueryによるJavaScript入門

西畑一馬 — Tue, 16 Sep 2008 17:10:31 +0000

こんにちは。トゥーアールの西畑です。jQueryによるJavaScript入門、11回目はattrを利用して属性値の制御を行ってみたいと思います。

まずはサンプルをご覧ください。

リンクをクリックすることにより画像が切り替わるギャラリーになります。

jQuerコード

$(function(){
	$("a").click(function(){
		$("img").attr("src",$(this).attr("href"));
		return false;
	})
});

XHTMLコード

<ul>
	<li><a href="img/pencil.jpg">鉛筆</a>li>
	<li><a href="img/paints.jpg">絵の具</a>li>
	<li><a href="img/ageha.jpg">アゲハ</a>li>
	<li><a href="img/cat.jpg">猫</a>li>
ul>
<p><img src="img/pencil.jpg" alt="鉛筆" />p>

それでは、attrメソッドの使い方を解説します。

属性値の取得

$("CSSセレクタ").attr("属性")

$()関数を利用して、CSSセレクタで要素を指定して、attr関数を利用して属性を指定すると属性値を取得することができます。

属性値の変更

$("CSSセレクタ").attr("属性","属性値")

$()関数を利用して、CSSセレクタで要素を指定して、attr関数で属性の後に属性値を指定することにより属性値を変更することができます。

サンプルではクリックの操作を利用してimg要素のsrc属性をa要素のhref属性と同じ値に書き換えています。

$("img").attr("src",$(this).attr("href"));

分けて書いたほうがわかりやすいかもしれませんね。

$(this).attr("href")

これがクリックされたa要素のhref属性を取得するattr関数です。

$("img").attr("src",属性値);

そして、これがimg要素のsrc属性を書き換えるattr関数です。

属性値の箇所にクリックされたa要素のhref属性を入れることによりサンプルのようなコードになります。

【PR】書籍現場のプロから学ぶXHTML+CSS 好評発売中

Re:Creator's Kansai （リクリ） » attr

第11回 attrによる属性値の制御 jQueryによるJavaScript入門

第11回 attrによる属性値の制御　jQueryによるJavaScript入門