jQuery 3.0:10个炫酷新功能

摘要:JQuery 3.0终于来了。自从2014年10月开始,web开发人员社区就一直在等待这次重大更新。2016年6月,在千呼万盼之中,它终于来到了我们面前。

JQuery 3.0终于来了。自从2014年10月开始,web开发人员社区就一直在等待这次重大更新。2016年6月,在千呼万盼之中,它终于来到了我们面前。

jQuery 3.0的版本说明中表示,这是一个更轻巧、速度更快的jQuery,而且保持着向后兼容的特性。在这篇文章中,我们将会窥探一下jQuery 3.0的一些新特性,了解一下它给JavaScript世界带来的变化。

何处下载

如果你想下载jQuery 3.0进行尝试,请直接前往下载页面。另外,它的升级指南和源代码也值得你去看一下。

如果你想要测试项目在 jQuery 3.0中的工作方式,你可以通过 jQuery迁移插件来识别代码的兼容性。

这篇文章并没有覆盖jQuery 3.0的所有新功能,只介绍了那些有意思的内容:更好的代码质量、新ECMAScript 6的整合功能、新的动画API、用来转义字符串的新方法,更强的SVG支持、经过改进的Async Callback、对响应式网页更好的兼容以及更高的安全性。

1、移除了旧的IE工作区

新版本最主要的目标之一,就是要变得更加快速和轻巧,因此此前版本中有关早于IE9浏览器的技术和工作区都被移除了。这意味着,如果你想要继续为IE6-8版本的浏览器提供支持,你就必须继续使用1.12版本,因为即使是2.X版本的jQuery也无法完整支持遭遇IE9版本的浏览器。你可以在jQuery 3.0的说明文档中查看浏览器的支持情况。

2、jQuery 3.0可以在Strict Mode中运行

jQuery 3所支持的大部分浏览器都支持strict mode,本次发布的新版本对这个规则进行了具体的规定。虽然jQuery 3是在strict mode中编写的,但是你需要知道,你所编写的代码不一定非要在strict mode中运行。因此,如果你想把以前的代码转移到jQuery 3中,你无需对代码进行重写。strict和non-strict模式的JavaScript可以彼此共存。

只有一个例外:某些版本的ASP.NET,由于strict mode的原因,无法兼容jQuery 3。如果你的代码涉及到了ASP.NET,你可以在这里查看详情。

3、引进For...of循环

jQuery 3现在支持For...of语句,这是ECMAScript 6新引进的一种for循环语句。它给Arrays、Maps和Sets等可迭代对象提供了一种更加简单直接的遍历方法。

在jQuery中,For...of循环可以替代早前的$.each(…)语法,并且让jQuery的元素集合循环变得更容易。

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

4、采用了新的动画API

jQuery 3使用了requestAnimationFranme() API来执行动画,让动画的播放更加顺畅、速度更快。新的动画只能用在对其支持的浏览器中;一些老版本的浏览器(例如IE9),jQuery会使用以前的API作为动画显示的后备方法。

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

5、包含特殊含义的字符串迎来了新的转义方法

新的jQuery.escapeSelector()方法,可以让你对在CSS中具有其他含义的字符串或是字符以一种全新的方式进行转义,从而让其在jQuery选择器中继续可用,而无需对那些无法进行正确理解的JavaScript解释器进行转义。

下面这个例子可以帮助我们更好的理解这种方式:

假设页面中有某个对象,其ID为abc.def,由于选择器将其解析为“拥有abc ID,且包含一个名为def的类的对象”,从而无法被$( "#abc.def" )所选定。然而,它可以由 $( "#" + $.escapeSelector( "abc.def" ) )来进行选定。

我不确定类似的情况会多长时间发生一次,但是如果你的确遇到了这样的问题,你现在拥有了一个轻松的解决方式。

6、类操作方法支持SVG

可惜的是,jQuery现在还无法完全支持SVG,但是jQuery但是对于操作CSS类名称的jQuery方法,如addClass()和.hasClass()现在可以将SVG文档作为目标。这意味着,你可以修改(添加、移除、切换),或是寻找SVG下的jQuery类,然后使用CSS的样式。

7、延迟对象现在可以兼容JS Promises

JavaScript Promises是用于异步计算的对象,它在ECMAScript 6中已经完成了标准化;它们的行为和特性详细说明请参看 Promises/A+标准。

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

这个心特性改变了异步回调函数的执行方式。Promises让开发人员可以编写在逻辑上与同步代码更接近的异步代码。

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

$.when()方法为回调函数的执行提供了一种方法。从1.5版本中,它就一直是jQuery的一部分。它是一种灵活的方法;它还使用与零参数,也适用于一个或者多个作为参数的对象。

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

在 jQuery 3中,如果你使用then()方法在$.when()中添加一个输入参数,这个参数将会被解释为一个可兼容Promise的“thenable”。

这意味着$.when可以接受更宽更的输入范围,例如原生ES6 Promises和Bluebierd Promises,这让编写更复杂的异步回调成为了可能。

9、新的显示/隐藏逻辑

为了加强与响应式设计的兼容性, jQuery 3.中与显示和隐藏元素有关的代码也获得了升级。从现在开始,.show()、.hide()和.toggle()方法将会专注于内联样式,以取代之前的计算样式,这种方法更加尊重样式列表的改变。

这个新的代码可以在任何可能的时候尊重样式列表中所显示的数值,这意味着,CSS规则可以根据事件,例如设备重定位和窗口尺寸的调整,来进行动态改变。

10、为防止XSS攻击提供额外的保护

jQuery 3针对XSS攻击添加了额外的保护层,它需要开发人员指定$.ajax()和$.get()方法中的选项为dataType: “sricpt”。

