attrとpropの 違い と 使用用途

はじめに

指定した属性の値を取得したい時に attr または propを使用するが
なぜ同じ用途のセレクタがあるのか？が疑問に思ったので調べた。

attrとpropという関数について

.attr

指定した属性の値を取得。
.attr(name) → .attr(値を取得したいプロパティを指定)
.attr(name, value) →　.attr(値を設定したい属性を指定, 設定する値を指定)

.prop

指定した属性の値を取得。
.prop(name) → .attr(値を設定したいプロパティを指定)
.prop(name, value) → .attr(値を設定したい属性を指定, 設定する値を指定)

attrとpropの違い

取得する値が違う

・attrは、属性における値 を取得
・propは、プロパティの真偽 を取得

例：チェックした値を取得

$(":checkbox").click(function() {
   alert($(this).prop('checked'));     
　　　　　　alert($(this).attr('checked'));
});

チェック時

attr　→　checked
prop　→　true

非チェック時

attr　→　undefined
prop　→　false

attrとpropの使用用途

HTMLの属性を取得する場合　→　attr
なぜなら、属性における値 を取得するから

input関連の値を取得する場合　→　prop
なぜなら、プロパティの真偽 を取得するから

参考記事

jQueryにおけるattrとpropの違いと使いドコロまとめ

コメント

実際にコードを書いて検証ツールで見るのが理解度が増すのと納得するのでオススメ
ちなみにオンラインコードエディタとやらを活用するとファイルを作成する手間が省けるので良い。