jQuery 1.9升級(jí)指南

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

jQuery 1.9刪除或修改了幾個(gè)過去行為不一致或效率低下的幾個(gè)API。在做這些變化中，團(tuán)隊(duì)的目標(biāo)是修復(fù)jQuery的行為不一致或比較難使用的地方，在這個(gè)過程中提高整體性能，減小了文件的體積。請(qǐng)看中文翻譯版本的《jQuery 1.9升級(jí)指南》：

概述

jQuery 1.9刪除或修改了幾個(gè)過去行為不一致或效率低下的幾個(gè)API。他們?cè)谝郧暗膉Query版本中已經(jīng)標(biāo)注過過時(shí)(deprecated)的API，特別是1.7和1.8。

在做這些變化中，團(tuán)隊(duì)的目標(biāo)是修復(fù)jQuery的行為不一致或比較難使用的地方，在這個(gè)過程中提高整體性能，減小了文件的體積。

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

本指南作為標(biāo)準(zhǔn)的jQuery API文檔的附錄，作為快速上手jQuery 1.9的引導(dǎo)。

jQuery Migrate（遷移）插件

我們認(rèn)識(shí)到，現(xiàn)有的網(wǎng)站和插件可能會(huì)受到這些變化的影響，所以提供一個(gè)過渡性的升級(jí)路徑—— jQuery Migrate（遷移）插件。下面的說明中，在1.9中變化或刪除的API，大部分可以使用jQuery Migrate（遷移）插件恢復(fù)。請(qǐng)注意，jQuery 1.9中所有的變化也將應(yīng)用到j(luò)Query 2.0中，jQuery Migrate（遷移）插件在jQuery2.0中也是可用的。

未壓縮，開發(fā)版本的jQuery Migrate（遷移）插件使用時(shí)會(huì)在控制臺(tái)中顯示警告信息，詳細(xì)的指出不兼容或刪除等信息及解決方法。這使得它在現(xiàn)有的jQuery代碼和插件上查找和修復(fù)問題時(shí)非常有用。jQuery Migrate（遷移）插件包含了1.6.4以來存在但1.9已不支持所有API。

壓縮版本的的jQuery Migrate（遷移）插件，不會(huì)在瀏覽器控制臺(tái)中產(chǎn)生任何不兼容或刪除等信息，并且可以在jQuery 1.9或更高版本，或者舊的不兼容的jQuery代碼或插件中使用。

理想情況下，這將只能作為一個(gè)短期的解決方案，但是這要你自己做出決定。

更多的信息請(qǐng)參見： jQuery Migrate plugin。

譯者注：哥過一句嘴，盡早的修改原來不兼容的代碼，畢竟使用jQuery Migrate（遷移）插件不是一個(gè)長久之計(jì)啊。

jQuery1.9中改變的地方

下面列表中說的并不代表jQuery 1.9中所有改變，只是我們預(yù)期的改變。完整的，詳細(xì)的更改列表，請(qǐng)參閱jQuery的博客或訪問bugs.jquery.com中發(fā)布的公告。

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

這個(gè)方法綁定兩個(gè)或多個(gè)處理程序到匹配的元素，用來執(zhí)行交替的點(diǎn)擊事件。它不應(yīng)該被混同于顯示或隱藏匹配元素.toggle( )方法，因?yàn)樗鼪]有過時(shí)。前者被刪除，以減少混亂和提高模塊化程度。jQuery Migrate（遷移）插件可以恢復(fù)此功能。

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

jQuery.browser() 方法刪除

jQuery.browser()方法從jQuery 1.3開始已經(jīng)過時(shí)了，在1.9中被刪除。如果需要的話，jQuery Migrate（遷移）插件可以恢復(fù)此功能。我們建議如特征檢測(cè)，請(qǐng)使用Modernizr庫。

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

.live() 方法移除

.live()方法從jQuery 1.7開始已經(jīng)過時(shí)了，在1.9中被刪除。我們建議使用.on()方法來替換升級(jí)你的代碼。要完全匹配$(“a.foo”).live(“click”, fn)，例如，你可以寫$(document).on(“click”, “a.foo”, fn)（譯者注：因?yàn)樵瓉淼膌ive事件其實(shí)是綁定在文檔document上的）。有關(guān)詳細(xì)信息，請(qǐng)參閱.on()文檔。在此期間，你可以使用jQuery Migrate（遷移）插件來恢復(fù).live() 功能。

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

.die() 方法移除

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

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

jQuery.sub() 方法移除

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

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

.add() 方法修改

.add()方法返回的結(jié)果總是按照節(jié)點(diǎn)在document（文檔）中的順序排列。在1.9之前，如果上下文或輸入的集合中任何一個(gè)以脫離文檔的節(jié)點(diǎn)（未在文檔中）開始，使用.add()方法節(jié)點(diǎn)不會(huì)按照document（文檔）中的順序排序。現(xiàn)在，返回的節(jié)點(diǎn)按照文檔中的順序排序，并且脫離文檔的節(jié)點(diǎn)被放置在集合的末尾。

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

.addBack(selector) 替換 .andSelf()

