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 相关文章推荐
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 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 setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php多文件上传下载示例分享
2014/02/20 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
Python 抓取动态网页内容方案详解
2014/12/25 Python
Python查找相似单词的方法
2015/03/05 Python
python3实现windows下同名进程监控
2018/06/21 Python
python程序 创建多线程过程详解
2019/09/23 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
促销活动方案模板
2014/02/24 职场文书
法语专业求职信
2014/07/20 职场文书
投资意向书
2014/07/30 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
四群教育工作总结
2015/08/10 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
MySQL数据库简介与基本操作
2022/05/30 MySQL