jQuery 1.6 .attr() 和 .prop()

延伸

• jQuery 1.6.1 .attr() 和 .prop()
• JavaScript property 、 DOM property 、 HTML attribute

先推薦黑暗執行緒的 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 之前版本，可以這樣做：

1. 將程式碼中的 .attr( 接替換為 .prop( 。
2. 在程式碼最上方加上：

   if(!$.prop)
     $.fn.prop = $.fn.attr;

   http://blog.xuite.net/vexed/tech/44905647-jQuery+1.6+.attr()+%E5%92%8C+.prop()