Web制作の現場で使えるjQuery　UIデザイン入門 ― 第5回

サンプルで学ぶjQuery：(X)HTML/CSSを操作する (5/7)

8．属性値の変更と取得

　jQueryでは、(X)HTMLの属性の値を簡単に操作できます。

■属性値の変更

　attr() を利用すると、属性値を変更できます。attr() は、変更したい属性名と変更後の属性値を括弧内に ,(カンマ)区切りで指定します。

▼attr()の記述方法

$(セレクター).attr("属性名","属性値");

　以下に示すのは、a要素のhref属性の値を「http://ascii.jp/」に変更するサンプルです。

▼サンプルコード（スクリプト部分）

$("a").attr("href","http://ascii.jp/");

▼サンプルコード（元の(X)HTML部分）

<a href="http://to-r.net">リンク先</a>

▼実行結果（実際のWebページ）

<a href="http://ascii.jp/">リンク先</a>

属性値の取得

　属性値の取得にも、attr() を利用します。attr() の括弧内に属性名のみを指定すると、指定した属性値を取得できます。

▼サンプルコード（スクリプト部分）

$("a").text( $("a").attr("href") );

　上のサンプルでは、a要素のhref属性の値を取得し、取得した値を text() でa要素のテキストとして書き込んでいます。

▼サンプルコード（元の(X)HTML部分）

<a href="http://ascii.jp/">リンク先</a>

▼実行結果（実際のWebページ）

<a href="http://ascii.jp/">http://ascii.jp/</a>

■属性の削除

　セレクターで指定した要素に特定の属性が設定されている場合、removeAttr() で属性を削除できます。

▼サンプルコード（スクリプト部分）

$("a").removeAttr("target");

　上記のサンプルを実行すると、a要素の target属性を削除します。

▼サンプルコード（元の(X)HTML部分）

<a href="http://ascii.jp/" target="_blank">リンク先</a>

▼実行結果（実際のWebページ）

<a href="http://ascii.jp/" >リンク先</a>

9．class属性の追加と削除

　class属性は他の属性と違い、スペース区切りで複数の値を設定できるため、属性を追加／削除する専用の命令が用意されています。

■class属性の追加

　class属性の追加には、addClass() を利用します。括弧内には追加したいclass属性の値を記述します。複数のclass属性をスペース区切りで追加できます。

▼サンプルコード（スクリプト部分）

$("p").addClass("red");

　上記のサンプルでは、p要素にredというclass属性を追加しています。

▼サンプルコード（元の(X)HTML部分）

<p>テキストテキストテキストテキストテキスト</p>

▼実行結果（実際のWebページ）

<p class="red">テキストテキストテキストテキストテキスト</p>

class属性の削除

　class属性の削除には、removeClass() を利用します。括弧内には削除したい class属性の値を記述します。複数のclass属性をスペース区切りで記述できます。

▼サンプルコード（スクリプト部分）

$("p").removeClass("red");

　このサンプルでは、p要素からredというclass属性を取り除いています。

▼サンプルコード（元の(X)HTML部分）

<p class="red">テキストテキストテキストテキストテキスト</p>

▼実行結果（実際のWebページ）

<p>テキストテキストテキストテキストテキスト</p>