jQuery 1.6.1上場救援,不用改寫attr()囉

jQuery 1.6正式版發表不過10天,jQuery 1.6.1正式版就接著登場囉!

jQuery 1.6筆記中有特別提到.prop()/.attr()的Break Change,將導致很多使用attr(“selected”), attr(“checked”)寫法的程式爆炸,必須修改後才能套用jQuery 1.6。很顯然,這個不向前相容的決定引起開發社群強烈反彈,即便此舉是往正確方向移動,但打破相容性影響重大,成千上萬的程式必須因此修改,產生可觀的升級成本,同時這也可能導致開發人員不願升級新版jQuery,於是jQuery開發團隊從善如流,決定回歸"先研究不傷身體,再講求效果"的精神,在jQuery 1.6.1版調整.attr()存取邏輯,使其與1.5.2版本之前的做法相容。

這意味著:

$(“:checkbox”).attr(“checked”, true);
$(“option”).attr(“selected”, true);
$(“input”).attr(“readonly”, true);
$(“input”).attr(“disabled”, true);
if ( $(“:checkbox”).attr(“checked”) ) { /* Do something */ }

等寫法在jQuery 1.6.1裡可以繼續順利運作,但仍有些建議:

  1. $(window).attr(), $(document).attr()建議改為$(windows).prop(), $(document).prop(),因為window及document理論上無從加上HTML Attribute,雖然jQuery 1.6.1在內部會偷偷改用.prop(),畢竟語意不合邏輯,應該避免。
  2. 在HTML語法<input type=”checkbox” checked=”checked” />中,checked Attribute只會在一開始將checked Property設成true,後續的狀態變更及儲存都是透過checked Property。換句話說,checked Attribute只影響初值,之後應以checked Property為準。基於這個理由,$(":checkbox”).prop(“checked”, true)會比$(":checkbox”).attr(“checked”, true)來得合理。雖然jQuery 1.6.1已讓$(":checkbox”).attr(“checked”, true)也具有變更checked Property的能力,但prop()確實比attr()寫法更吻合背後的實際運作。
    適用此點的Boolean屬性包含了: autofocus, autoplay, async, checked, controls, defer, disabled, hidden, loop, multiple, open, readonly, required, scoped, selected

另外,jQuery Team提供一張DOM元素屬性適用attr()/prop()的對照表:

Attribute/Property .attr() .prop()
accesskey  
align  
async
autofocus
checked
class  
contenteditable  
defaultValue  
draggable  
href  
id  
label  
location *
multiple
nodeName  
nodeType  
readOnly
rel  
selected
selectedIndex  
src  
style  
tabindex  
tagName  
title  
type  
width **  

結論: 針對Boolean型別屬性或是沒有對應HTML Attribute者(例如: window.location)建議使用.prop(),其餘則可使用.attr()。[註: 紅色部分為可支援,但不建議使用]

歡迎推文分享:
Published 13 May 2011 08:24 AM 由 Jeffrey
Filed under:
Views: 37,684



意見

# jain said on 12 May, 2011 11:32 PM

不用砍掉重練就好~~

# Nikki said on 29 May, 2011 11:39 PM

想請問如果先前開發的Web AP, 若仍使用jQuery 1.4.x甚至1.3.x

,如果擺著不升級1.5或1.6有關係嗎?

# Jeffrey said on 30 May, 2011 12:48 AM

to Nikki, 如果沒有要引用新功能,網站只要能持續運作,升不升級是Developer的選擇 :)

# Gary said on 31 August, 2011 11:18 PM

>>checked Attribute只影響初值,之後應以checked Property為準

的確有道理,更貼近 html 的精神!但也讓開發者失去一體適用的好處!要用某個屬性前,還得先查一下該用 prop 或 attr

其實把這兩種用法統一起來,提供透通性,應該不會有什麼副作用才對?總覺得 jquery 應該要保持語法的簡潔才是。

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<May 2011>
SunMonTueWedThuFriSat
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication