jQueryのattrメソッド

Posted by specterant on 2012.01.16

jQueryを勉強しているのですが、いつもattrメソッドの意味を忘れてしまうので覚え書き。

attrメソッドは、指定した要素の属性や属性値が操作できるモノ。
例えば、aタグのhrefを書き換えることができたりしちゃいます。

/********************************
//書式
********************************/
$('セレクタ').attr('操作したい属性名', '変更後の属性値');

//複数の属性値を同時に操作もできる
$('セレクタ').attr({
 '操作したい属性名1', '変更後の属性値1',
 '操作したい属性名2', '変更後の属性値2',
 '操作したい属性名3', '変更後の属性値3'
});

//属性値を取得したい場合(※変更後の属性値を指定しない。)
$('セレクタ').attr('取得したい属性名');
/********************************
//そんな訳で、記述例
********************************/
$('#div1 a').attr('href', 'http://log.specterant.com/');

/********************************
//HTMLの記述
********************************/
<div id="div1"><a href="http://www.specterant.com/">リンク</a></div>

//jQueryで下記のように変更される。
<div id="div1"><a href="http://log.specterant.com/">リンク</a></div>

ちなみに、指定した要素の属性自体(属性名と属性値)を削除するには、removeAttrメソッドで削除できます。
/********************************
//書式
********************************/
$('セレクタ').removeAttr('削除したい属性名');
/********************************
//そんな訳で、記述例
********************************/
$('#div1 a').removeAttr('href');

/********************************
//HTMLの記述
********************************/
<div id="div1"><a href="http://www.specterant.com/">リンク</a></div>

//jQueryで下記のように変更される。
<div id="div1"><a>リンク</a></div>

No comments yet.

Write a comment:

WP-SpamFree by Pole Position Marketing