3章　属性、CSS操作

この章で登場するメソッド一覧です。

属性

属性とは、そのタグの中に書かれている部分で、例えば、<a href="xxx" target="_blank"> の場合、href="xxx" とtarget="_blank" が該当します。hrefやtargetが名前（キー）で、xxxや _blankが値です。属性を設定・取得・削除する構文を見ていきます。

.attr()
.removeAttr()

.attr()

jQueryでは、.attr()というメソッドを使って、属性を設定又は取得しています。.attr()には、4つの構文があります。他のメソッドと同じく、引数の数や引数のタイプによって、これらの構文を区別します。

.attr(name)

マッチした要素の内の1番最初の要素の属性の値を取得します。

<a href="http://www.yahoo.co.jp/" id="mylink">Yahoo</a>

<a href="http://www.google.co.jp/">Google</a>

var url = $("#mylink").attr("href");

// これで、urlには "http://www.yahoo.co.jp/" と格納されます。

var url = $("a").attr("href");

// こちらも同上

1つ目は、IDで指定していますので、マッチ（選択）される要素は、1つのはずです。その要素のhref属性の値を返します（取得します）。（ここではYahooのURL）
2つ目は、クラス名で指定していますので、複数の要素がマッチする可能性はありますが、たとえ複数マッチしても、マッチした要素の最初の要素のhref属性の値を返します。（つまり、こちらもYahooのURL）
（1つの要素にもマッチしない場合やマッチした要素に該当の属性名が無い場合は、undefinedが返ります）

また、HTML5では、頭にdata- を付けることによりカスタム属性を使うことができますが、それも取得することができます。
例えば、以下になります。

<span id="taro" data-myid="101">太郎</span>

var id = $("#taro").attr("data-myid");

// idは、"101"が格納される

.attr(name, value)

属性名（name）に値（value）を設定します。

<img id="myphoto" src="skytree.jpg" />

$('#myphoto').attr('alt', 'スカイツリー');

これで、img要素（#myphoto）にalt「スカイツリー」を付与しています。
また、img要素であれば、src属性を変更して、画像を切り替えることもできます。

$('#myphoto').attr('src', 'skytree2.jpg');

.attr(map)

{name: value, name: value} のオブジェクト形式で、複数同時に属性を設定することもできます。

$('#myphoto').attr({alt: 'スカイツリー', title: '東京の新名所'});

.attr(name, function (index, attr))中級

マッチした要素の全てに第2引数の関数を実行し、その関数から返された値を属性値に設定します。

関数には引数が2つ渡され、1つ目は、マッチした要素のインデックス番号（0スタート）で、2つ目は、マッチした要素の変更前の属性値です。関数内のthisは、処理中の要素を指します。具体例を見てみましょう。

<img src="taro.gif" alt="太郎" title="15歳" />

<img src="jiro.gif" alt="次郎"  title="10歳" />

<img src="saburo.gif" alt="三郎" title="8歳" />

$('img').attr("title", function (index, attr) {

  return "[" + index + "]" + attr + this.alt;

});

上記を実行すると、img要素は次のように書き換えられます。 title属性が書き換えられている所に注目して下さい。

<img src="taro.gif" alt="太郎" title="[0]15歳太郎" />

<img src="jiro.gif" alt="次郎"  title="[1]10歳次郎" />

<img src="saburo.gif" alt="三郎" title="[2]8歳三郎" />

また、もし関数が何も返さない場合やundefinedを返した場合は、その要素の属性値は変更されません。

実は、属性やCSSを設定するjQueryのメソッドのほぼ全てで、上記のような関数を指定する形で設定を行うことができますが（jQueryの最新版であれば）、本書は入門者対象ということもあり、以後、この形は省略していきます。

.removeAttr(name)

指定した属性を削除します。

// title属性を削除します。

$('img').removeAttr("title");

Ver.1.7以上では、半角スペース区切りで複数指定することもできます。

3章 属性、CSS操作