TRY AND ERROR

気になったこと、勉強したこと、その他雑記など色々メモしていきます。。Sometimes these posts will be written in English.,

【jquery】propとattr

既出でいまさら感満載ですが、試してみたのでカキコ。。
(jquery-version:1.11.3)

attrとpropは両者とも属性を扱うjqueryメソッドで、
いろいろなサイトでこんな風に紹介されていますね。

prop

javascriptのプロパティ値を取得

attr

HTMLの属性値を取得


例えば、checkboxのチェック有無を取得するとこのようになる。

prop

- チェックあり
true
- チェックなし
false

attr

- チェックあり
"checked"
- チェックなし
undefined


propはcheckしたかどうかをjavascriptのプロパティ値に沿った真偽値で返すのに対し、
attrはcheckedとうい属性の値を取得しており、チェックなしの時はcheckedという属性
自体が無いのでundefinedとなるようです。



次のようなカスタム属性(arg)を扱うケースでは、attrでは取得できるものの
javascriptのプロパティ値として用意されていないのでpropでは取得できずにundefinedとなります。

<div id="test" arg="argument"></div>


ちなみに、propでもむりくりやれば取得できます。

console.log($("#test").prop("attributes")["arg"].nodeValue);

...result:"argument"

結局、propはcheckboxやselectbox、radiobuttonなどの設定値を
取得したい時に使い、それ以外の属性操作はattrでいいんじゃないでしょうか。。。


おまけ

カスタム属性を扱う場合dataメソッドを使うのがスマートかと思います。

<div id="test" data-arg="argument"></div>
console.log($("#test").data("arg"));

...result:"argument"