John Resig「jQuery1.5.2から1.6.1へのアップデートでattr()のコードを書き換える必要はない」
jQuery1.6が出たとき、attr()の動作が変わっていてひと悶着あったんですが、このほどその辺が考慮された1.6.1が出ました。ひゃっほぅ
まぁ僕はなぜかjQuery1.2.6を使い続けているので対岸の火事だったわけですが。
1.5.2から1.6へのアップデートで.attr('checkbox')の真偽判定がひっくり返る
こんなチェックボックスがあったとき
<input id="cb" type="checkbox" checked>
1.5.2までと1.6で動作が変わります
if ($('#cb').attr('checked')) { // 1.5.2までは実行されたが、1.6では実行されない }
1.5.2以前ではtrueが返っていたのに、1.6で''(空文字)が返るようになった
そりゃ真偽判定もくつがえりますね。どういうことかというと・・・
.attr('checked')が返す値の変遷
先にあげたようなcheckboxを.attr('checked')したときの戻り値をまとめると以下のようになります。
| 1.5.2以前 | 1.6 | 1.6.1 |
| true (boolean) | '' (string) | 'checked' (string) |
1.6で.prop()メソッドが追加されこれまでいっしょくただった属性とプロパティの扱いが明確に分けられた
- .attr() 属性を扱う
- .prop() プロパティを扱う
なんで1.6で空文字が返るようになったのか
たとえば <input type="checkbox" id="cb1" checked> の場合。
- checked 属性はあるものの、値はない
- しかしながらプロパティとしての checked は true である
という状態です。
1.5.2までは属性とプロパティがごっちゃになっていて.attr()でプロパティのtrueが取得できていたのが、1.6でちゃんと属性の値が変えるようになっちゃったってことですね。
たすかった！ 1.6.1で、は戻り値が '' → 'checked' になった
<input type="checkbox" id="cb1" checked="checked"> 的な扱いですね。
このおかげでif文が今までどおり動作するようになりました。
なのでみんな安心してupdateできます
↓みたいな事をしているエセLinterはプギャーーーー
if ($('#cb').attr('checked') === true) { }
新しく追加された .prop() メソッドって？
.prop()メソッドはboolean型であるかhtml上には存在しない属性やプロパティのために使ってね。
その他すべての属性(htmlに書かれるもの)は引き続き.attr()メソッドで操作できるし、そうすべきだよ。The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location).
All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.
