jQuery ，是迄今为止世界上最流行的 JavaScript 库，一直是我们这些 Web 开发者的神器。自从它在 2006 年发布最初版本直到如今，已经有非常多的 Web 开发者在项目中引入了这个优秀的库来使开发工作变得更轻松。
时隔 3 个月，jQuery 团队终于发布了 3.0 Alpha 版本。有两个版本 jQuery compat 3.0 和 jQuery 3.0。
•jQuery compat 3.0 对应之前的 1.x， 兼容更多的浏览器，对于IE支持到 8.0 版本
•jQuery 3.0 对应之前的 2.x，关注更新的浏览器，对于IE支持到 9.0 版本
此外， 3.0还增加了对 Yandex 浏览器的支持，一款来自俄罗斯的浏览器。
1、简化了 show/hide
之前的 show/hide 是大兼容，比如 show， 无论元素的 display 是写在style，stylesheet里都能显示出来。3.0 则不同了，写在 stylesheet 里的 display:none 调用 show 后仍然隐藏。 3.0 建议采用 class 方式去显示隐藏，或者完全采用 hide 先隐藏（不使用css代码），再调用 show 也可以。
<style> input { display: none; } </style> <input type="text" value=""/> <script> $('#txt').show(); // 仍然隐藏的状态 </script>
2、data 方法兼容 data-name-11 写法
<input type="text" value="" data-name-11="aa"/> <script> // 3.0 版本 输出 {"name-11": aa}， 之前版本输出 {} $('#txt').data() </script>
这个问题本质是$.camelCase方法的实现差异
// 3.0 输出 "name-11", 3.0 之前版本输出 "name11" $.camelCase('data-name-11')
3、derferred 兼容了 Promise/A+
3.0 终于可以自信的宣告支持 Promise/A 了，之前一直被诟病是阉割版的。
4、$.ajax 对象删除了 success | error | complete 方法
这是因为 Promise/A 规范的推动，大家对 Promise 的使用越来越多，之前对应 Derferred 上的几个方法没有存在的必要了
•derferred.done -> jqXHR.success
•derferred.fail -> jqXHR.error
•derrerred.always -> jqXHR.complete
// 以下方法在 3.0 后没有了 $.ajax().success $.ajax().error $.ajax().complete
5、width/height，css(width) / css(height) 的返回值一律是十进制
之前部分浏览器特殊情况下返回浮点数。
6、 移除了注册事件的快捷函数 load | unload | error
•load 名称和 ajax load 同名， 含糊不清。
•unload 如果 load 去掉， unload 也没有存在的意义了。
•error 采用 window.onerror 注册，不是一个标准事件 hander，因此也建议移除
以上内容给大家总结了jquery3.0的变化，下面主要给大家介绍jquery3.0更新内容及使用方法。
显示和隐藏
主要的改变是函数将如何工作的。而且有很好的理由这样做。在早些实现上，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="https://www.jb51.net/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>Can you see this?</div> <button>Click me</button> </body> </html>
.data() Key 的命名规则
jQuery 团队改变了 .data() 函数的实现来更符合 HTML5 数据集规范。如果 data-* 属性中的 key 包含了数字，该数字将不再参与转换。思考下面的例子：
使用 jQuery 2.1.4：
控制台窗口不显示对象。
使用 jQuery 3.0.0：
