jQuery 1.3來了!!
jQuery於2009/01/14釋出1.3版!!
看了一下發行文件,這次的改版有幾大特色:
- Selector引擎大換血:
代號為Sizzle的新版引擎,比前一個版本1.2.6速度提高49%,跟Prototype、MooTools、Dojo相比,目前jQuery1.3是最快的。值得一提的是,Sizzle是個獨立Selector引擎,並非jQuery獨有,未來在其他AJAX Framework裡也可以看到它的身影。 - Live Events:
以往在使用jQuery .bind()時只能侷限於設定當下已存在的元素,而live()則可以包含未來!!
例如: 當我們宣告在所有".clsClick"元素上用live()綁上click事件,意思是將來才出現的".clsClick"也將適用!! 因此如下例中,BBB是live()後才加上class="clsClick",一樣會對click有反應。live()省去了過去元素搬家或新增時總要反覆重bind的煩人工程,是一大突破。
<script type="text/javascript">
$(function() { $(".clsClick").live("click", function() { alert("Clicked!"); }); $("div").addClass("clsClick"); });
</script>
<div class="clsClick">AAA</div>
<div>BBB</div>
- jQuery.Event重構:
jQuery的Event物件重新改寫過,加入更多W3C對事件物件的定義,當然,可跨瀏覽器使用。
- HTML字串轉元素效率提升:
jQuery裡"給HTML字串變元素"的特性(例如用於after(), append()時)十分好用,但效率不佳,常變成效能上的瓶頸,1.3版重新改寫後,速度提高六倍。另外,建立DOM物件如$("<script />")的速度現在跟$(document.createElement("script"))一樣快。
- Offset重寫:
求取元素座標的函數offset()重寫過了,排除了跨瀏覽器的問題,而且也快了三倍。
- 不再使用Browser版本判別技術:
為了解決跨瀏覽器的問題,傳統的解法會偵測瀏覽器版本,假設某一版本特性如何如何,再見招拆招。但如果瀏覽器改版或是修掉某個Bug,見招拆招的邏輯肯定就得再調整,不勝其擾。因此jQuery試圖用另一種概念,以偵測瀏覽器是否支援某個功能代替由瀏覽器版本推論其支援功能,如此能更貼近實務也更有彈性。新物件jQuery.support提供了瀏覽器是否支援某些特性的資訊,但jQuery.browser仍會持續存在。
另外,1.3版本有些更動是換版時必須修改程式配合的:
- 如果還有Selector [@attr]的古早寫法,請將@移除
- 使用jQuery觸發的事件,會沿著parents(),Bubble-Up到整個DOM Tree。如以下的例子: jquery-1.2.6.js時只會alert('dIn'),但若用的是jquery-1.3.js,則會依序看到dIn, dMid, dOut。
<script type="text/javascript">
$(function() { $("#TestZone div").click(function() { alert(this.id); }); $("#dIn").click(); });
</script>
<div id="TestZone">
<div id="dOut"><div id='dMid'><div id="dIn">IN</div></div></div>
</div>
- jQuery.isFunction()基於效能及簡單化修改邏輯,內建函數(如alert)及DOM方法(如getAttribute())可能不被判定為函數。
- $("a,b,c")傳回的結果改為一律依元素在文件中的順序,不再受a,b,c排列的影響。
- trigger/triggerHandler不再接受放在陣列中的event物件,請改為直接傳入。另外,未寫在文件中的函數extra已刪除。
- jQuery.event.trigger不再傳回Handler傳回的物件,而改為傳回true/false。
- 請使用Standards Mode檢視使用jQuery的網頁,在Quirks Mode時可能會有問題。
最後再整理一下1.3版的一些補充特色:
- Selector :not()支援複合式語法,例如: :not(a,b), :not(div a)現在都可以用了。
- .toggleClass("className", true/false); 可以依條件設定或取消。
- .closest( selector )在父系元素中找到最近的特定元素,例如: 找到包住元素的最內層tr,過去我常寫成.parents("tr:first"),現在可以直接用.closest("tr")
- .is()支援複合式語法,例如: .is("div a")
- .show()/.hide()改寫過,加快2.5倍。
- show/hide/toggle/slideDown/slideUp/slideToggle除了width, height, opacity變化外,又多加了margin與padding,動畫效果也較為順暢。
- .toggle(true/false)依條件決定show/hide,就是之前有篇文章討論條件化show/hide時所肖想的功能,現在內建了。
- jQuery.fx.off可以用來關閉動畫過程特效,省略炫目的視覺效果讓網頁在效能不佳的裝置上能操作得更順暢一些。
- Ajax settings中多了dataFilter callback可以用來過濾傳回內容,排除一些有害或無用的內容。
- Ajax settings多了xhr可傳入自訂的XMLHttpRequest物件,方便開發者做進階操控。
- Ajax/load傳參數給server時,原本只能給key/value,現也可直接給字串當參數
- jQuery.isArray()新函數,可以用來檢測是否為陣列。
注意: 由於官方版的jquery-1.3-vsdoc.js還未釋出,因此在Visual Studio 2008中使用jQuery 1.3,Javascript Intellisense會有問題,不過不到24小時就已有強者釋出了解決方案,急用的人可以到Jamse的Blog下載jQuery 1.3 intellisense header file存成jquery-1.3-vsdoc.js頂著用。