jQueryで属性・プロパティを取得、変更するメソッド【attr、prop、val】

こんにちは、はとむぎです。
初心者向けjQueryメソッド紹介の第三回です。

第一回と第二回はこんな感じでした。

今回

今回は、jQueryの数あるメソッドの中で、「hrefやsrc、checkedなどの属性・プロパティに関するもの」を紹介しようと思います。

今回は以下の流れで解説していこうと思います。

• 各メソッドの概要
  • attr、prop
  • val
• attrとpropの違い
• 使い方
• まとめ

それでは早速いきましょう。

各メソッドの概要

attr、prop

attrは、指定の属性に値を設定、または設定されている値を取得します。ちなみに、attrというメソッド名は属性という意味の英語「Attribute（アトリビュート）」から来ています。
attr – リファレンス

propは、指定の属性プロパティに値を設定、または設定されている値を取得します。ちなみに、propというメソッド名は性質という意味の英語「Property（プロパティ）」から来ています。
prop – リファレンス

val

valは、要素のvalue値の取得、設定を行います。ちなみにメソッド名は言うまでもなく「value」から来ています。
val – リファレンス

attrとpropの違い

この２つのメソッドはよく似ていて、書き方次第ではどちらでも同じことが実現できたりするのですが、内部的な仕様や返す値が違います。

そもそもHTMLタグには、A=Bとなる「属性（href、class等）」と、Aしかない「プロパティ（checked、disable等）」の2種類があります。このうち前者の属性はattr、propどちらでも値が取れますが、後者のプロパティはpropで取らないと問題が起こる場合があります。

後でまた使い方は解説していきますが、取れる値も微妙に違います。attrは純粋に属性やプロパティの内容を返すのに対し、propは属性やプロパティの状態を返します。結論としては、hrefやsrc等の属性には「attr」、checkedやdisabledなどのプロパティには「prop」が適しています。

例えば、下のコード右側のチェックボックスを何度かクリックしてみてください。

See the Pen Attrでは今のチェック状態は取れない by はとむぎ (@hatomugi_s) on CodePen.

チェックが外れているときも「checked」が返ってくると思います。これはattrが単純にcheckedという属性（やプロパティ）を返しているからです。対して、propはどうでしょう。同じ様に何度かクリックしてみてください。

See the Pen propでは今のチェック状態が取れる by はとむぎ (@hatomugi_s) on CodePen.

trueやfalseが返ってくると思います。そして、これは今のチェック状態に正しく連動しています。propはこのように属性（やプロパティ）の状態を返します。なので、checked等に向いているというわけです。

ここまでのまとめ：基本的には「attr」、checked等のプロパティには「prop」

使い方

基本的な動作について解説します。下記の構文の通りです。

// attr
// 属性・プロパティを取得
$('target').attr( attrOrProp );
// 属性・プロパティを設定
$('target').attr( attrOrProp, value );

// prop
// 属性・プロパティを取得
$('target').prop( attrOrProp );
// 属性・プロパティを設定
$('target').prop( attrOrProp, value );

// val
// valueを取得
$('target').val();
// valueを設定
$('target').val( value );

target：
動作を行う対象となるHTML要素です。複数の要素を指定した場合、最初にヒットした要素のものだけを取得・設定します。複数要素に行いたい場合はeachやmapを使いましょう。

attrOrProp：
属性名かプロパティが入ります。

value：
ここに入れた値が設定されます。

実際の使い方は以下のようになります。

// img要素のsrcを取得
let src = $('img').attr('src');
// a要素のhrefを変更
$('a').attr('href', 'https://google.com');

// ラジオボタンのチェック状況を取得
let isChecked = $('.radio').prop('checked'); // true or false
// ラジオボタンをチェックする
$('.radio').prop('checked', true);
// ラジオボタンのチェックを外す
$('.radio').prop('checked', false);
// disabledとかも設定・解除できます
$('button').prop('disabled', false); // disabled解除

// セレクトボックスの値を設定
$('select').val('value'); // 当然この時selectedがtrueになります

ちょっと応用。マウスオーバーで画像のON/OFFを切り替える。

$('img').hover(function(){ // 画像にマウスオーバーしたとき
  let repl_src = $(this).attr('src', replace('_off', '_on')); // _offを_onに置き換えたsrcを保存
  $(this).attr( 'src', repl_src ); // それを設定
});

// 画像の部分を1行で書くとこうなる
$(this).attr( 'src', $(this).attr('src', replace('_off', '_on')) );;

まとめ

僕の経験だと、attrはURLを変更したり属性が何かを確認したり、結構いろんなところで使う印象です。また、propも意外と使う機会は多く、ちょっと便利なフォームを作ろうとおもったら使う場面は多いです。valもフォーム関係が多いですね。

このあたりを覚えておくと結構便利なので、使い方は追々でいいので存在だけでも覚えておきましょう。