しんやBlog: jQuery1.6 attrとpropについて

今日、jQuery1.6出ましたね。

jQueryはバージョンが変わるたびに微妙に仕様が変わますね！
話はそれますが、先日も業務で$.ajaxを使っていたところ、1.4からserializeメソッドの挙動が変わったらしく、ものすごーくハマりました（別起票で書きます）。

話はそれましたが…1.6からattrの挙動が変わり、新しくpropメソッドが追加されました。

詳しくは本家にありますので、そちらもご参照ください。

※attrでの属性書き換えは、1.6.1になってから後方互換になりました。
なので、1.6.1を使えば問題は起きなさそうです。

・1.6からattrメソッドの戻り値が変わる
こんなhtmlがあった場合

<input type="checkbox" id="hoge1" checked="checked"/>

1.6より前

var hoge = $("#hoge1").attr("checked");
// 戻り値は、ブール値「true」
hoge === true;

1.6以降

var hoge = $("#hoge1").attr("checked");
// 戻り値は、文字列「"checked"」
hoge === "checked";

ただし、htmlにchecked属性が書かれていない場合（後から画面上でチェックを付けたりしても）
戻り値は、undefinedとなる！

<input type="checkbox" id="hoge1" />

var hoge = $("#hoge1").attr("checked");
// 戻り値は、文字列「undefined」
hoge === void(0);

・attrの代わりに、propメソッドを使うと…
propメソッドを使うと、戻り値がブール値で返ってきます。

チェックされてる場合

var hoge = $("#hoge1").prop("checked");
// 戻り値は、ブール値
hoge === true;

チェックされてない場合

var hoge = $("#hoge1").prop("checked");
// 戻り値は、ブール値
hoge === false;

チェック／非チェックの書き換えも簡単にできます

// チェックを付ける
$("#hoge1").prop("checked", true);
$("#hoge1").prop({checked:true});

// チェックを外す
$("#hoge1").prop("checked", false);
$("#hoge1").prop({checked:false});

・その他注意すること
1.セレクタで複数要素取得した場合、each等使い一個一個処理をする！
propメソッドは、「セレクタで複数要素を取得した場合、最初にマッチした要素しか処理しないよ！」とあるので、複数要素を処理したい場合は$.eachとかを使うようにする。

<form method="GET">
 <input type="checkbox" id="hoge1" />
 <input type="checkbox" id="hoge2" checked="checked"/>
 <input type="checkbox" id="hoge3" />
</form>

$.each($("input"), function() {
    $(this).prop("checked", true);
});

2.IE9より前のバージョンだと、使い方によってメモリーリークが起きるかも問題
詳しくは、ここを参照してください。
DOM要素がdocumentから削除されるより前に、対象のプロパティーが削除(.removeProp()とか使って)されてない場合、DOM要素のプロパティをプリミティブ型（数値、文字列、ブール値）以外にセットするのに.propメソッドを使うとメモリーリークが起きるっぽい
（Macだから試せないけど。誰かWindows使ってる人試してください）。
IEでメモリーリークを引き起こしたくなかったら、dataメソッド（DOM要素にメタデータを持たせるアレです）を使うと安全みたいです。

2011/05/04

jQuery1.6 attrとpropについて