jQuery 1.9升級指南(中文翻譯版)【轉】

jQuery 1.9刪除或修改了幾個過去行爲不一致或效率低下的幾個API。他們在以前的jQuery版本中已經標註過過時(deprecated)的API,特別是1.7和1.8。

在做這些變化中,團隊的目標是修復jQuery的行爲不一致或比較難使用的地方,在這個過程中提高整體性能,減小了文件的體積。

此列表是看似給你一些不祥的預感。因爲jQuery 1.9刪除和修改一些以前做特殊需求的API,比如jQuery.browser。如何升級?首先,看看你的代碼,最好的方法是嘗試用jQuery 1.9和Migrate(遷移)插件(如下文所述)。

本指南作爲標準的jQuery API文檔的附錄,作爲快速上手jQuery 1.9的引導。

 

jQuery Migrate(遷移)插件

我們認識到,現有的網站和插件可能會受到這些變化的影響,所以提供一個過渡性的升級路徑—— jQuery Migrate(遷移)插件。下面的說明中,在1.9中變化或刪除的API,大部分可以使用jQuery Migrate(遷移)插件恢復。請注意,jQuery 1.9中所有的變化也將應用到jQuery 2.0中,jQuery Migrate(遷移)插件在jQuery2.0中也是可用的。

未壓縮,開發版本的jQuery Migrate(遷移)插件使用時會在控制檯中顯示警告信息,詳細的指出不兼容或刪除等信息及解決方法。這使得它在現有的jQuery代碼和插件上查找和修復問題時非常有用。jQuery Migrate(遷移)插件包含了1.6.4以來存在但1.9已不支持所有API。

壓縮版本的的jQuery Migrate(遷移)插件,不會在瀏覽器控制檯中產生任何不兼容或刪除等信息,並且可以在jQuery 1.9或更高版本,或者舊的不兼容的jQuery代碼或插件中使用。

理想情況下,這將只能作爲一個短期的解決方案,但是這要你自己做出決定。

更多的信息請參見: jQuery Migrate plugin。

譯者注:哥過一句嘴,儘早的修改原來不兼容的代碼,畢竟使用jQuery Migrate(遷移)插件不是一個長久之計啊。

 

jQuery1.9中改變的地方

下面列表中說的並不代表jQuery 1.9中所有改變,只是我們預期的改變。完整的,詳細的更改列表,請參閱jQuery的博客或訪問bugs.jquery.com中發佈的公告。

 

.toggle(function, function, … ) 方法刪除

這個方法綁定兩個或多個處理程序到匹配的元素,用來執行交替的點擊事件。它不應該被混同於顯示或隱藏匹配元素.toggle( )方法,因爲它沒有過時。前者被刪除,以減少混亂和提高模塊化程度。jQuery Migrate(遷移)插件可以恢復此功能。

譯者注:具體查看API http://www.css88.com/jqapi-1.9/toggle-event/

 

jQuery.browser() 方法刪除

jQuery.browser()方法從jQuery 1.3開始已經過時了,在1.9中被刪除。 如果需要的話,jQuery Migrate(遷移)插件可以恢復此功能。我們建議如特徵檢測,請使用Modernizr庫。

譯者注:具體查看API  http://www.css88.com/jqapi-1.9/jQuery.browser/

 

.live() 方法移除

.live()方法從jQuery 1.7開始已經過時了,在1.9中被刪除。 我們建議使用.on()方法來替換升級你的代碼。要完全匹配$(“a.foo”).live(“click”, fn),例如,你可以寫$(document).on(“click”, “a.foo”, fn)(譯者注:因爲原來的live事件其實是綁定在文檔document上的)。有關詳細信息,請參閱.on()文檔。在此期間,你可以使用jQuery Migrate(遷移)插件來恢復.live() 功能。

譯者注:具體查看API  http://www.css88.com/jqapi-1.9/on/ 和  http://www.css88.com/jqapi-1.9/live/

 

.die() 方法移除

.die()方法從jQuery 1.7開始已經過時了,在1.9中被刪除。 我們建議使用. off()方法來替換升級你的代碼。要完全匹配$(“a.foo”).die(“click”),例如,你可以寫$(document).off(“click”, “a.foo”)。有關詳細信息,請參閱.off()文檔。在此期間,你可以使用jQuery Migrate(遷移)插件來恢復. die() 功能。

