jQuery 3.0十大新特性


Posted in Javascript onJuly 06, 2016

jQuery 3.0在日前发布了最终的全新版本。从2014年10月,jQuery团队对这个主要大版本进行维护开始,web开发者社区便一直在期待着这一刻的到来,终于在2016年6月他们迎来了这一个最终版。

通过jQuery 3.0的版本更新说明 ,我们看到了一个保持着向后兼容的更轻便,更快速的jQuery。在本文中,我们将介绍一些令人眼前一亮的jQuery 3.0全新特性。

开始前的说明

如果你想要下载jQuery 3.0进行亲自实验,可以通过 该页面 进行下载。另外, 升级指南 和 源代码 也值得你一看。

如果你想要测试一下你的项目如何在jQuery 3.0中工作的,你可以尝试通过jQuery迁移插件 来识别代码的兼容性问题,你也可以查看 jQuery未来发展的时间表 。

1. 移除旧的IE工作区

新的最终版最主要的目标是更加快速,更加时尚,因此,那些支持早于IE9版本的相关技术与工作区都被移除了。这意味着如果你想要或者需要支持IE6-8,你必须用回1.12版本,因为甚至是2.X版本都无法完整支持早于IE9的浏览器。查看完整的浏览器支持方案>>

jQuery 3.0十大新特性 

注意:在jQuery 3中还弃用了一些其它的功能。截止到2016年6月,升级指南还没有提供一个对于弃用功能的分组整理。因此,你如果想要了解弃用功能,可以通过ctrl+f键来进行搜索。

jQuery 3.0十大新特性 

2. jQuery 3.0运行在Strict Mode下

大多数支持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,你可以查看 关于strict mode的细节 。

3. 引进for...of循环

jQuery 3支持for...of 语句,这是由ECMAScript 6 中新引进的一种for循环语句。这提供了对 Arrays , Maps 和 Sets 这样的可迭代对象一种更直接的遍历方法。

在jQuery中,for...of循环可以取代以前的 $.each(...) 语法,并且更容易通过jQuery的元素 集合 进行循环。

jQuery 3.0十大新特性 

注意:for...of只能在支持ECMAScript 6的环境下或者使用Babel这样的JavaScript编译器下工作。

4. 动画方面采用新的API

jQuery 3使用requestAnimationFrame() API来执行动画,使动画运行得更加顺畅、快速。新的API只用于支持它的浏览器,对于那些更老的浏览器(如IE9)jQuery使用先前的API来作为显示动画的后备方案。

RequestAnimationFrame已经推出一段时间了,如果你对如何使用它以及什么时候使用它感兴趣,CSS Tricks上有一篇很好的 文章 可供你阅读。

jQuery 3.0十大新特性 

5. 对包含特殊含义的字符串提供转义的新方法

新的jQuery.escapeSelector()提供了对在CSS中存在特殊含义的字符串或字符进行转义的方法,该方法可使这些字符串或字符能够继续用于jQuery选择器中,而无需对那些无法进行正确理解的JavaScript解释器进行转义。

这个 示例 可以让你更好的了解这个全新的方法:

举个例子,页面中某个ID为 “abc.def” 的元素由于选择器将其解析为 ID为“abc”且包含一个名为“def”的类的对象, 而无法被$( "#abc.def" )选定。但是它可以由 $( "#" + $.escapeSelector( "abc.def" ) )来进行选定。

我无法确定发生中情况的频率,但是假如你碰到过这种类似的情况,这无疑给了你一个解决该问题的简单方法。

6. 类操作方法支持SVG

不幸的是,jQuery 3现在还无法完整的支持SVG,但是对于 操作CSS类名称 的jQuery方法,如 .addClass() 和 .hasClass() 现在可以将SVG文档作为目标。这意味着你可以修改(添加、删除、切换)或者查找SVG(可缩放矢量图形)下的jQuery类,然后使用CSS的类样式。( 相关阅读:Styling Scalable Vector Graphic (SVG) with CSS )

7. 延迟对象现在与JS Promises兼容

