從jQuery 震撼整個 Web ，至今已有十年了，我們有很好的理由一直堅持使用維護它。jQuery為用戶提供了 DOM 進行操作，執行 Ajax 請求，創建動畫等等，極為友好的接口。此外，與 DOM API 不同的是，jQuery 采用了 復合模式（composite pattern）。 正因為如此，你可以在一個jQuery集合上調用jQuery方法，而不用擔心集合包含的元素數量（零，一個或多個）。

在未來的幾周內，隨著 jQuery 3 的發布，jQuery 會到達一個重要的里程碑。jQuery 3 修復了很多 bug，增加了新的方法，棄用并移除了一些功能，并改變了一些功能的行為。在這篇文章中，我重點講解jQuery 3所帶來的一些最大的變化。

新特性（New Features）

在下面的章節中，我將討論jQuery 3中新增的重要特性。

for…of 循環

jQuery 3 將提供for...of循環語句，可以用來遍歷一個jQuery集合所有的 DOM 元素。這種新的迭代器ECMAScript 2015（又名的ECMAScript6）規范的一部分。它能實現對可遍歷對象（包括 Array、Map、Set 等）的循環。

當使用這個新的迭代方法時，您每次接收的值不是一個jQuery集合，而是一個DOM元素。當你對一個jQuery集合執行操作時，這個新的迭代方法可以少許改善你的代碼。

為了理解這個迭代方法是如何工作的，假設你想給頁面中每個input元素分配一個 ID。在 jQuery 3 之前，你可以這樣寫：

var $inputs = $('input'); for(var i = 0; i < $inputs.length; i++) {  $inputs[i].id = 'input-' + i;}

而在 jQuery 3 中，你可以這樣寫：

var $inputs = $('input');var i = 0;  for(var input of $inputs) {  input.id = 'input-' + i++;}

$.get() 和 $.post()的新簽名

jQuery 3 為 $.get() 和 $.post() 工具函數增加了新簽名，為的是使得它們和 $.ajax() 的接口風格保持一致。新簽名是這樣的：

$.get([settings])
 
$.post([settings])

settings 是一個可以具有許多屬性的對象。這是對象和 提供給$.ajax() 的對象 是相同的。更多詳細的介紹，詳細介紹，請參考 $.ajax()頁面。
傳遞給$.get() 和 $.post() 的對象，跟傳遞給 $.ajax() 的對象相比，唯一的區別是前者 method 屬性總是會被忽略。其原因是，$.get() 和 $.post() 都有一個預設的HTTP方法來執行Ajax請求（ $.get() 用 GET，而 $.post() 用 POST）。一般說來，你不要用 $.get()嘗試發送 POST 請求。

考慮下面這段代碼：

