Web制作の現場で使えるjQuery UIデザイン入門 ― 第5回
サンプルで学ぶjQuery：(X)HTML/CSSを操作する
2009年08月06日 11時55分更新
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>
この連載の記事
- 最終回 実務で使えるjQueryプラグイン3選
- 第25回 制作現場で役立つjQueryプラグインの使い方
- 第24回 jQueryとAjaxで作るスムーズページング
- 第23回 jQuery＋CSSによるカルーセルパネルの作り方
- 第22回 jQueryでバリデーション付きメールフォームを作ろう
- 第21回 jQueryで自作するフローティングウィンドウ
- 第20回 jQueryによるLightbox風モーダルウィンドウの作り方
- 第19回 jQueryで作る多階層ドロップダウンメニュー
- 第18回 IE6対応！jQueryで透過PNGのロールオーバーを作る
- 第17回 jQueryでロールオーバー！プリロード対応版
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
