本文是一篇來自微軟的 Web 開發系列文章的一部分。感謝您支持這位使 SitePoint 成為可能的合作伙伴。
jQuery，是迄今為止世界上最流行的 JavaScript 庫，一直是我們這些 Web 開發者的神器。自從它在 2006 年發布最初版本直到如今，已經有非常多的 Web 開發者在項目中引入了這個優秀的庫來使開發工作變得更輕松。
主要的改變是函數將如何工作的。而且有很好的理由這樣做。在早些實現上，hide() 函數設置 css 屬性為“display:none”，show() 函數是清除這個屬性。但是這樣做有些混亂。讓我們看看幾個例子：
1. 如果當 show() 函數嘗試設置一個節點為“display:block”而在另外一個樣式表裡實現了“display:inline”屬性，這將開始破壞代碼。
2. 當我們為媒質處理響應式網頁設計時（RWD），我們也許會用“display”或者“visibility”改變節點的可見性。這可能會影響“show()”和“hide()”函數。
除了這些，還有很多 JQuery 團隊不得不去修復的其它問題。這導致了復雜的實現和性能問題，因此他們遷移到一個簡單的模型。
今後，如果你設置“display:none”和使用“show()”，“slideDown()”，“fadeIn()”或者類似的方法去顯示節點，它不會有效。更好的方法是使用“addClass()”和“removeClass()”控制顯示。或者可以在“ready()”調用的時候在元素上調用“hide()”。
迅速舉個例子：
<!DOCTYPE HTML><html>
<head>
<style>
.invisible{
display: none;
}
.visible{
background-color: deepskyblue;
display:block;
}
</style>
<script src="jquery-3.0.0-alpha1.js"></script>
<script>
$(document).ready(function(){
$("#div1").addClass("invisible");
$("#toggle").click(function(){
$("#div1").removeClass("visible");
$("#div1").addClass("invisible");
});
});
</script>
<title>Control Visibility</title>
</head>
<body>
<p>Hello!</p>
<div id="div1">Can you see this?</div>
<button id="toggle">Click me</button>
</body> </html>
jQuery 團隊改變了 .data() 函數的實現來更符合 HTML5 數據集規范。如果 data-* 屬性中的 key 包含了數字，該數字將不再參與轉換。思考下面的例子：
使用 jQuery 2.1.4：
控制台窗口不顯示對象。
使用 jQuery 3.0.0：
由於現在數字不會參與轉換為駱駝拼寫法，key 被轉換成了 foo-42-name。因此，我們得到了控制台中的輸出。這個 fiddle 的網址是 http://jsfiddle.net/nWCKt/25/。你可以更改 jQuery 的版本來觀察變化。
同樣，如果我們想要不帶任何參數地使用 data() 顯示所有的數據，如果 data-* 屬性的 key 名在連字符（-）後面接了一個數字，則參數的數量也將會在兩個 jQuery 版本中改變，就像上面的例子一樣。
一些浏覽器會將寬度和高度返回為亞像素值。現在無論浏覽器是否支持，jQuery 的 .width()、.height()、.css("width") 都可以返回小數值了。對於為了使用亞像素精度來設計網頁的用戶來說，這可能會是一個好消息。
這些方法早先已經不贊成使用了，現在則已經從 jQuery 3.0.0 alpha 版中被移除。推薦的方法是使用 .on() 函數來處理這些事件。簡短示例：
HTML：
<img src="space-needle.png" alt="Space Needle" id="spacen">
JavaScript：
早先的實現方式（現已不可用）
$( "#spacen" ).load(function() {
// Handler implementation
});
推薦的實現方式：
$( "#spacen" ).on( "load", function() {
// Handler implementation
});
jQuery 對象現在可遍歷了
現在已經可以遍歷 jQuery 對象了，使用 ES2015 的 for-of。所以，你可以像這樣使用：
for ( node of $( "<div id=spacen>" ) ) {
console.log( node.id ); // Returns ‘spacen’
}
（源碼在這）
所有現代的浏覽器都已經支持了 requestAnimationFrame（參見：http://caniuse.com/#search=requestAnimationFrame）了。由於其被普遍支持，jQuery 將會使用此 API 來執行動畫。其優勢包括更流暢的動畫及更少的 CPU 占用（因此，可以在手機上節約電量）。
.unwrap() 函數可以讓你在 DOM 中刪除指定元素的父元素，早先不能接收參數。如果有人想給 unwrap 設定一個條件，這可能是個問題。
在 jQuery 3.0.0 alpha 中，.unwrap() 可以接收 jQuery 選擇器做為參數來處理這個問題。
jQuery.Deferred 升級為 Promises/A+ 兼容
Promiseis是一個異步操作的最終結果——它是一個對象，承諾在未來交付結果。 和promise接口的最主要方式是then方法， 它注冊了回調函數。現在，在JavaScript中使用Promise來完成異步工作變得日益流行。Promises/A+是一個兼容JavaScript promises的開放標准。 (想要更多的信息，可以查看鏈接: https://promisesaplus.com/)
從jQuery的參考文檔中，Deferred對象是一個由jQuery.Deferred()方法創建的可鏈接實用對象。它可以注冊多個回調函數放入回調函數隊列中、調度這個隊列、更新任何同步或異步方法的成功和失敗狀態。在jquery 3.0.0中，jQuery.Deferred對象升級成與Promises/A+和ES2015 Promises兼容。 這就是.then()方法的主要變更。
更好地處理錯誤情況
這個版本的 jQuery 能更好地處理錯誤 —— 錯誤請求過去一直是被忽略的，直到現在的版本才會拋出錯誤。
舉例來說：考慮到 offset，要獲取當前第一個元素的坐標，相對於文檔來說，就要匹配集合中的元素。如果你正試圖在 jQuery 的早期版本找到抵消的窗口（window），你會得到{top: 0, left: 0}這樣的結果，而不是拋出一個錯誤，這是因為抵消窗口（window）是無意義的。而在 3.0 alpha 版本中，它就會拋出一個錯誤。
另外一個例子：$("#") 現在會拋出一個錯誤，而不是返回一個長度為 0 的集合。
當 :visible 之類的選擇器在一個文檔內多次使用時，性能得到了很大的提升。其內部是通過緩存來實現的 —— 第一次用過這個選擇器後，以後返回結果都是一樣的。但是其後的每一次調用返回結果都很快，因為緩存起作用了。來自 jQuery 的 Timmy Willison 在報告中指出使用緩存後 :visible 選擇器的性能提升了 17 倍。
這些都是一些主要的更新。整個列表在他們的官方博客：http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/.
有兩個版本：
也可以從 npm 中獲取：
npm install [email protected]
npm install [email protected]
盡管去嘗試一下這個 alpha 版本吧，然後可以到 https://github.com/jquery/jquery 反饋問題。這很值得一試！
這篇文章是微軟的布道者和工程師在實際學習 JavaScript 系列文章中的一篇，開源項目和互操作性的最佳實踐，包括微軟的 Edge browser 和新 Edge HTML 渲染引擎。
我們鼓勵您進行跨浏覽器和設備測試，包括微軟的 Edge——Win10 系統的默認浏覽器 —— 在 dev.microsoftedge.com 上有免費的測試工具:
從我們工程師那裡和下面的福利清單中獲得更深入的了解：
互操作性最佳實踐 (系列)：
如何避免浏覽器檢測
CSS 前綴最佳實踐
保持 JS 框架 & 庫最新
構建自由擴展的網頁體驗
上的編碼實驗室: 跨浏覽器測試和最佳實踐
哇哦，我可以再 Mac 和 Linux 上面測試 Edge! (來自Rey Bango)
不用破壞網頁的先進的JavaScript (來自Christian Heilmann)
使用 WebGL 的 3D 渲染 (來自David Catuhe)
web 應用和 web 平台方面的創新 (來自Kiril Seksenov)
我們的社區開放源代碼項目:
更多免費的工具和後台 web 開發小玩意:
jQuery權威指南 PDF版中文+配套源代碼 http://www.linuxidc.com/Linux/2013-10/91059.htm
jQuery實戰 中文PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90631.htm
《jQuery即學即用（雙色）》 PDF+源代碼 http://www.linuxidc.com/Linux/2013-09/90383.htm
鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm
jQuery完成帶復選框的表格行高亮顯示 http://www.linuxidc.com/Linux/2013-08/89406.htm
jQuery基礎教程(第4版) PDF 完整高清版+配套源碼 http://www.linuxidc.com/Linux/2014-03/98162.htm
--------------------------------------分割線 --------------------------------------
jQuery 的詳細介紹：請點這裡
jQuery 的下載地址：請點這裡
英文原文：What's New in jQuery 3.0 and How to Use It
