jQuery升級 – 1.3

JQuery目前已經發布到1.3.1版本，但1.3.1版只是對1.3版存在 的部分bug進行了修正，沒有功能上的變化。

JQuery1.3的升級主要是內部實現的改變，重寫了此前存在效率瓶甄的方法。官方的測試結果表明，1.3的效能有了很大的提高，主要表現在選取器、事件綁定、DOM動態修 改、offset方法的位移量計算和動畫。具體如下：

• Sizzle Selector Engine

JQ1.3中CSS選取器已經單獨分離出來，命名為Sizzle JavaScript Selector Library，並啟動了一個新的項 目，目的在於聯合主流的架構開發人員來參與開發，讓架構的選取器使用更統一、更高效。目前已經有Prototype, Dojo, Yahoo UI, MochiKit, and TinyMCE等等加入此項目開發。

• live Events

Event對象中增加了live和die兩 個方法，支援了對新增元素的事件"自動綁定"。

• jQuery Event Object

新的Event對象更接近W3C的標準，瀏覽器的相容性更好。

• HTML Injection Rewrite

HTML插入方式（例如append, prepend, before, after）大範圍重寫。在複雜的jquery程式中，HTML插入效率是一個很大的瓶甄。1.3版本重寫了內部實現，提高了這些方法的運行效率，但此前 的API沒有更改。

DOM建立方法的變化：

$("<script/>")等同於$("<script></script>")

• Offset Rewrite

Offset 方法重寫，目的在於提高此方法的效率和瀏覽器的相容性。

• No More Browser Sniffing

瀏覽器特性的判斷，這是1.3版中最大的一個改變。傳統的做法是對用戶端瀏覽器的類型和版本做探測，然後針對不同瀏覽器做代碼的相容。一旦瀏覽器升 級或者解決某些BUG，就可能造成某些特性的改變，造成此前我們的JS代碼不相容。

在主流JS架構中，Jq1.3採用了新的探測方法，具體見jQuery.browser。

原理：JQ在初始化的時候自動建立一個DOM節點，各個瀏覽器會根據自己的特性來渲染此節點。

1. <div>
2. <link/>
3. <table></table>
4. <a href="/a" style="color:red;float:left;opacity:.5;">a</a>
5. <select>
6. <option>text</option>
7. </select>
8. <object>
9. <param/>
10. </object>
11. </div>

然後針對被渲染過的此節點探測瀏覽器的支援特性，例如：

//對tbody的支援（IE下會自動插入tbody節點）

tbody: !div.getElementsByTagName("tbody").length

//對opacity的支援

opacity: a.style.opacity === "0.5"

這樣就不用擔心瀏覽器升級造成的

注意：JQ1.3推薦使用$.support方法，但此前的$.browser方法還會一直相容下去，因為很多代碼和plugin已經依賴此方法。

• 壓縮

JQ不再提供packed版本了。（此前是用Dean Edwards' Packer提供的Base壓縮）：

1、 壓縮版本不利用調試

2、 壓縮版本不能相容所有運行環境（例如AIR和Caja-capable）

3、 雖然壓縮版本的檔案小了，但在瀏覽器裡解壓縮更消耗，相比minified版本，它在頁面中的載入時間更長。

JQ目前的minified版本是使用YUI Compressor進行壓縮的。

升級1.3的風險：

JQ1.3已經盡量減小了升級帶來的風險，盡量保持了1.2.6版公布出來的API。

如果你要升級到1.3，那麼需要閱讀下面的潛在危害列表，避免造成你原有的程式出現異常。

如果你使用的plugin出現了問題，那麼你首先需要查看此plugin是否有針對1.3版本的升級版。目前JQ UI和validate Plugin已經相容了1.3。

1. 自1.2版本以後，JQ的屬性選取器支援了[@attr]和[attr]兩種寫法，但1.3徹底廢除了[@attr]文法。

2. Trigger()觸發事件會遵循DOM樹預設的冒泡機制，而此前版本中triggre()是不會觸發冒泡的。如果需要阻止冒泡，可使用 stopPropagation()方法，或者在事件處理函數中返回false。（如果需要把你的程式升級到1.3的庫，那麼你需要小心地檢查以前 trigger方法的使用。）

3. ready()方法不再保證等待頁面中所有的CSS檔案載入完成，再執行指令碼。因此，我們需要主動將頁面內的CSS檔案放置在指令碼之前。

4. 簡化了isFunction的處理，提高了函數的效能。

注意：在1.3中，比如alert和DOM的getAttribute方法，不能保證在所有瀏覽器中都被檢測出來，例如IE。

5. $("a,b,c")形式的選取器可能有變化。支援querySelectorAll的瀏覽器（例如Safari, Firefox 3.1+, Opera 10+, IE 8+）會按照文檔流中的順序返回匹配的元素，其他瀏覽器會按照選取器中指定的順序返回。在將來1.3.x的升級版以後，此類型的選取器匹配到的元素會按照 文檔流順序返回。

6. 你需要確保你的頁面在標準模式下運行。在quirks模式下，目前有部分方法功能是不正常的。（包括safari下出現的選取器錯誤）

不贊成繼續使用下面的屬性，贊成使用jQuery.support

1. jQuery.browser
2. jQuery.browser.version
3. jQuery.boxModel

• 下面的瀏覽器還沒有支援：

Safari 2

部分API的變化Core

• 新的ququeing方法，可以管理存在的隊列（例如動畫隊列）
• 給JQ對象增加兩個屬性.selector和.context，引用第一個jQuery()調用中的selector和context

Selectors

• CSS選取器被分離出來，API沒有變化，更多進階選取器開始支援複雜的選取器文法，例如+ ~ >。

Attributes

• .toggleClass( "className", state ) --增加了一個布爾類型的參數，標識是否切換className

Traversing

• .closest(selector) -- 新增方法，從元素本身開始向父級一層層匹配selector元素，返回最先匹配到的元素。（注意，是從自身元素開始匹配）

• .is（）方法已經支援複雜選取器，例如+ ~ >。

Manipulation

• 簡化了空DOM節點的建立文法，例如：

$("<script/>")等同$("<script></script>")

Events

• LiveEvents 提供了live和die兩 個方法來"自動綁定"元素事件
• Trigger() 此方法觸發事件，會按照DOM樹的預設冒泡。

Effects

Changes:

• 預設的動畫效果更平滑。傳統的方法只針對高寬和透明度做動畫。現在margin和padding屬性也支援動畫了。
• 沒有提供duration參數的動畫會直接執行到動畫結束狀態。
• .toggle(Boolean) 添加了一個布爾類型的參數，便於更加方便地控制元素顯示。true為顯示，false為隱藏。
• jQuery.fx.off - 新增此新屬性，用于禁止/啟用所有的動畫效果。

Ajax

• ajax()方法的options中新增dataFilter屬性 可以對返回的資料進行預先處理，便於success回調中接使用序列化的data。

Utilities

• 新增isArray的數組判斷方法。

轉載地址:www.v-sky.com/blog/