譯者注:具體查看API  http://www.css88.com/jqapi-1.9/off/ 和 http://www.css88.com/jqapi-1.9/die/

 

jQuery.sub() 方法移除

jQuery.sub()方法被移到jQuery Migrate(遷移)插件中。使用的頻率證明它沒有必要再保留在覈心代碼庫中,jQuery Migrate(遷移)插件添加了此功能。

譯者注:具體查看API http://www.css88.com/jqapi-1.9/jQuery.sub/

 

.add() 方法修改

.add()方法返回的結果總是按照節點在document(文檔)中的順序排列。在1.9之前,如果上下文或輸入的集合中任何一個以脫離文檔的節點(未在文檔中)開始,使用.add()方法節點不會按照document(文檔)中的順序排序。現在,返回的節點按照文檔中的順序排序,並且脫離文檔的節點被放置在集合的末尾。

譯者注:具體查看API http://www.css88.com/jqapi-1.9/add/

 

.addBack(selector) 替換 .andSelf()

從jQuery1.8開始,.andSelf()方法已經被標註過時,在jQuery1.8和更高版本中應使用.addBack()。

我們認爲對於“添加並返回”以前的結果集合這是一個更好的名字。新方法可以接受一個可選的選擇器,該選擇器可以用來過濾之前集合,將它添加到當前集合並返回。$(“section, aside”).children(“ul”).addBack(“aside”) 會根據他們在文檔中的順序,得到section與aside下所有ul子元素,外加所有aside元素。雖然.addSelf()在1.9中仍然可以使用,我們建議您儘快修改名稱。如果使用.addSelf(),jQuery Migrate插件會提出警告。

譯者注:具體查看API http://www.css88.com/jqapi-1.9/andSelf/ 和 http://www.css88.com/jqapi-1.9/addBack/

 

.after(), .before(), 和 .replaceWith()使用脫離文檔的節點

1.9以前,.after(), .before(), 和 .replaceWith()將嘗試在當前的jQuery集合中添加或改變節點,如果在當前的jQuery集的節點未連接到文檔(注:即脫離文檔的節點),在這種情況下,返回一個新的jQuery集合,而不是原來的那個集合。這將產生一些前後矛盾和徹底的錯誤 – 該方法可能會,也可能不會返回一個新的結果,這取決於它的參數!從1.9開始,這些方法總是返回原始未修改集並且試圖在一個沒有父節點的節點上使用.after(), .before(), or .replaceWith() 有沒有任何效果 – 即這個集或它包含的節點兩者都不被改變。

 

.appendTo, .insertBefore, .insertAfter, 和 .replaceAll

