HOME > > > > >

.attr()

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
取得したい属性名

戻り値

string
属性値

jQueryオブジェクトが保持している最初のDOM要素のattributeNameで指定した属性名の属性値を取得する。

サンプル

実行結果

実行
画像1 画像2 画像3

Javascript

  1. $('#execute-1').on('click', function(e) {
  2.     let str = '';
  3.     $('#sample-1 .photo').each(function(){
  4.         str += '[ALT]' + $(this).attr('alt') + '<br>';
  5.     });
  6.     $(e.target).parent().append(str);
  7. });

HTML

  1. <div id="sample-1">
  2.     <span class="cq-btn m-primary" id="execute-1">実行</span>
  3.     <div class="photos">
  4.       <img src="/resource/images/photos/10.jpg" alt="画像1" class="photo" style="width: 30%;">
  5.       <img src="/resource/images/photos/11.jpg" alt="画像2" class="photo" style="width: 30%;">
  6.       <img src="/resource/images/photos/12.jpg" alt="画像3" class="photo" style="width: 30%;">
  7.     </div>
  8. </div>

.attr( attributeName, value )

引数

attributeName
設定したい属性名

戻り値

jQuery
jQueryオブジェクト

サンプル

jQueryオブジェクトが保持しているDOM要素に属性値を設定する。画像をクリックでaltの値を表示する。

実行結果

画像1 画像2 画像3

Javascript

  1. let comments = [
  2.         'かっこいい',
  3.         'クール',
  4.         'びゅーてぃふぉー'
  5.         ];
  6. $('#sample-2 .photo').each(function(i){
  7.     $(this)
  8.     .attr('alt', comments[i])
  9.     .on('click', function() {
  10.         alert($(this).attr('alt'));
  11.         return false;
  12.     });
  13. });

HTML

  1. <div id="sample-2">
  2.   <img src="/resource/images/photos/10.jpg" alt="画像1" class="photo" style="width: 30%;">
  3.   <img src="/resource/images/photos/11.jpg" alt="画像2" class="photo" style="width: 30%;">
  4.   <img src="/resource/images/photos/12.jpg" alt="画像3" class="photo" style="width: 30%;">
  5. </div>

.attr( map )

引数

(object)map
{属性: 属性値, 属性: 属性値, ...}のようなハッシュを渡すとまとめて設定できる。

.attr( attributeName, function(index, attr) )

functionの戻り値が属性値として設定される。