原文地址：http://www.myexception.cn/jquery/2062227.html

1. 使用了被廢棄的jQuery.fn.live方法

jQuery Migrate庫對此錯(cuò)誤也在控制臺(tái)有相應(yīng)的警告：

JQMIGRATE: jQuery.fn.live() is deprecated

live方法原本的作用是設(shè)置事件代理，該方法在jQuery 1.7之后就不推薦使用了，取代之的是jQuery.fn.on函數(shù)。他們的接口分別是：

$(selector).live('click', function(){/* some code */});

$(selector).on('click', [selector,] function(){/* some code */});

乍一看，中括號(hào)里面的參數(shù)可以省略掉，倆函數(shù)不是一模一樣么？于是天真地把函數(shù)名live直接替換成on，大部分時(shí)候，這么做好像沒有引起任何異常。但是如果在你調(diào)用on函數(shù)的時(shí)候，前面的$(selector)在當(dāng)前的網(wǎng)頁上根本不匹配任何元素（該元素可能是后面的代碼才加到DOM里的），那是不會(huì)綁定成功的。事實(shí)上，live函數(shù)將$(selector)代理到了document元素上，這個(gè)元素是肯定存在的，所以不會(huì)出現(xiàn)類似情況。正確的替換方法應(yīng)該是：

$(selector).live('click', function(){/* some code */}); 替換為

$(document).on('click', selector, function(){/* some code */});

2. 使用了被廢棄的jQuery.fn.die方法

jQuery Migrate對此錯(cuò)誤的警告是：

JQMIGRATE: jQuery.fn.die() is deprecated

這個(gè)方法和前面的live剛好反過來，取消事件處理函數(shù)的綁定。新版本中應(yīng)該使用off函數(shù)代替之，替換方式類似。

3. 使用了被廢棄的jQuery.fn.toggle函數(shù)

jQuery Migrate對此錯(cuò)誤的警告是：

JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated

早期jQuery中名字叫toggle的函數(shù)有兩個(gè)，一個(gè)是用于控制元素的顯示和隱藏，這個(gè)用途的函數(shù)目前jQuery中依舊存在；另一個(gè)就是上面提到的被廢棄的toggle函數(shù)，它用于綁定至少兩個(gè)函數(shù)到同一個(gè)元素，點(diǎn)擊該元素的時(shí)候兩個(gè)函數(shù)交替著執(zhí)行。這兩個(gè)同名函數(shù)功能相差甚遠(yuǎn)，為了不引起誤導(dǎo)，在jQuery 1.8中就不再建議使用了。替換的方式是把兩個(gè)函數(shù)合并成一個(gè)函數(shù)的if-else兩個(gè)區(qū)段，然后自己設(shè)置一個(gè)boolean變量，控制每次點(diǎn)擊時(shí)應(yīng)該執(zhí)行哪個(gè)區(qū)段即可。

4. 使用了被廢棄的jQuery.browser屬性

jQuery Migrate對此錯(cuò)誤的警告是

JQMIGRATE: jQuery.browser is deprecated

在前端開發(fā)中我們經(jīng)常要根據(jù)不同的瀏覽器版本做出不同的處理，jQuery.browser本來是通過瀏覽器的userAgent字段來提取瀏覽器相關(guān)信息的。新版本中已經(jīng)將其廢棄，而是建議使用特征檢測的方法去判斷，并且給了一個(gè)Modernizr庫作為推薦。不過，改成這個(gè)庫可能改動(dòng)成本有點(diǎn)大，如果你還是想沿用jQuery.browser的思路的話，可以自己去實(shí)現(xiàn)一下它。例如，判斷是不是IE瀏覽器，可以用

/msie/.test(navigator.userAgent.toLowerCase());

即自己手動(dòng)獲取userAgent字段，并且做一個(gè)正則表達(dá)式匹配。其他瀏覽器思路類似，都是對navigator.userAgent做一個(gè)正則匹配。

5.$(html)格式書寫錯(cuò)誤

在jQuery Migrate中，出現(xiàn)以下三種警告中的任何一種，都是屬于這個(gè)錯(cuò)誤：

1. JQMIGRATE: $(html) HTML strings must start with '<' character

2. JQMIGRATE: $(html) HTML text after last tag is ignored

3. JQMIGRATE: HTML string cannot start with a '#' character

