jQuery 1.9升級指南

2014-04-03 11:01:29來源：WEB前端開發(fā)作者：愚人碼頭

jQuery 1.9刪除或修改了幾個過去行為不一致或效率低下的幾個API。在做這些變化中，團隊的目標是修復jQuery的行為不一致或比較難使用的地方，在這個過程中提高整體性能，減小了文件的體積。請看中文翻譯版本的《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（遷移）插件

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

未壓縮，開發(fā)版本的jQuery Migrate（遷移）插件使用時會在控制臺中顯示警告信息，詳細的指出不兼容或刪除等信息及解決方法。這使得它在現(xiàn)有的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中發(fā)布的公告。

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

這個方法綁定兩個或多個處理程序到匹配的元素，用來執(zhí)行交替的點擊事件。它不應該被混同于顯示或隱藏匹配元素.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()方法返回的結果總是按照節(jié)點在document（文檔）中的順序排列。在1.9之前，如果上下文或輸入的集合中任何一個以脫離文檔的節(jié)點（未在文檔中）開始，使用.add()方法節(jié)點不會按照document（文檔）中的順序排序。現(xiàn)在，返回的節(jié)點按照文檔中的順序排序，并且脫離文檔的節(jié)點被放置在集合的末尾。

譯者注：具體查看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()使用脫離文檔的節(jié)點

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

.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元素上觸發(fā)。修改AJAX事件監(jiān)聽程序到document元素上。例如，如果目前的代碼看起來像這樣：

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

修改成：

$(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 的狀態(tài)

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

focus事件觸發(fā)順序

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

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

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

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

jQuery(htmlString)與jQuery(selectorString)

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

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

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

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

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

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

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

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

脫離文檔節(jié)點在jQuery集合中的順序

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

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

加載并且執(zhí)行HTML內容中的scripts

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

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

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

.attr() 和 .prop()對比

譯者注：@caikan的建議，在這里將property翻譯成了“對象屬性”，以區(qū)別attributes（標簽屬性），后面括號標注了原文。

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

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

這里有一些例子，當在復選框上設置一個checked屬性時正確的和不正確的使用方法；同樣的規(guī)則也適用于disabled屬性。請注意只有對象屬性（property）在所有的瀏覽器始終反映和更新的復選框的當前狀態(tài)；你很少會需要設置的屬性（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）一般體現(xiàn)讀取HTML標記的值；屬性反映了當前值。由于.val()方法是jQuery推薦的用來獲取或設置表單元素的值的方式，這種混淆通常不會影響用戶。

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

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

譯者注：具體查看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（遷移）插件會發(fā)出警告，但不會拋出一個JavaScript錯誤。

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

“hover”偽事件

從1.9開始，事件名稱字符串“hover”不再支持為“mouseenter mouseleave”的代名詞縮寫。允許應用程序綁定和觸發(fā)自定義的”hover”事件。修改現(xiàn)有的代碼是一個簡單的查找/替換，并且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的數(shù)據類型，當返回值是一個空字符串時會被認為是成功的狀態(tài)，但返回一個null給success處理程序或承諾（promise）。從1.9開始，JSON數(shù)據返回一個空字符串被認為是畸形的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，函數(shù)的this會維持原先context，不被改變。

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

.data(“events”)

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

它是不公開的。jQuery Migrate（遷移）插件可以恢復原來的行為。