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>
ソーシャルリアクション
この連載の記事
一覧へWebPro
jQueryとAjaxで作るスムーズページング
WebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。