jQueryで属性・プロパティを取得、変更するメソッド【attr、prop、val】
こんにちは、はとむぎです。
初心者向けjQueryメソッド紹介の第三回です。
第一回と第二回はこんな感じでした。
【初心者向け】jQueryで表示・非表示を制御するメソッド【show、hide、fade、slide】
初心者の方へ向けて、jQueryでよく使われる「表示・非表示」に関するメソッドについて詳しく解説していきます。
jQueryでclassを追加・削除するメソッド【addClass、removeClass、hasClass】
初心者の方へ向けて、jQueryでよく使われる「クラスの追加・削除に関する、クラスを持っているかどうか判定する」メソッドについて解説していきます。
今回
今回は、jQueryの数あるメソッドの中で、「hrefやsrc、checkedなどの属性・プロパティに関するもの」を紹介しようと思います。
今回は以下の流れで解説していこうと思います。
それでは早速いきましょう。
各メソッドの概要
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もフォーム関係が多いですね。
このあたりを覚えておくと結構便利なので、使い方は追々でいいので存在だけでも覚えておきましょう。