從jQuery1.8開始，.andSelf()方法已經(jīng)被標(biāo)注過時(shí)，在jQuery1.8和更高版本中應(yīng)使用.addBack()。

我們認(rèn)為對(duì)于“添加并返回”以前的結(jié)果集合這是一個(gè)更好的名字。新方法可以接受一個(gè)可選的選擇器，該選擇器可以用來過濾之前集合，將它添加到當(dāng)前集合并返回。$(“section, aside”).children(“ul”).addBack(“aside”) 會(huì)根據(jù)他們?cè)谖臋n中的順序，得到section與aside下所有ul子元素，外加所有aside元素。雖然.addSelf()在1.9中仍然可以使用，我們建議您盡快修改名稱。如果使用.addSelf()，jQuery Migrate插件會(huì)提出警告。

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

.after(), .before(), 和 .replaceWith()使用脫離文檔的節(jié)點(diǎn)

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

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

在1.9中，這些方法總是返回一個(gè)新的集合，使他們可以使用的鏈?zhǔn)秸{(diào)用和.end()方法。1.9之前，只有當(dāng)他們是一個(gè)單獨(dú)的目標(biāo)元素時(shí)，他們將返回舊的集合。需要注意的是這些方法總是返回所有元素附加到目標(biāo)元素的聚合集合。如果沒有元素被目標(biāo)選擇器選中（例如，$(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” 事件時(shí)Checkbox/radio 的狀態(tài)

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

focus事件觸發(fā)順序

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

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

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

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

jQuery(htmlString)與jQuery(selectorString)

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

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

總之：HTML字符串傳遞給jQuery()，除了以一個(gè)小于號(hào)（“<”）字符開始以外的其他字符串都將被解釋為一個(gè)選擇器。因?yàn)樽址ǔ２荒鼙唤忉尀橐粋€(gè)選擇器，最有可能的結(jié)果是Sizzle選擇器引擎錯(cuò)誤拋出的“無效的選擇器語法”。使用jQuery.parseHTML（）來解析任意的HTML。

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

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

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

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

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

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

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

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

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

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

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

試圖通過克隆一個(gè)現(xiàn)有的腳本標(biāo)簽加載和注入腳本，克隆到文檔將不再起作用，因?yàn)榭寺〉哪_本標(biāo)記已經(jīng)被標(biāo)記為已執(zhí)行。要加載一個(gè)新的腳本，建議使用jQuery.getScript()代替。

.attr() 和 .prop()對(duì)比

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

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

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

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

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

jQuery Migrate（遷移）插件可以恢復(fù)原來的對(duì)象屬性（property）和標(biāo)簽屬性（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版之前，在所有的瀏覽器中，任何企圖設(shè)置一個(gè)input或者button元素的類型（type屬性），jQuery都將拋出一個(gè)異常。這樣做時(shí)為了符合最低標(biāo)準(zhǔn)的兼容；因?yàn)槿绻阍噲D改變input元素的類型，IE6/7/8拋出一個(gè)錯(cuò)誤。從 jQuery 1.9開始，如果瀏覽器允許的話，我們?cè)试S您設(shè)置元素的類型。但是，你需要知道自己的代碼，在老IE（IE6/7/8）下試圖做到這一點(diǎn)還是會(huì)拋出一個(gè)錯(cuò)誤。當(dāng)你試圖設(shè)置類型屬性時(shí)，jQuery Migrate（遷移）插件會(huì)發(fā)出警告，但不會(huì)拋出一個(gè)JavaScript錯(cuò)誤。

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

“hover”偽事件

從1.9開始，事件名稱字符串“hover”不再支持為“mouseenter mouseleave”的代名詞縮寫。允許應(yīng)用程序綁定和觸發(fā)自定義的”hover”事件。修改現(xiàn)有的代碼是一個(gè)簡(jiǎn)單的查找/替換，并且jQuery Migrate（延遲）插件可以恢復(fù)”hover”偽事件。

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

jQuery對(duì)象上的.selector屬性

jQuery對(duì)象上過時(shí)的selector屬性保留的目的是為了支持過時(shí)的.live()事件。在1.9中，jQuery不再試圖在鏈方法上保留這個(gè)屬性，因?yàn)?.9已經(jīng)移除了.live()事件。不要使用jQuery對(duì)象的.selector屬性。jQuery Migrate（遷移）插件也沒支持這個(gè)屬性。

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

jQuery.attr()

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

jQuery.ajax返回一個(gè)空字符串的JSON結(jié)果

1.9之前，一個(gè)AJAX調(diào)用預(yù)期返回JSON或JSONP的數(shù)據(jù)類型，當(dāng)返回值是一個(gè)空字符串時(shí)會(huì)被認(rèn)為是成功的狀態(tài)，但返回一個(gè)null給success處理程序或承諾（promise）。從1.9開始，JSON數(shù)據(jù)返回一個(gè)空字符串被認(rèn)為是畸形的JSON（因?yàn)樗緛砭褪牵?這將拋出一個(gè)錯(cuò)誤。這種情況下，使用error（錯(cuò)誤）處理程序捕獲。

jQuery.proxy()

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

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

.data(“events”)

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

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