在1.9中,這些方法總是返回一個新的集合,使他們可以使用的鏈式調用和.end()方法。1.9之前,只有當他們是一個單獨的目標元素時,他們將返回舊的集合。需要注意的是這些方法總是返回所有元素附加到目標元素的聚合集合。如果沒有元素被目標選擇器選中(例如,$(elements).appendTo(“#not_found”))那麼返回的集合是空的。

 

AJAX 事件需要綁定到document

在jQuery 1.9中, 全局的AJAX事件(ajaxStart, ajaxStop, ajaxSend, ajaxComplete, ajaxError, and ajaxSuccess) 只能在document元素上觸發。修改AJAX事件監聽程序到document元素上。例如,如果目前的代碼看起來像這樣:  

1$("#status").ajaxStart(function(){ $(this).text("Ajax started"); });

 修改成: 

1$(document).ajaxStart(function(){ $("#status").text("Ajax started"); });

 譯者注:具體查看API http://www.css88.com/jqapi-1.9/category/ajax/global-ajax-event-handlers/

 

.trigger() “click” 事件時Checkbox/radio 的狀態

當用戶點擊一個複選框或單選按鈕時,如果節點上沒調用event.preventDefault(),事件處理程序中會根據複選框或單選按的當前狀態判斷並且得到它的新狀態。因此,例如,如果用戶點擊一個未選中的checkbox,事件處理程序將選中(checked)這個checkbox。1.9之前,.trigger(“click”) 或 .click()任何一個將觸發一個合成事件,根據用戶點擊行爲,我們可以看到checkbox與實際checked屬性相反的狀態。在1.9中修復了這個bug,用戶行爲會得到相應的狀態。

 

focus事件觸發順序

當用戶再表單元素上點擊或者按tab鍵,使元素獲取焦點,瀏覽器首先在焦點元素上觸發一個blur(失去焦點)事件,然後在新元素上觸發一個focus(獲取焦點)事件。在1.9之前,使用.trigger(“focus”) 或 .focus() 綁定一個focus事件,新元素將觸發一個focus事件,然後觸發先前焦點元素的blur事件,1.9已修正此問題。

如果目標元素沒有獲取焦點並且可以成功的獲取焦點(譯者注:比如disabled被禁用的表單元素獲取不到焦點),那麼使用DOM原生的focus事件,瀏覽器只訪問focus事件處理程序。jQuery總是調用.trigger(“focus”) 或 .focus()綁定的處理程序,無論元素是否獲取焦點。在jQuery 1.9中還是這樣處理的。和DOM的.focus()方法不同之處在於,在許多情況下,元素已經獲取焦點或者元素被禁用,DOM的.focus()方法不會調用事件處理程序。

不幸的是,所有版本的Internet Explorer(6-10)觸發焦點事件是異步的。當你在IE中使用.trigger(“focus”),jQuery無法“預知”異步focus事件以後會發生什麼。所以它總是會觸發一個自己的focus事件,以確保功能正常。這可能會造成focus事件重覆執行,建議改用DOM內建的focus()較單純,例如: $(“#boo”).get(0).focus()。

譯者注:具體查看API http://www.css88.com/jqapi-1.9/focus/

 

jQuery(htmlString)與jQuery(selectorString)

在1.9以前,如果一個字符串中有任何HTML標籤,那麼這個字符串將被認爲是一個HTML字符串。這有可能造成意外的代碼執行和拒絕有效的選擇器字符串。 1.9開始,以一個小於號(“<”)字符開頭的字符串才被認爲是HTML字符串。Migrate(延遲)插件可以恢復到1.9以前的行爲。

如果一個字符串被認爲是HTML,但可能會以不是一個HTML標籤的任意文本開始,將它傳遞給jQuery.parseHTML()將返回一個DOM節點數組表示的標記。我們可以通過它來創建一個jQuery集合,例如:$($.parseHTML(htmlString))。例如,在處理HTML模板方面這被認爲是最佳實踐。簡單使用文字字符串,如$(“<p>Testing</p>”).appendTo(“body”)不會受此影響。

總之:HTML字符串傳遞給jQuery(),除了以一個小於號(“<”)字符開始以外的其他字符串都將被解釋爲一個選擇器。因爲字符串通常不能被解釋爲一個選擇器,最有可能的結果是Sizzle選擇器引擎錯誤拋出的“無效的選擇器語法”。使用jQuery.parseHTML()來解析任意的HTML。

使用jQuery Migrate(遷移)插件,如果該字符串傳遞給$(),“看起來像HTML”,它會使用舊的規則來確定。

譯者注:具體查看API http://www.css88.com/jqapi-1.9/jQuery/

 

.data()中名稱包含點(“.”)改變

.data()有一個未公開並且令人難以置信的非高性能監控值的設置和獲取,1.9中被移除。這已經影響到了包含點的數據名稱的解析。從1.9開始,調用 .data(“abc.def”)只能通過名稱爲“abc.def”檢索數據,原本還可以通過“abc”取得的技巧已被取消。需要注意的是較低級別的jQuery.data()方法不支持事件,所以它並沒有改變。即使使用jQuery Migrate(遷移)插件也恢復不到原來的行爲。

譯者注:具體查看API http://www.css88.com/jqapi-1.9/data/

 

脫離文檔節點在jQuery集合中的順序

對於許多版本,幾乎所有的jQuery的方法,返回一組新的節點集合,這個集合是一個使用他們在文檔中順序排序的結果集。(有幾個方法,如.parents()返回的結果是他們在文檔反向順序排序,但在1.9中這些例外情況已經記錄並沒有改變。)

在1.9之前,若jQuery集合中混雜DOM的節點及未放進DOM的脫離文檔節點,則可能出現不可預期的隨機排序。從1.9開始,在文檔中的連接節點都總是按文檔順序放置在集合的開頭,脫離文檔節點被放置在他們的後面。即使使用jQuery Migrate(遷移)插件也恢復不到原來的行爲。

 

加載並且執行HTML內容中的scripts

在1.9之前,任何接受HTML字符串的方法(例如,$()、.append()、.wrap())會執行HTML字符串中所包含的Script,並且將它們從文檔中移除,以防止他們再次被執行。在特殊情況下,使用這些方法一個腳本可能會被移除並重新插入到文檔中,比如.wrap()。從1.9開始,插入到文檔的腳本會執行,但仍然保留在文檔中並且標記爲已經被執行過的,這樣它們就不會被再次執行,即使它們被刪除並重新插入。

儘管這種變化,在HTML標記中混合可執行的JavaScript是非常不好的習慣;它對設計,安全性,可靠性和性能有影響。例如,外部腳本標籤包含在HTML中同步地取出,然後評估執行,這可能需要大量的時間。沒有任何接口通知這些腳本何時何地加載,或者當有錯誤產生的時候獲得糾正提示。

試圖通過克隆一個現有的腳本標籤加載和注入腳本,克隆到文檔將不再起作用,因爲克隆的腳本標記已經被標記爲已執行。要加載一個新的腳本,建議使用jQuery.getScript()代替。

 

.attr() 和 .prop()對比

譯者注:@caikan的建議,在這裏將property翻譯成了“對象屬性”,以區別attributes(標籤屬性),後面括號標註了原文。

jQuery 1.6 介紹了.prop()方法設置或獲取節點上的對象屬性(property),並且不建議使用.attr()方法設置對象屬性(property)。然而版本一直到1.9,在某些特殊情況下繼續支持使用.attr()方法。當選擇器是用來區分標籤屬性(attributes)和對象屬性(properties)時,這種行爲在向後兼容的命名方面會引起混亂。

例如,一個複選框的布爾標籤屬性(attributes),如checked和disabled受到這種變化的影響。”input[checked]“的正確行爲是選擇有checked屬性的複選框,不管是它的字符串值,還是它當前的狀態。與此相反, “input:checked” 選擇當前checked屬性的布爾值(true或false)爲true的複選框,例如當用戶單擊複選框時,會受到影響。1.9之前版本這些選擇器有時不選擇正確的節點。

這裏有一些例子,當在複選框上設置一個checked屬性時正確的和不正確的使用方法;同樣的規則也適用於disabled屬性。請注意只有對象屬性(property)在所有的瀏覽器始終反映和更新的複選框的當前狀態;你很少會需要設置的屬性(attribute)。

// Correct if changing the attribute is desired

$(elem).attr("checked", "checked");

// Correct for checking the checkbox

$(elem).prop("checked", true);

// Correct if removing the attribute is desired

$(elem).removeAttr("checked");

// Correct for clearing the checkbox

$(elem).prop("checked", false);

 

input元素的特性(property)和標籤屬性(attribute)是這個歧義的另一個例子。標籤屬性(attribute)一般體現讀取HTML標記的值;屬性反映了當前值。由於.val()方法是jQuery推薦的用來獲取或設置表單元素的值的方式,這種混淆通常不會影響用戶。

 

然而,當一個選擇器,如”input[value=abc]” 被使用,它應該始終選擇的value標籤屬性(attribute)並且用戶對於對象屬性(property)沒有任何改變,例如,從這些選擇器中鍵入到一個文本輸入框。從jQuery 1.9開始,此行爲正確並且一貫的。早期jQuery版本當應該使用標籤屬性(attribute),有時會使用他們的對象屬性(property)。

jQuery Migrate(遷移)插件可以恢復原來的對象屬性(property)和標籤屬性(attribute)規則。

譯者注:具體查看API http://www.css88.com/jqapi-1.9/attr/ 和 http://www.css88.com/jqapi-1.9/prop/

 

老IE中的$(“input”).attr(“type”, newValue)

在1.9版之前, 在所有的瀏覽器中,任何企圖設置一個input或者button元素的類型(type屬性),jQuery都將拋出一個異常。這樣做時爲了符合最低標準的兼容;因爲如果你試圖改變input元素的類型,IE6/7/8拋出一個錯誤。從 jQuery 1.9開始,如果瀏覽器允許的話,我們允許您設置元素的類型。但是,你需要知道自己的代碼,在老IE(IE6/7/8)下試圖做到這一點還是會拋出一個錯誤。當你試圖設置類型屬性時,jQuery Migrate(遷移)插件會發出警告,但不會拋出一個JavaScript錯誤。

譯者注:具體查看API http://www.css88.com/jqapi-1.9/attr/

 

“hover”僞事件

從1.9開始,事件名稱字符串“hover”不再支持爲“mouseenter mouseleave”的代名詞縮寫。允許應用程序綁定和觸發自定義的”hover”事件。修改現有的代碼是一個簡單的查找/替換,並且jQuery Migrate(延遲)插件可以恢復”hover”僞事件。

譯者注:具體查看API http://www.css88.com/jqapi-1.9/hover/

 

jQuery對象上的.selector屬性

jQuery對象上過時的selector屬性保留的目的是爲了支持過時的.live()事件。在1.9中,jQuery不再試圖在鏈方法上保留這個屬性,因爲1.9已經移除了.live()事件。不要使用jQuery對象的.selector屬性。jQuery Migrate(遷移)插件也沒支持這個屬性。

譯者注:具體查看API http://www.css88.com/jqapi-1.9/selector/

 

jQuery.attr()

1.9版移除了jQuery.attr(elem, name, value, pass)方法,用jQuery Migrate(遷移)插件可恢復這個方法。

 

jQuery.ajax返回一個空字符串的JSON結果

1.9之前,一個AJAX調用預期返回JSON或JSONP的數據類型,當返回值是一個空字符串時會被認爲是成功的狀態,但返回一個null給success處理程序或承諾(promise)。從1.9開始,JSON數據返回一個空字符串被認爲是畸形的JSON(因爲它本來就是);這將拋出一個錯誤。這種情況下,使用error(錯誤)處理程序捕獲。

 

jQuery.proxy()

1.9版前,$.proxy(null, fn)、$.proxy(undefined, fn)的this會指向window,而$.proxy(false, fn)的this則指向new Boolean(false) ;1.9起若context傳入null/undefined/false,函數的this會維持原先context,不被改變。

譯者注:具體查看API http://www.css88.com/jqapi-1.9/jQuery.proxy/

 

.data(“events”)

1.9以前,如果沒有其他的代碼定義一個名稱爲“events”的數據元素,.data(“events”) 可以用來檢索一個元素上,jQuery未公開的內部事件數據結構。這種特殊的情況,在1.9中已被刪除。沒有公共的接口來獲取這個內部數據結構,

它是不公開的。jQuery Migrate(遷移)插件可以恢復原來的行爲。

譯者注:具體查看API http://www.css88.com/jqapi-1.9/data/

 

移除Event對象的部分屬性

Event對象的attrChange、attrName、realtedNote和srcElement屬性自1.7版因無法跨瀏覽器已被宣告過時;從jQuery 1.9開始,它們不再被複制到Event對象傳遞給事件處理程序。在jQuery所有版本中,這些屬性依然可以在支持他們的瀏覽器上通過event.orginalEvent存取,以取代event。jQuery Migrate(遷移)插件在Event對象有加回了這些屬性。

譯者注:具體查看API http://www.css88.com/jqapi-1.9/category/events/event-object/

 

API方法未公開的參數

1.9之前,幾個API方法未公開改變了他們的行爲的參數,並存在潛在的意外誤用。這些參數已經被刪除。受影響的方法包括jQuery.data(),jQuery.removeData(),和jQuery.attr()。jQuery Migrate(遷移)插件也不支持的代碼。

 

其他未公開的屬性和方法

下面的內部屬性和方法從未被收入到文檔,並已在1.9中刪除。

  • jQuery.deletedIds

  • jQuery.uuid

  • jQuery.attrFn

  • jQuery.clean()

  • jQuery.event.handle()

  • jQuery.offset.bodyOffset()

原文地址: http://jquery.com/upgrade-guide/1.9/

發佈了221 篇原創文章 · 獲贊 1 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章