1.6で激変したみたい。現在は互換性が保たれてますが今後のために.prop()との違いはしっかり押さえておきたいところです。とりあえず属性とプロパティの違いは
一般的に、DOMの属性とはドキュメントから静的に読み取れる状態を表します。例えば、<input type="text" value="abc">におけるvalue属性のそのままの状態です。
一方で、DOMのプロパティとはドキュメントの動的な状態を表します。
ですから、例えば、ユーザーがinput要素に"def"と追記したときの.prop('value')は"abcdef"ですが、.attr('value')は"abc"のままです。
jQuery 1.6でattr()の動作が変わった - R42日記
とのこと。で、どう使い分ければいいかというと
.prop()メソッドはboolean型の属性とプロパティ、あるいはwindow.locationといったHTMLではないプロパティの操作に使います。それ以外のHTML中に存在する属性は、引き続き.attr()メソッドを使用して下さい。
jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。 | Ginpen.com
とのこと。で、フォームのvalueについては.val()で取得すると。上記ページ見るとわかりやすくまとまっているので、それほど混乱しないかとおもいます。
attr( attributeName )
引数
- attributeName
- 取得したい属性名
サンプル
jQueryオブジェクトが保持している最初のDOM要素のattributeNameで指定した属性名の属性値を取得する。
Javascript
$('#execute-1').on('click', function(e) {
let str = '';
$('#sample-1 .photo').each(function(){
str += '[Alt]' + $(this).attr('alt') + '<br />';
});
$(e.target).parent().find('.result').append(str);
});
HTML
<div id="sample-1">
<div class="photos">
<img src="/resource/images/photos/2.jpg" alt="画像1" class="photo" style="width: 40%;">
<img src="/resource/images/photos/3.jpg" alt="画像2" class="photo" style="width: 40%;">
</div>
<span class="cq-btn m-primary" id="execute-1">実行</span>
<div class="result"></div>
</div>
.attr( attributeName, value )
引数
- attributeName
- 設定したい属性名
サンプル
jQueryオブジェクトが保持しているDOM要素に属性値を設定する。
Javascript
let comments = [
'かっこいい',
'クール',
];
$('#sample-2 img').each(function(i){
$(this)
.attr('alt', comments[i])
.on('click', function(){
alert($(this).attr('alt'));
return false;
});
});
HTML
<div id="sample-2">
<div class="photos">
<img src="/resource/images/photos/2.jpg" alt="画像1" class="photo" style="width: 40%;">
<img src="/resource/images/photos/3.jpg" alt="画像2" class="photo" style="width: 40%;">
</div>
</div>
.attr( map )
引数
- (object)map
- {属性: 属性値, 属性: 属性値, ...}のようなハッシュを渡すとまとめて設定できる。
.attr( attributeName, function(index, attr) )
functionの戻り値が属性値として設定される。