$.get({  url: 'https://www.audero.it',  method: 'POST' // This property is ignored});

盡管設置了method屬性，該語句還是不能發送 POST 請求，而只能發送 GET 請求。

采用 requestAnimationFrame() 來實現動畫

所有現代瀏覽器，包括Internet Explorer10及以上版本，都支持 requestAnimationFrame。jQuery 3 將會在內部采用這個 API 來實現動畫，以便達到更流暢、更省CPU資源的動畫效果。

unwrap()

jQuery 3 為 unwrap() 方法增加了一個可選的選擇器參數。這個方法的新簽名為：

unwrap([selector])

有了這一變化，你就可以傳入包含一個選擇器表達式的字符串，在父元素內進行匹配。如果存在匹配，匹配的子元素將被解包;否則，不進行任何操作。

被變更的特性

jQuery 3 還修改了一些特性的行為。

:visible 和 :hidden

jQuery 3修改了 :visible 與 :hidden 過濾器的含義。只要元素具有任何布局盒，包括那些寬度和/或高度為0的情況，則元素被認為是:visible。比如說，br 元素和沒有內容的內聯元素進可以通過 :visible 過濾器進行選擇。

所以，假如頁面有如下標記：

<div></div><br />

然后執行下面的語句：

console.log($('body :visible').length);

在 jQuery 1.x 和 2.x 中，你得到的結果會是 0；但在 jQuery 3 中，你會得到 2。

data()

另一個重要變化是跟 data() 方法的行為有關。調整主要是為了讓該方法符合 Dataset API 規范。jQuery 3 將所有屬性的鍵都改為駝峰式大小寫形式。要理解這個變化，先看下面這個例子。

<div id="container"></div>

如果你使用 jQuery 3 之前的版本，你可以寫如下代碼：

var $elem = $('#container'); $elem.data({  'my-property': 'hello'});console.log($elem.data());

您將在控制臺上獲得如下結果：

{my-property: "hello"}

而在jQuery 3 中，你會獲得如下結果：

{myProperty: "hello"}

請注意，在 jQuery 3 中，屬性名已經變成了駝峰形式，沒有橫杠（連字符）；而在以前的版本中，屬性名會保持全小寫，并原樣保留橫杠（連字符）。

Deferred 對象

jQuery 3改變了Deferred 對象的行為，Promise 對象的前身，改善與 Promise/A+ 提案的兼容性。這個對象及其歷史非常有意思，你可以讀讀官方文檔，或者看看我的書 《jQuery 實戰，第 3 版》，這本書也涵蓋了 jQuery 3。

在 jQuery 1.x 和 2.x 中，傳入 Deferred 中的回調函數中如果出現未捕獲異常，會導致程序停止執行。而原生的 Promise 對象并非如此，它會拋出異常，并不斷向上冒泡，直至到達 window.onerror（通常）。如果你沒有定義一個函數來處理這個錯誤事件的話（通常我們都不會這么做），則會顯示異常消息，程序終止執行。

jQuery 3 會遵循原生的 Promise 對象的模式。因此，拋出的異常將被視為一個失敗狀態（rejection），從而執行失敗回調。完成之后，整個進程就繼續執行，后續的成功回調將被執行。

為了讓你更好地理解這個差異，讓我們來看一個小例子。考慮下面的代碼：

var deferred = $.Deferred(); deferred .then(function() {  throw new Error('An error'); }) .then(  function() {   console.log('Success 1');  },  function() {   console.log('Failure 1');  } ) .then(  function() {   console.log('Success 2');  },  function() {   console.log('Failure 2');  } ); deferred.resolve();

在 jQuery 1.x 和 2.x 中，只執行第一個函數（拋出錯誤的函數）會被執行到。此外，由于我們沒有為 window.onerror 定義任何事件處理函數，所以控制臺將輸出消息：“Uncaught Error: An error”，而且程序的執行將中止。

而在 jQuery 3 中，行為則完全不同的。你將在控制臺中看到 “Failure 1” 和 “Success 2” 兩條消息。異常將會被第一個失敗回調處理，一旦被處理，則繼續執行下面的成功函數。

SVG 文檔

沒有哪一個 jQuery 版本，包括 jQuery 3，正式支持 SVG 文檔。不過事實上有很多方法是可以正常工作的，另外一些方法，比如操作類名的方法，已經在 jQuery 3 中進行了更新，因此也適用。因此，在未來的版本中，你應該可以放心使用諸如 addClass() 和 hasClass() 這樣的方法來操作 SVG 文檔了。

已廢棄、已移除的方法和屬性

除了前面說的改進，jQuery 也移除、廢棄了一些特性。

廢棄bind(),unbind(),delegate()和undelegate()

jQuery 以前引入的 on() 方法提供了統一的訪問接口，取代  bind()、delegate() 以及 live() 方法。與此同時，jQuery 用 off() 方法來取代 unbind()、undelegated() 及 die() 方法。bind()、delegate()、unbind() 和 undelegate() 今后不建議使用，但是并沒有采取進一步的行動。

jQuery 3 已經廢棄這些方法，并計劃在未來的版本（可能是 jQuery 4）中移除它們，要堅持在項目中使用 on() 和 off() 方法，這樣你就不用擔心未來版本的變更了。

移除 load(), unload() 和 error()方法

jQuery 3 徹底拋棄了已經廢棄的 load()、unload() 和 error() 方法。這些方法在很早以前（從 jQuery 1.8 開始）就已經被標記為廢棄了，但仍一直存在。如果你正在使用的插件仍然依賴這些方法，那么升級到 jQuery 3 的時候，代碼就會出錯。因此，在升級過程中要注意。

移除 context, support 和 selector

jQuery 3 徹底拋棄了已經廢棄的 context、support 和 selector 屬性。如前所述，如果項目中仍然使用著這些屬性，或者某個插件仍在依賴這些屬性，那么更新到 jQuery 3 時，代碼就會出錯。

Bugs 修復

jQuery 3 修復了以前版本中的一些重大 Bug。在下面的章節中，我將著重介紹其中兩處，因為這兩處會對你的編碼產生重大影響

width() 和 height()的返回值不再四舍五入

jQuery 3 修復了 width()、height() 和其它相關方法中的一個 bug。這些方法的返回值將不再四舍五入取整到像素了，因為，這使得在某些情況下很難，對元素進行定位。

要理解這個問題，讓我們假設你有一個具有100像素的寬度的容器元素，這個元素有寬度均為三分之一（即 33.333333%）的3個子元素：

<div class="container">  <div>My name</div>  <div>is</div>  <div>Aurelio De Rosa</div></div>

在 jQuery 3 以前的版本中，如果你嘗試通過以下代碼來獲取子元素的寬度……

$('.container div').width();

……那么你得到結果將是 33。原因在于 jQuery 會將 33.33333 這個值四舍五入取整。而在 jQuery 3 中，這個 Bug 已經得到修復，你的結果會更精確（比如會得到浮點數）。

wrapAll()

jQuery的新版本中還修復 wrapAll() 方法的一個bug，這個bug會在傳遞一個函數給 wrapAll() 方法時發生。在 jQuery 3 以前的版本中，當一個函數被傳給 wrapAll() 方法時，它會把 jQuery 集合中的每個元素單獨包裹起來。換句話說，這種行為和把一個函數傳給 wrap() 時的行為是完全一樣的。

除了修復這個問題，因為這種函數在 jQuery 3 中只會被調用一次，所以jQuery 集合元素的索引不可能被傳入。最后，該函數上下文（this）將指向 jQuery 集合中的第一個元素。

下載 jQuery 3

您可以從jQuery CDN獲取文件，或者直接訪問鏈接：

https://code.jquery.com/jquery-3.0.0.js
https://code.jquery.com/jquery-3.0.0.min.js
您也可以從以下npm獲得更新：

npm install jquery@3.0.0

總結

很多人在說jQuery 已死，認為在現代網頁開發中已經沒有一席之地了。然而，jQuery 的開發仍在繼續，客觀的統計數據（在排名前一百萬名的網站中占有率高達 78.5%）駁斥這些說法。

在本文中，我已經帶你了解了一遍 jQuery 3 將會帶來的一些重大變化。或許你已經注意到了，這個版本是可能對你現有的項目產生太大的影響，因為沒有引入太多許多重大更改。盡管如此，仍然需要注意一些因素，比如 Deferred 對象的改進。就像更新第三方依賴所經常要面的那樣，對項目一定要做一個復查，從而防止意外行為或功能崩潰的情況出現。