JavaScript Promises ,用于异步计算的对象,现在在ECMAScript 6中已经被标准化;它们的运行状况和特性的详细说明参见 Promises/A+ 标准。

jQuery 3.0十大新特性 

在jQuery 3中, 延迟对象 已经与新的Promises/A+标准相兼容,延迟对象已经成为让创建回调队列成为可能的可链对象(chainable objects)。

新的特性改变了异步回调函数执行过程,Promises允许开发者编写在逻辑上与同步代码更接近的异步代码。

查看升级指南的 代码示例 ,或者查看关于JavaScript Promises基础的 Scotch.io教程 可以让你了解更多的信息。

8. jQuery.when()对于多种参数的不同解读

$.when() 提供了执行回调函数的一种方法,它成为了jQuery 1.5之后的一部分。这个方法非常灵活,它适用于零参数,也适用于一个或者多个作为参数的对象。

jQuery 3改变了当包含 $.then() 方法时对$.when()中参数的解读方法,你可以对$.when()进行额外的参数回调。

在jQuery 3中,如果你在$.when()中的then()方法内增加一个输入参数,该参数将会被解释成一个可与 Promise 兼容的 "thenable" 。

这意味着 $.when方法能够接收更加宽广的输入范围,比如原生的 ES6 Promises 和 Bluebird Promises ,这也使得编写更复杂的异步回调成为了可能。

9. 新的显示/隐藏逻辑

为了增加响应式设计的兼容性,与元素显示和隐藏的代码在jQuery 3中进行了更新。

从现在开始, .show() 、 .hide() 和 .toggle() 方法将会以内联样式为重点取代以前的计算样式,这种方式能够更尊重样式列表的改变。

新的代码尽可能的尊重样式列表中所呈现的数值,这意味着CSS规则可根据事件(如设备重新定位和窗口尺寸调整)进行动态改变。

这个说明文件申明了最重要的结果就是:

“作为结果,断开连接的元素除非指定了内联display: none,否则将不再认定为是隐藏的。因此,在jQuery 3.0中,.toggle()不再对断开连接元素与已连接元素进行区分。”

如果你想要更好的了解关于全新的显示/隐藏逻辑,这个 Github discussion 会对你有帮助。jQuery开发者还发布了 Google文档表 来展示在不同用例下新规则的运转。

10. 对于防止XSS攻击的额外保护

jQuery 3增加一个额外的安全层用户用于防备跨站点脚本(XSS)攻击,它需要开发者指定 $.ajax() 和 $.get() 方法中的选项为dataType: "script"。

换言之,如果你想要执行跨站点的脚本请求,你必须在这些方法中作出这样的声明。

jQuery 3.0十大新特性 

新的改变对于当“远程站点传递非脚本内容之后又提供有恶意脚本的服务内容”的情况是非常有效的。这个变化不会影响$.getScript()方法,因为它明确地设置了dataType: "script"选项。

以上所述是小编给大家介绍的jQuery 3.0十大新特性的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
学习ExtJS Panel常用方法
Oct 07 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
JS实现前端路由功能示例【原生路由】
May 29 Javascript
Javascript 基础---Ajax入门必看
Jul 06 #Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 #Javascript
jQuery事件委托之Safari
Jul 05 #Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 #Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 #Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 #Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 #Javascript
You might like
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
微信小程序实现点击图片放大预览
2019/10/21 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
python中Genarator函数用法分析
2015/04/08 Python
Python中表示字符串的三种方法
2017/09/06 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
django中cookiecutter的使用教程
2020/12/03 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
创伤外科专业推荐信范文
2013/11/19 职场文书
大学毕业通用个人的求职信
2013/12/08 职场文书
高中毕业自我鉴定
2013/12/13 职场文书
关于环保的建议书400字
2014/03/12 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
关于运动会的广播稿
2014/09/22 职场文书
代领报检证委托书范本
2014/10/11 职场文书
2016年教师节慰问信
2015/12/01 职场文书
Golang日志包的使用
2022/04/20 Golang