這個(gè)錯(cuò)誤還是蠻值得注意的，因?yàn)槲覀兾恼麻_頭所說的jQuery低版本有XSS漏洞，其實(shí)就是和這個(gè)錯(cuò)誤有關(guān)系。在javascript中我們經(jīng)常會(huì)直接將一段html格式的字符串寫在jQuery引用里面，比如$('

1. $("

2. $("

3. $("#

這一點(diǎn)在書寫的時(shí)候注意一下就可以了，其實(shí)還是很容易避免的。其中第三種錯(cuò)誤其實(shí)就不僅僅是警告了，jQuery會(huì)直接拋出一個(gè)錯(cuò)誤，停止javascript代碼的繼續(xù)執(zhí)行。一般情況以井號(hào)開頭，例如$("#test")，其實(shí)就是一個(gè)普通的選擇器，但是上面例子中后面又夾雜著html字符串，這會(huì)被jQuery判斷為潛在的XSS攻擊。

6.jQuery.fn.attr方法的錯(cuò)誤使用（這是個(gè)非常易犯的錯(cuò)誤?。?/p>

jQuery Migrate中，關(guān)于attr方法的警告有以下這些：

1. JQMIGRATE: jQuery.fn.attr('value', val) no longer sets properties

2. JQMIGRATE: jQuery.fn.attr('value') no longer gets properties

3. JQMIGRATE: jQuery.fn.attr('checked') may use property instead of attribute

4. JQMIGRATE: jQuery.fn.attr( props, pass ) is deprecated

實(shí)踐中我發(fā)現(xiàn)，早期寫的代碼里面，獲取一個(gè)input輸入表單的值時(shí)，是怎么獲取的呢？$('input').attr('value')；又是怎么設(shè)置的呢？$('input').attr('value', 'helloworld')。這在新版本中都是不正確的！正確的做法應(yīng)該是

$('input').val(); //獲取input表單現(xiàn)在所輸入的值

$('input').val('helloworld'); //設(shè)置input表單輸入的值

到底是獲取還是設(shè)置，只取決于調(diào)用val方法時(shí)有沒有帶著參數(shù)。

如果你想手動(dòng)設(shè)置單選框（例如）被選中，應(yīng)該怎么設(shè)置呢？老的代碼里面可能會(huì)看到這樣$('input').attr('checked', true)或者$('input').attr('checked', 'checked')。這些現(xiàn)在也都是不正確的！正確的做法應(yīng)該是

$('input').prop('checked', true); //把單選框設(shè)為選中狀態(tài)

$('input').prop('checked'); //獲取單選框是不是被選中了，返回true或false

這是從jQuery 1.6版本開始使用的寫法。如果設(shè)置disabled和selected屬性，也是使用prop方法。那到底什么時(shí)候使用attr方法呢？兩者的區(qū)別是：prop設(shè)置的是某元素固有的屬性，而attr設(shè)置的是寫在html標(biāo)簽上的自定義屬性。舉個(gè)例子：

var v1 = $('input').prop("checked"); //返回true/false，是否被選中，隨狀態(tài)改變而改變

var v2 = $('input').attr("checked"); //返回"checked"，這是你設(shè)置在標(biāo)簽上的，不會(huì)變

var v3 = $('input').attr("haha"); //返回"hello"，自定義屬性

var v4 = $('input').prop("haha"); //返回undefined，根本沒有這個(gè)固有屬性

上面提到的第四個(gè)錯(cuò)誤，jQuery.fn.attr(props, pass) is deprecated這個(gè)警告在真實(shí)項(xiàng)目中從未見到過，看了一下源碼，觸發(fā)該警告的jQuery寫法很少見，可忽略。

7. 向$.parseJSON傳入了非法的參數(shù)

在jQuery Migrate中，該錯(cuò)誤產(chǎn)生如下警告

JQMIGRATE: jQuery.parseJSON requires a valid JSON string

jQuery之所以改這個(gè)接口，是為了和瀏覽器自帶的JSON.parse接口對齊，從jQuery 1.9開始生效。這個(gè)問題常見于AJAX接收服務(wù)端返回值的時(shí)候。服務(wù)端可能返回一個(gè)空字符串，這時(shí)候調(diào)用該接口會(huì)產(chǎn)生錯(cuò)誤。必須向$.parseJSON傳入合法的JSON字符串。修正方法如下：

var v1 = $.parseJSON(str); 替換為

var v1 = $.parseJSON( str ? str : "null" );

8. 使用了被廢棄的’hover’事件字符串

在jQuery Migrate中該錯(cuò)誤產(chǎn)生如下警告

JQMIGRATE: 'hover' pseudo-event is deprecated, use 'mouseenter mouseleave'

在注冊事件處理函數(shù)時(shí)，’hover’以前可以看作是’mouseenter mouseleave’兩個(gè)事件的別稱。目前已經(jīng)將該別稱去掉了，所以代碼中請用’mouseenter mouseleave’替換之。

9.jQuery.fn.andSelf已經(jīng)被替換，不能再使用

jQuery Migrate中是這樣的警告：

JQMIGRATE: jQuery.fn.andSelf() replaced by jQuery.fn.addBack()

兩個(gè)函數(shù)功能是完全一樣的，可以直接替換。

以上，就是在jQuery升級中常見的問題。

附：

jQuery開發(fā)團(tuán)隊(duì)前一段時(shí)間發(fā)布了jQuery 1.9版本，刪除了1.8版本中的部分API，為了使前端開發(fā)者能夠順利遷移至該版本，該團(tuán)隊(duì)還發(fā)布了遷移插件jQuery Migrate。

當(dāng)開發(fā)者需要在代碼中使用新版本的jQuery時(shí)，可以在1.9或2.0版本中使用該插件來檢測哪些功能已經(jīng)棄用或移除，并可以在必要時(shí)恢復(fù)這些功能。更多信息見項(xiàng)目README

jQuery Migrate 1.1在之前版本的基礎(chǔ)上，進(jìn)行了一些改進(jìn)，包括：

支持console.trace()來跟蹤警告信息，更易于診斷錯(cuò)誤。

對于無效JSON，會(huì)返回警告信息。

提示“Logging is active”信息，以表明插件正在運(yùn)行。

出于安全因素，jQuery 1.9限制了字符串的處理，你可以通過新版Migrate插件來恢復(fù)該功能。但還是建議使用$.parseHTML()來處理HTML。

對$("", { type: "button" })會(huì)顯示一個(gè)錯(cuò)誤警告

最后，需要注意的是，你可以使用該插件將jQuery恢復(fù)到j(luò)Query 1.6.4之后的任何一個(gè)版本的功能。

詳細(xì)信息：http://blog.jquery.com/2013/01/31/jquery-migrate-1-1-0-released/

下載：

jquery-migrate-1.1.0.js

jquery-migrate-1.1.0.min.js