jQuery3的新特性
前言:自从react,vue等方便的新框架出现后,好多大公司已经摒弃了jquery,但是大部分的公司还在使用,并且jquery的版本还在一直更新中。jquery2.x版本将不再支持IE6/7/8浏览器。现在更新到的最新版本3.x增加了一些新特性,也摒弃了一些特性。接下来就总结一下:
一,增加的一些特性
1,for...of循环
可以用来遍历一个jquery集合所有的DOM元素。
假设你想给页面中每个input元素分配一个ID,在jQuery3之前,你可以这样写:
- var inputs = $('input');
- for(var i=0;i<inputs.length;i++){
- inputs[i].id = 'input-'+i;
- }
jQuery3:
- var inputs = $('input');
- var i=0;
- for(var input of inputs){
- input.id = 'input-'+i++;
- }
2,采用requestAnimationFrame()来实现动画
IE10以上的版本都支持这个函数
3,unwrap()
该方法增加了一个可选的选择器参数
- unwrap([selector])
有了这一变化,你就可以传入包含一个选择器表达式的字符串,在父元素进行匹配,如果存在匹配,匹配的子元素被解包,不进行任何操作。
二,被修改的一些特性
1,:visible和:hidden
修改了过滤器的含义,只要元素具有任何布局,包括那些宽度或高度为0的情况,元素被认为是:visible。比如说 <br/>元素和没有内容的内联元素可以通过:visible过滤器进行选择
- <div></div>
- <br />
- console.log($('body:visible').length);
jquery 1.x 2.x中输出的结果是0, jquery 3中结果是2。
2,data()
该调整主要是为了让该方法符合DatasetAPI规范,jquery3 强所有属性的键都该驼峰式大小写形式
- <div id="container"></div>
- var $elem = $('#container');
- $elem.data({
- 'my-property':'hello'
- });
- console.log($elem.data());
在控制台上获得以下结果:{my-property:"hello"}
在jquery3 {myProperty:"hello"}
3,Deferred对象
jquery 1.x 2.x 中 ,传入deferred中的回调函数中如果出现未捕获异常,会导致程序停止执行。而原生的Promise对象并非如此,它会抛出异常,并不断向上冒泡,直至到达window.onerror。
jquery3遵循原生的Promise对象的模式,因此,抛出的异常将被视为一个失败状态(rejection)从而执行失败回调,完成之后,整个进程 将继续进行,后续的成功回调将被执行。
- var deferred = $.Deferred();
- deferrea.then(function(){
- throw new error('an error');
- }).then(
- function(){
- console.log('success 1');
- },function(){
- console.log('failure 1');
- }).then{
- function(){
- console.log('success 2');
- },function(){
- console.log('failure 2');
- }
- );
- deferred.resolve();
在jquery 1.x 2.x中,只有第一个函数会被执行到,由于没有window.onerror定义任何事件处理函数,所以控制台会输出“Uncaught Error:an error”,而且进程的执行将终止
而jquery3中,行为完全不同,在控制台中会看到failure1 和success2两条消息。异常会被第一个失败回调处理,一旦被处理,则继续执行下面的成功函数。
三,已废弃,移除的方法和属性
1,废弃了bind(),unbind(),delegate(),undelegate()
用on()方法提供了统一的访问接口,取代了bind(),delegate(),live()
off()取代了unbind(),undelegate(),die()
2,移除了load(),unload(),error()
3,移除context,support,selector这些属性
4,bugs修复: width()和height()的返回值不再四舍五入
5,wrapAll()
jQuery3的新特性的更多相关文章
- SQL Server 2014 新特性——内存数据库
SQL Server 2014 新特性——内存数据库 目录 SQL Server 2014 新特性——内存数据库 简介: 设计目的和原因: 专业名词 In-Memory OLTP不同之处 内存优化表 ...
- ElasticSearch 5学习(10)——结构化查询(包括新特性)
之前我们所有的查询都属于命令行查询,但是不利于复杂的查询,而且一般在项目开发中不使用命令行查询方式,只有在调试测试时使用简单命令行查询,但是,如果想要善用搜索,我们必须使用请求体查询(request ...
- [干货来袭]C#6.0新特性
微软昨天发布了新的VS 2015 ..随之而来的还有很多很多东西... .NET新版本 ASP.NET新版本...等等..太多..实在没消化.. 分享一下也是昨天发布的新的C#6.0的部分新特性吧.. ...
- CSS3新特性应用之结构与布局
一.自适应内部元素 利用width的新特性min-content实现 width新特性值介绍: fill-available,自动填充盒子模型中剩余的宽度,包含margin.padding.borde ...
- 【译】Meteor 新手教程:在排行榜上添加新特性
原文:http://danneu.com/posts/6-meteor-tutorial-for-fellow-noobs-adding-features-to-the-leaderboard-dem ...
- 跨平台的 .NET 运行环境 Mono 3.2 新特性
Mono 3.2 发布了,对 Mono 3.0 和 2.10 版本的支持不再继续,而且这两个分支也不再提供 bug 修复更新. Mono 3.2 主要新特性: LLVM 更新到 3.2 版本,带来更多 ...
- Atitit opencv版本新特性attilax总结
Atitit opencv版本新特性attilax总结 1.1. :OpenCV 3.0 发布,史上功能最全,速度最快的版1 1.2. 应用领域2 1.3. OPENCV2.4.3改进 2.4.2就有 ...
- es6 新特性2
es6其他几个非常有用的新特性. import export 这两个家伙对应的就是es6自己的module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成 ...
- ES6 新特性
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...
随机推荐
- jquery easyui-datagrid/treegrid 清空数据参考
在使用easyui的treegrid或datagrid的过程经常会有这样的场景,如:需要按不同的类型加载数据时,如果选择的分类下没有数据应该把上次展示的数据清空,以免引用歧义.下面给出两种方法供初学者 ...
- opencv,图片遍历
//肤色提取,skinArea为二值化肤色图像 void skinExtract(const Mat &frame, Mat &skinArea) { Mat YCbCr; vecto ...
- unrar.dll 使用实例
/* * main.cpp * * Created on: Aug 17, 2015 * Author: smallcroco * * Discription: * 1 首先打开解压包,可以设置打开方 ...
- Windows Phone 十二、设计器同步
在设计阶段为页面添加数据源 Blend或者VS的可视化设计器会跑我们的代码,然后来显示出来,当我们Build之后,设计器会进入页面的构造函数,调用InitializeComponent();方法来将U ...
- Spring Mvc + Mybatis + sqlserver maven
mybatis config datasource: <!-- 配置数据源 使用的是Druid数据源 --> <bean name="dataSource" c ...
- Win 播放器
先上图 主要包含的功能有: 打开播放文件, 暂停, 恢复, 停止, 设置声音大小, 设置进度, 获取当前播放进度, 时间进度 提供的源码, 主要采用DSPACK234这个控件 为提高解码的成功率最好先 ...
- 控制反转Inversion of Control (IoC) 与 依赖注入Dependency Injection (DI)
控制反转和依赖注入 控制反转和依赖注入是两个密不可分的方法用来分离你应用程序中的依赖性.控制反转Inversion of Control (IoC) 意味着一个对象不会新创建一个对象并依赖着它来完成工 ...
- python与ruby的差别
1.引用文件差别 Ruby:同一目录下的文件,如/usr/local/ruby/foo.rb与/usr/local/ruby/bar.rb两个文件.如果直接在foo.rb中 require 'bar' ...
- Qt qml pageview 左右滑动分页组件
[先看效果] [下载]http://download.csdn.net/detail/surfsky/8516949 [调用] 分页视图 左右分页滑动列表组件 示例 PageView{ id: pv ...
- Qt Creator pro 文件 导入vs2013碰到的问题
显示error LNK1117:sytax error in option... 解决办法 从Properties --> Linker --> Command Line 中删掉Addit ...