先推薦黑暗執行緒的 jQuery 1.6 筆記。看完就不用看官方的 JQUERY 1.6 RELEASED 了。看到 .attr() 和 .prop() 臉都綠了,慘,一堆東西要爆了。自己沒爆,也難保第三方的 jQuery Plugin 沒爆。
延續黑暗執行緒的測試, 1.6 版才有 .prop() :
<input id="checkbox1" type="checkbox" > <script> alert($('#checkbox1').attr('checked')); // 1.6 => undefined, 1.5.2 => false alert($('#checkbox1').prop('checked')); // false </script>
加上 checked :
<input id="checkbox2" type="checkbox" checked > <script> alert($('#checkbox2').attr('checked')); // 1.6 => 空字串, 1.5.2 => true alert($('#checkbox2').prop('checked')); // true </script>
注意 type casting 後, .attr('checked') 1.6 版是 false, 1.5.2 版是 true。
加上 checked="checked" :
<input id="checkbox3" type="checkbox" checked="checked" > <script> alert($('#checkbox3').attr('checked')); // 1.6 => checked, 1.5.2 => true alert($('#checkbox3').prop('checked')); // true </script>
改用 .attr('checked', true) :
<input id="checkbox4" type="checkbox" > <script> $('#checkbox4').attr('checked', true); // 1.6 => 成功勾選, 1.5.2 => 成功勾選 alert($('#checkbox4').attr('checked')); // 1.6 => checked, 1.5.2 => true alert($('#checkbox4').prop('checked')); // true </script>
改用 .attr('checked', 'checked') :
<input id="checkbox5" type="checkbox" > <script> $('#checkbox5').attr('checked', 'checked'); // 1.6 => 成功勾選, 1.5.2 => 成功勾選 alert($('#checkbox5').attr('checked')); // 1.6 => checked, 1.5.2 => true alert($('#checkbox5').prop('checked')); // true </script>
改用 .attr('checked', '') :
<input id="checkbox6" type="checkbox" > <script> $('#checkbox6').attr('checked', ''); // 1.6 => 成功勾選, 1.5.2 => 未勾選 alert($('#checkbox6').attr('checked')); // 1.6 => 空字串, 1.5.2 => false alert($('#checkbox6').prop('checked')); // true </script>
注意 .attr('checked', '') 1.6 版是勾選, 1.5.2 版是不勾選。 .attr('checked', '') 後再用 .attr('checked') 把值取出來, 1.6 版和 1.5.2 版 type casting 結果都是 false 。
改用 .prop('checked', true) :
<input id="checkbox7" type="checkbox" > <script> $('#checkbox7').prop('checked', true); // 成功勾選 alert($('#checkbox7').attr('checked')); // undefinded alert($('#checkbox7').prop('checked')); // true </script>
預設 checked ,再用 .attr('checked', false) :
<input id="checkbox8" type="checkbox" checked > <script> $('#checkbox8').attr('checked', false); // 1.6 => 成功取消勾選, 1.5.2 => 成功取消勾選 alert($('#checkbox8').attr('checked')); // 1.6 => undefined, 1.5.2 => false alert($('#checkbox8').prop('checked')); // false </script>
用開發人員工具觀察, 1.6 版 <input> 上的 checked attribute 直接被移除, 1.5.2 版的 checked attribute 還在。
預設 checked="checked" ,再用 .attr('checked', false) :
<input id="checkbox9" type="checkbox" checked="checked" > <script> $('#checkbox9').attr('checked', false); // 1.6 => 成功取消勾選, 1.5.2 => 成功取消勾選 alert($('#checkbox9').attr('checked')); // 1.6 => undefined, 1.5.2 => false alert($('#checkbox9').prop('checked')); // false </script>
與「預設 checked ,再用 .attr('checked', false) 」相同, 1.6 版 <input> 上的 checked attribute 直接被移除, 1.5.2 版的 checked attribute 還在。
預設 checked ,再用 .prop('checked', false) :
<input id="checkbox10" type="checkbox" checked > <script> $('#checkbox10').prop('checked', false); // 成功取消勾選 alert($('#checkbox10').attr('checked')); // 空字串 alert($('#checkbox10').prop('checked')); // false </script>
預設 checked="checked" ,再用 .prop('checked', false) :
<input id="checkbox11" type="checkbox" checked="checked" > <script> $('#checkbox11').prop('checked', false); // 成功取消勾選 alert($('#checkbox11').attr('checked')); // checked alert($('#checkbox11').prop('checked')); // false </script>
所以 .prop() 就是 1.6 版以前的 .attr() 。
而 1.6 版 .attr() 大致和 DOM 物件的 getAttribute() 、 setAttribute() 相同。目前已知不同有:
- .attr('checked', true) 會設定 checked="checked" ,也就是執行的是 setAttribute('checked', 'checked') 。 .setAttribute('checked', true) 結果應是 checked="true" 。
- .attr('checked', false) 會將 checked attribute 移除,也就是執行的是 removeAttribute('checked') 。 .setAttribute('checked', false) 結果應是 checked="false" 。
上面測試需特別注意的是:
- <input type="checkbox" checked > 考量 type casting 後, .attr('checked') 1.6 版和 1.5.2 版結果恰恰相反。
- 1.6 版 .attr('checked', '') 結果是勾選,因為 HTML 中 <input type="checkbox" checked > 就已經勾選, checked 不需要有值。另注意 .attr('checked', '') 後用 .attr('checked') 取出是空字串, type casting 結果是 false 。
升級 jQuery 1.6 較佳方式是把程式碼中的 .attr( 皆改為 .prop( 。
如果製作的是以 jQuery 為基礎的第三方函式庫,例如 jQuery Plugin ,想同時支援 1.6 版和 1.6 之前版本,可以這樣做:
- 將程式碼中的 .attr( 接替換為 .prop( 。
- 在程式碼最上方加上:
if(!$.prop) $.fn.prop = $.fn.attr;
http://blog.xuite.net/vexed/tech/44905647-jQuery+1.6+.attr()+%E5%92%8C+.prop()