换句话说,如果你想要执行跨站点的脚本请求,你必须在这些方法中做出这种说明。

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



来源:SDK.cn

链接:https://www.sdk.cn/news/4101

原文:http://www.hongkiat.com/blog/jquery-3-new-features/

时间: 2024-10-05 22:43:06

jQuery 3.0:10个炫酷新功能的相关文章

10大炫酷的HTML5文字动画特效欣赏

文字是网页中最基本的元素,在CSS2.0时代,我们只能在网页上展示静态的文字,只能改变他的大小和颜色,显得枯燥无味.随着HTML5的发展,现在网页中的文字样式变得越来越丰富了,甚至出现了文字动画,HTML5和CSS3的强大之处就在于此.本文分享的10款炫酷的HTML5文字动画特效非常不错,一起来看看吧. 1.HTML5 Canvas粒子效果文字动画特效 之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想

视频编辑SDK---我们只提供API,任你自由设计炫酷的功能

做视频APP, 在于差异化,个性的APP; 你做一个别人一样功能的APP, 很难占领市场. 基于此.我们的SDK完全以API的形式,至于界面和操作炫酷的功能,任你自由发挥, 视频编辑:即类似秒拍,美拍,快手,小影等APP中对音视频做剪切/裁剪/分离/合并/标记/贴纸/叠加/滤镜等操作. 我们有Android版本基本视频编辑SDK: https://github.com/LanSoSdk/LanSoEditor_common 主要功能有: 1,使用在音视频的: 裁剪,剪切,分离,合并,转换,拼接,

基于jQuery带动画的超炫酷弹出对话框

这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入.上下抖动飞入等.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <h1>jQuery gDialog Plugin Exampels</h1> <button class="btn demo-1">Alert Dialog

「珍藏」老司机为你推荐10个炫酷的开源库,看完的人都收藏了

前言 技术群里面经常有人问到一些炫酷的UI效果实现方法,有时候我都是给一个相同或者相似效果的Github链接,有同学私信给我说,大佬,怎么这些效果你都能找到?你是怎么搜索的,或者有其他什么秘方?会利用Google.百度等搜索工具搜索是一方面,另一个重要的方面是:记录搜藏,当看到一个炫酷的效果的时候,记得收藏起来,记录到自己云笔记或者收藏夹里,看得多了,印象就比较深刻,当遇到类似效果的时候,到自己记录收藏的地方找就是了.今天为大家推荐我所收藏的一些炫酷实用的效果的开源库(选择其中10个). 1.D

优秀个人免费私有云OwnCloud 8.0终于发布 - 亮眼新功能初探简介

OwnCloud是一个基于Linux的私有云开源项目,用户可以免费使用它来搭建自己的私有云来进行文件和多媒体等的分享. 本人有幸在大概一年多前因为项目需要而接触和使用到OwnCloud,但不幸的是当时发现有很多如性能等问题亟待解决.但这并不妨碍OwnCloud作为一个优秀的,免费的,开源的私有云服务器. 今天闲逛HackerNews的时候发现OwnCloud刚刚发布了8.0版本,而我们当时希望有的很多功能都已经囊括进来了,这是个非常激动人心的发布.下面对该版本的一些新功能进行介绍,希望能帮助到同

Windows 10 携这三大新功能,五月震撼来袭。

Windows 10 将会在五月开启大更新!微软更是将测试时间由两周延长成了一个月,以确保更新万无一失! 在这次大更新中,微软做了不少新功能,优化了不少被吐槽的功能.今天我们来讲几个小编最看好的新功能. Windows sandbox虽然叫做sandbox(沙盒),但更相当于一台独立的虚拟机! 他可以利用硬件虚拟化隔离技术,在基于现有的Windows系统文件创新一个全新的.独立的系统环境.在这个sandbox中我们可以对软件进行各种各样的测试,或者单纯想保护隐私,在新系统中浏览一些网页,运行软件

10款炫酷的jQuery和css3动画插件及源码

1.jQuery超酷平面时钟特效插件 这是一个非常具有创意的jQuery时钟插件,它不像其他的时钟插件一样是圆盘的或者是数字的,它是一个平面时钟,日期和时分秒的指针都是在平面上移动计时的,尽管这款jQuery平面时钟插件不能广泛应用,但是创意是绝对可以肯定的. 在线演示 源码下载 2.4款基于jquery的列表图标动画切换特效 网页中列表图标随处可见,特别是移动网页上,基本上的导航都采用了列表图标.今天给大家分享4款基于juqery的列表图标和关闭图标的动画切换特效. 在线演示 源码下载 3.随

8个超炫酷仿HTML5动画源码

1.jQuery万年历插件 带农历老皇历功能 这是一款基于jQuery的日历插件,这款日历插件和之前分享的日历控件有很大差异,它是一本万年历,包含了农历已经老皇历的功能,是一个挑好日子的工具.同时日历还可以查看本年度的放假安排,功能非常强大.有兴趣的朋友可以下载学习. 在线演示 源码下载 2.CSS3发光进度条动画 超炫酷的样式 这次我们要来分享一款非常炫酷的CSS3进度条动画,其样式风格类似于星球大战里面的那些激光剑效果.页面初始化时,可以设定进度条的值,但是我们也可以利用其配套的借口来动态改

C# 6.0 (C# vNext) 的新功能:Exception-Handling Improvements

于 C# 6.0 包裹在异常处理的新功能,有两个方面的改进: 异步处理(async and await)能力 catch block 总结使用.于 C# 5.0 释放 async and await,在那个时候它不能用 catch block.现在能够做到这一点. 支持异常过滤 exception filtering 异步处理的样例: try { WebRequest webRequest = WebRequest.Create("http://www.csdn.net"); WebR