jQuery 3.0在日前发布了最终的全新版本。从2014年10月，jQuery团队对这个主要大版本进行维护开始，web开发者社区便一直在期待着这一刻的到来，终于在2016年6月他们迎来了这一个最终版。 通过[url=http://blog.jquery.com/2016/06/09/jquery-3-0-final-released/]jQuery 3.0的版本更新说明[/url] ，我们看到了一个保持着向后兼容的更轻便，更快速的jQuery。在本文中，我们将介绍一些令人眼前一亮的jQuery 3.0全新特性。 [b]开始前的说明[/b] 如果你想要下载jQuery 3.0进行亲自实验，可以通过 该页面 进行下载。另外， 升级指南 和 源代码 也值得你一看。 如果你想要测试一下你的项目如何在jQuery 3.0中工作的，你可以尝试通过[url=https://github.com/jquery/jquery-migrate#migrate-older-jquery-code-to-jquery-30]jQuery迁移插件[/url] 来识别代码的兼容性问题，你也可以查看 [url=https://github.com/jquery/jquery/milestones]jQuery未来发展的时间表[/url] 。 [b]1. 移除旧的IE工作区[/b] 新的最终版最主要的目标是更加快速，更加时尚，因此，那些支持早于IE9版本的相关技术与工作区都被移除了。这意味着如果你想要或者需要支持IE6-8，你必须用回1.12版本，因为甚至是2.X版本都无法完整支持早于IE9的浏览器。[url=https://jquery.com/browser-support/]查看完整的浏览器支持方案[/url]>> [img]http://files.jb51.net/file_images/article/201607/201607060930285.png[/img]   注意：在jQuery 3中还弃用了一些其它的功能。截止到2016年6月，升级指南还没有提供一个对于弃用功能的分组整理。因此，你如果想要了解弃用功能，可以通过ctrl+f键来进行搜索。 [img]http://files.jb51.net/file_images/article/201607/201607060930296.png[/img]   [b]2. jQuery 3.0运行在Strict Mode下[/b] 大多数支持jQuery 3的浏览器都支持strict mode，而在本次更新中对此进行了规定。 虽然jQuery 3是写在strict mode中的，但是你需要了解的是你的代码并不需要运行在strict mode中，因此如果你想要把以前的代码迁移到jQuery 3，你不需要对已存在的jQuery代码进行重写。Strict和non-strict mode的JavaScript代码可以和谐共存。 这里有一些例外：某些版本的ASP.NET，因为strict mode的缘故，无法与jQuery 3兼容，如果你的代码涉及到了ASP.NET，你可以查看 关于[url=http://jquery.com/upgrade-guide/3.0/#breaking-change-jquery-3-0-runs-in-strict-mode]strict mode的细节[/url] 。 [b]3. 引进for...of循环[/b] jQuery 3支持[url=https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/for...of]for...of [/url]语句，这是由[url=http://www.hongkiat.com/blog/ecmascript-6/]ECMAScript 6 [/url]中新引进的一种for循环语句。这提供了对 Arrays ， Maps 和 Sets 这样的可迭代对象一种更直接的遍历方法。 在jQuery中，for...of循环可以取代以前的 $.each(...) 语法，并且更容易通过jQuery的元素 集合 进行循环。 [img]http://files.jb51.net/file_images/article/201607/201607060930297.png[/img]   注意：for...of只能在支持ECMAScript 6的环境下或者使用Babel这样的JavaScript编译器下工作。 [b]4. 动画方面采用新的API[/b] jQuery 3使用requestAnimationFrame() API来执行动画，使动画运行得更加顺畅、快速。新的API只用于支持它的浏览器，对于那些更老的浏览器（如IE9）jQuery使用先前的API来作为显示动画的后备方案。 RequestAnimationFrame已经推出一段时间了，如果你对如何使用它以及什么时候使用它感兴趣，CSS Tricks上有一篇很好的 文章 可供你阅读。 [img]http://files.jb51.net/file_images/article/201607/201607060930298.png[/img]   [b]5. 对包含特殊含义的字符串提供转义的新方法[/b] 新的jQuery.escapeSelector()提供了对在CSS中存在特殊含义的字符串或字符进行转义的方法，该方法可使这些字符串或字符能够继续用于jQuery选择器中，而无需对那些无法进行正确理解的JavaScript解释器进行转义。 这个 示例 可以让你更好的了解这个全新的方法： 举个例子，页面中某个ID为 “abc.def” 的元素由于选择器将其解析为 ID为“abc”且包含一个名为“def”的类的对象， 而无法被$( "#abc.def" )选定。但是它可以由 $( "#" + $.escapeSelector( "abc.def" ) )来进行选定。 我无法确定发生中情况的频率，但是假如你碰到过这种类似的情况，这无疑给了你一个解决该问题的简单方法。 [b]6. 类操作方法支持SVG[/b] 不幸的是，jQuery 3现在还无法完整的支持SVG，但是对于 操作CSS类名称 的jQuery方法，如 .addClass() 和 .hasClass() 现在可以将SVG文档作为目标。这意味着你可以修改（添加、删除、切换）或者查找SVG（可缩放矢量图形）下的jQuery类，然后使用CSS的类样式。（ 相关阅读：[url=http://www.hongkiat.com/blog/scalable-vector-graphic-css-styling/]Styling Scalable Vector Graphic (SVG) with CSS[/url] ） [b]7. 延迟对象现在与JS Promises兼容[/b] JavaScript Promises ，用于异步计算的对象，现在在ECMAScript 6中已经被标准化；它们的运行状况和特性的详细说明参见 Promises/A+ 标准。 [img]http://files.jb51.net/file_images/article/201607/201607060930299.png[/img]   在jQuery 3中， 延迟对象 已经与新的Promises/A+标准相兼容，延迟对象已经成为让创建回调队列成为可能的可链对象(chainable objects)。 新的特性改变了异步回调函数执行过程，Promises允许开发者编写在逻辑上与同步代码更接近的异步代码。 查看升级指南的 代码示例 ，或者查看关于JavaScript Promises基础的 Scotch.io教程 可以让你了解更多的信息。 [b]8. jQuery.when()对于多种参数的不同解读[/b] $.when() 提供了执行回调函数的一种方法，它成为了jQuery 1.5之后的一部分。这个方法非常灵活，它适用于零参数，也适用于一个或者多个作为参数的对象。 jQuery 3改变了当包含 $.then() 方法时对$.when()中参数的解读方法，你可以对$.when()进行额外的参数回调。 在jQuery 3中，如果你在$.when()中的then()方法内增加一个输入参数，该参数将会被解释成一个可与 Promise 兼容的 "thenable" 。 这意味着 $.when方法能够接收更加宽广的输入范围，比如原生的 ES6 Promises 和 Bluebird Promises ，这也使得编写更复杂的异步回调成为了可能。 [b]9. 新的显示/隐藏逻辑[/b] 为了增加响应式设计的兼容性，与元素显示和隐藏的代码在jQuery 3中进行了更新。 从现在开始， .show() 、 .hide() 和 .toggle() 方法将会以内联样式为重点取代以前的计算样式，这种方式能够更尊重样式列表的改变。 新的代码尽可能的尊重样式列表中所呈现的数值，这意味着CSS规则可根据事件（如设备重新定位和窗口尺寸调整）进行动态改变。 这个说明文件申明了最重要的结果就是： “作为结果，断开连接的元素除非指定了内联display: none，否则将不再认定为是隐藏的。因此，在jQuery 3.0中，.toggle()不再对断开连接元素与已连接元素进行区分。” 如果你想要更好的了解关于全新的显示/隐藏逻辑，这个 Github discussion 会对你有帮助。jQuery开发者还发布了 Google文档表 来展示在不同用例下新规则的运转。 [b]10. 对于防止XSS攻击的额外保护[/b] jQuery 3增加一个额外的安全层用户用于防备跨站点脚本(XSS)攻击，它需要开发者指定 $.ajax() 和 $.get() 方法中的选项为dataType: "script"。 换言之，如果你想要执行跨站点的脚本请求，你必须在这些方法中作出这样的声明。 [img]http://files.jb51.net/file_images/article/201607/2016070609303010.png[/img]   新的改变对于当“远程站点传递非脚本内容之后又提供有恶意脚本的服务内容”的情况是非常有效的。这个变化不会影响$.getScript()方法，因为它明确地设置了dataType: "script"选项。 以上所述是小编给大家介绍的jQuery 3.0十大新特性的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！