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頂著用。

Published 15 January 2009 02:21 PM 由 Jeffrey
Filed under: ,


意見

# jaceju said on 14 January, 2009 11:31 PM

讚~版主介紹的真詳細~

早上就已經拿 1.3 來放在專案上測試了~速度真的沒話說~

# wangaguo said on 14 January, 2009 11:42 PM

看到這篇馬下就去下載去版了, 我英文不好, 謝謝您的介紹.

# mOMo said on 17 January, 2009 12:57 AM

如果要套上目前的專案不知道可不可行,還是要等下一個新專案在用1.3版的呢?

『如果還有Selector [@attr]的古早寫法,請將@移除』

之前寫的都有加@,那現在如果用1.3版的,有加是不是沒有用呢?

# Jeffrey said on 17 January, 2009 03:12 AM

to mOMo, 1.2.6 span[attr]與span[@attr]的結果相同,在1.3寫span[@attr]不只沒用,還會發生Error。

# mOMo said on 17 January, 2009 04:43 AM

呵,所以目前這個案子先掛1.26版吧!^_^

不過這個案子結案日還有半年= =",沒機會用1.3囉!

# mOMo said on 18 January, 2009 05:20 AM

不過,Live Event跟下面這個Plugin感覺很像是相同的功能,應該是被jQuery「併購」了吧!呵

brandonaaron.net/.../livequery

# Ark said on 23 January, 2009 01:43 AM

短命的版本~1.3.1出了@@

Selector [attr]~對IE8 bata2不太支援

$('a[innerText="XX"]')[0] 抓不到 IE7 ok

變成 要這樣$('a[innerText="XX"]').prevObject[0]

還有$get('') document.getElementById 在JS變成分大小寫~document.getElementById 在vbscript還是不分

不知正式版會修正否

# Jeffrey said on 23 January, 2009 03:14 PM

to Ark, innerText並非跨瀏覽器的用法,如果要比對文字內容,比較常用的寫法是$("a:contains('XX')"),但contains是包含就算數,如果要比對完全相同,可能要自訂Selector,請看我最新的貼文。

# mimic said on 04 March, 2009 09:02 AM

可以請教您依個問題麼 ?

我想動態改變 radio name , firefox 可以但ie卻不行 !

以下是程式碼

--------------------------------------------------------------

<script type="text/javascript" src="jquery.js"></script>        

<script type="text/javascript">  

$(document).ready(function() {

$("#btn").live('click',function(){

$("#show").append("<tr><td><input type='radio' name='r1' value='Y'>Y"

+"<input type='radio' name='r1' value='N'>N</td></tr>");

$("#show tr").each(function(i){

var counter = i+1;

$(this).find("input[type='radio']").each(function(){

$(this).attr("name","r"+counter);

alert($(this).attr("name"));

});

});

});

});

</script>

<br><input type='button' id='btn' value='新增Radio'>

<table id='show' border='1'>

<tr><td>

<input type='radio' name='r1' value='Y'>Y

<input type='radio' name='r1' value='N'>N

</td></tr>

</table>

-------------------------------------------------------------

# Jeffrey said on 04 March, 2009 05:18 PM

to mimic, 試了一下,在IE7中,事後更改radio的name看來無法改變radio的群組性,我想可以改成以下的寫法避開,也更簡潔有效率(不用每次全部重設所有radio的name)。

var c = $("#show tr").length + 1;

$("#show").append("<tr><td><input type='radio' name='r" + c  + "' value='Y'>Y<input type='radio' name='r" + c + "' value='N'>N</td></tr>");

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 

請輸入以上的數字:

搜尋

Go

<January 2009>
SunMonTueWedThuFriSat
28293031123
45678910
11121314151617
18192021222324
25262728293031
1234567
 
RSS
【工商服務】

Tags 分類檢視
關於作者

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

文章典藏
其他功能

這個部落格


BlogLook Score and Rank

Syndication