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().append(str);
});
HTML
<div id="sample-1">
<span class="cq-btn m-primary" id="execute-1">実行</span>
<div class="photos">
<img src="/resource/images/photos/10.jpg" alt="画像1" class="photo" style="width: 30%;">
<img src="/resource/images/photos/11.jpg" alt="画像2" class="photo" style="width: 30%;">
<img src="/resource/images/photos/12.jpg" alt="画像3" class="photo" style="width: 30%;">
</div>
</div>
.attr( attributeName, value )
引数
- attributeName
- 設定したい属性名
サンプル
jQueryオブジェクトが保持しているDOM要素に属性値を設定する。画像をクリックでaltの値を表示する。
Javascript
let comments = [
'かっこいい',
'クール',
'びゅーてぃふぉー'
];
$('#sample-2 .photo').each(function(i){
$(this)
.attr('alt', comments[i])
.on('click', function() {
alert($(this).attr('alt'));
return false;
});
});
HTML
<div id="sample-2">
<img src="/resource/images/photos/10.jpg" alt="画像1" class="photo" style="width: 30%;">
<img src="/resource/images/photos/11.jpg" alt="画像2" class="photo" style="width: 30%;">
<img src="/resource/images/photos/12.jpg" alt="画像3" class="photo" style="width: 30%;">
</div>
.attr( map )
引数
- (object)map
- {属性: 属性値, 属性: 属性値, ...}のようなハッシュを渡すとまとめて設定できる。
.attr( attributeName, function(index, attr) )
functionの戻り値が属性値として設定される。