.attr()

属性に値を設定、または設定されている値を取得します。

jQuery1.6の問題

jQuery1.6で、attrに大幅な仕様変更がありましたが、この変更はユーザーに大きな混乱を招く結果となり1.6.1で 後方互換(新しいバージョンが古いバージョンの規格を扱えること)を持つように修正されました。

.attr( name ) 1.0追加

戻り値:String

指定した属性の値を取得します。

引数 説明
name 値を取得したい属性の名前を指定します。
var title = $("em").attr("title");

要素が複数マッチしている場合、最初の要素の属性のみを取得します。 各要素の属性値を取得したい場合は、.each()や.map()を使用してください。

.attr( name, value ) 1.0追加

戻り値:jQuery

指定した属性にvalueの値を設定します。

引数 説明
name 値を設定したい属性の名前を指定します。
value 設定する値を指定します。
<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />
$('#greatphoto').attr('alt', 'Beijing Brush Seller');

.attr( map ) 1.0追加

戻り値:jQuery

各属性にmap値を用いてまとめて値を設定します。

引数 説明
map 属性名と値のペアのMap値を指定することで、まとめて要素の属性を設定することが出来ます。
$('#greatphoto').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});

.attr( name, function(index, attr)) 1.1追加

戻り値:jQuery

指定した属性に関数の戻り値を設定します。

引数 説明
name 値を設定したい属性の名前を指定します。
function(index, attr)

新しい属性値を戻り値として返す関数を指定します。 関数で取得できる2つの引数は、下記のとおりです。

index
要素の番号
attr
変更前の属性の値

戻り値が無い、またはundefinedの場合、属性値は変更されません。

$('#greatphoto').attr('title', function(i, val) {
  return val + ' - photo by Kelly Clark'
});

 Back to top

Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative)
Teracloud