这篇文章主要讲解了“jquery版本2.x和3.x的区别有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery版本2.x和3.x的区别有哪些”吧!
创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:做网站、网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的米脂网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
区别:1、2.x不再更新,官方只做BUG维护,功能不再新增;3.x是官方主要更新维护的版本,功能持续新增。2、3.x支持“for...of ”循环语句,2.x不支持“。3、2.x利用setInterval来实现动画,3.x支采用requestAnimationFrame()来实现动画。4、3.x中width()和height()将不再将结果的像素值四舍五入到一个整数值。
本教程操作环境:windows7系统、jquery3.6.1版本、Dell G3电脑。
jQuery自 2006年诞生以来,一个发行了 1.x、2.x、3.x这三个大版本。而在这三个大版本下又细分了许多小版本。可能有些小伙伴不太清楚这些版本有什么区别?实际开发中应该选用哪个版本?下面我对其做个总结。
(1)情况分析
1.x:支持 ie6、ie7、ie8
2.x、3.x:不支持 ie6、ie7、ie8
2.X不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)
3.X不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。
(2)选择建议
如果需要兼容 ie678:只能选择 1.x
如果不需要兼容 ie678:可以选择 2.x、3.x。因为 1.x中有大部分代码是对老旧浏览器做的兼容,这个就增加了运行的负担,影响了运行效率。
(1)情况分析
由于 jQuery的版本都是不向后兼容的,导致了基于 jQuery开发的插件会有兼容性问题。也就是说当新版本的 jQuery推出后,原有的插件可能无法正常使用,需要插件作者重新开发新版本。
(2)选择建议
为了保证与各种插件有更好的兼容性可以选择 1.x的版本。
(1)2.x相较于 1.x没有增加什么新特性,主要是去除了 ie678的支持,提升了性能,减小了体检。
(2)3.x相较于之前版本,增加了许多新特性,也改变一些以往的特性。
版本号 | 发布日期 | 最新更新 | 大小(KB) | 备注 |
1.0 | 2006年8月26日 | 第一个稳定版本 | ||
1.1 | 2007年1月14日 | |||
1.2 | 2007年9月10日 | 1.2.6 | 54 | |
1.3 | 2009年1月14日 | 1.3.2 | 55.9 | 将 Sizzle选择器引擎引入核心 |
1.4 | 2010年1月14日 | 1.4.4 | 76 | |
1.5 | 2011年1月31日 | 1.5.2 | 83 | 延迟回调管理,ajax模块重写 |
1.6 | 2011年5月3日 | 1.6.4 | 89 | 显著改善 attr()与val()的性能 |
1.7 | 2011年11月3日 | 1.7.2 (2012年3月21日) | 92 | 新的事件 API:.on()和 .off(),而旧的 API仍然支持。 |
1.8 | 2012年8月9日 | 1.8.3 (2012年11月13日) | 91.4 | 重写 Sizzle选择器引擎,改善动画和 $(html, props)的灵活性。 |
1.9 | 2013年1月15日 | 1.9.1 (2013年2月4日) | 90 | 移除弃用接口,清理代码 |
1.10 | 2013年5月24日 | 1.10.2 (2013年7月3日) | 91 | 修复了1.9和 2.0 beta版本周期的 bug和差异 |
1.11 | 2014年1月24日 | 1.11.3 (2015年4月28日) | 95.9 | |
1.12 | 2016年1月8日 | 1.12.4 (2016年5月20日) | 95 | |
2.0 | 2013年4月18日 | 2.0.3 (2013年7月3日) | 81.1 | 除去对 IE 6-8的支持以提高性能,并降低文件大小 |
2.1 | 2014年1月24日 | 2.1.4 (2015年4月28日) | 82.4 | |
2.2 | 2016年1月8日 | 2.2.4 (2016年5月20日) | 85.6 | |
3.0 | 2016年6月9日 | 3.0.0 (2016年6月9日) | 86.3 | Deferred、$.ajax、$.when 支持 Promises/A+,令 .data() 兼容HTML5 |
3.1 | 2016年7月7日 | 3.1.1 (2016年9月23日) | 86.3 | 加入jQuery.readyException,ready handler错误现在不会不显示了 |
3.2 | 2017年3月16日 | 3.2.1 (2017年3月20日) | 84.6 | 增加了对检索元素内容的支持,弃用了多种旧方法。 |
3.3 | 2018年1月19日 | 3.3.1 (2018年1月20日) | 84.8 | 弃用旧函数,函数现在可以接受类,并支持其写成数组格式。 |
1.4.2:稳定性和兼容性都很出色,插件最多,但性能不如下面后面的几个版本。
1.7.2:性能提升,插件第二多,ajax和 attr等 api有少许修改。
1.8.3:最后一个支持 IE6的稳定版
1.9.1:开始移除了不少方法,事件绑定推荐使用 on方法一个代替所有的。
1.12.4:1.x时代最后一个稳定版本,仅支持 IE8,不支持 IE6/7。
除非有特殊要求(比如面向移动端),一般情况下这两大版本使用人的确很少:
2.x最后一个稳定版本:2.2.4
3.x最新版本:3.6.1
不同于 jQuery 2主要做的是性能的提升,jQuery 3是实实在在增加了许多新特性,本文我就对这些新特性做个汇总。
(一)、新增的特性
1,支持 for...of 循环语句
在 jQuery 3中,我们可以用 for...of循环语句来迭代一个 jQuery集合中的所有 DOM元素。这种新的迭代方法是 ECMAScript 2015(即 ES6)规范中的一部分。这个方法可以对 “可迭代对象”(比如 Array、Map、Set等)进行循环。
(1)比如过去我们使用 for循环遍历页面上的所有 input元素,并修改它的 ID,可以这么写:
for(var i = 0; i < $('input').length; i++) { $('input')[i].id = 'input-' + i; }
(2)使用新的 for...of循环怎可以这么写:
var i = 0; for(var input of $('input')) { input.id = 'input-' + i++; }
注意:for...of循环体内每次拿到的值并不是一个 jQuery对象,而是一个 DOM元素。这一点跟 jQuery自己提供的 .each()方法类似。
$('input').each(function(index,item){ item.id = 'input-' + index; });
2,$.get() 和 $.post() 增加了新的参数类型 [settings]
(1)jQuery 3为 $.get()和 $.post()这两个方法增加了新的参数类型 [settings],从而使得它们和 $.ajax()的接口风格保持一致。
//过去这么写 $.post('test.php', { name: 'hangge', age: 2 }, function (data) { console.log(data); }); // jQuery3 中可以这样写 $.post({ url: 'test.php', data: { name: 'hangge', age: 2 }, success: function (data) { console.log(data); } });
(2)与 $.ajax()唯一不同的是:如果 $.get()和 $.post()的 [settings]中传递了 method属性,method的属性值将被忽略掉。
$.get({ url: 'test.php', method: 'POST' //这个将被忽略,仍然是get请求 });
3,采用 requestAnimationFrame() 来实现动画
之前的版本中,jQuery使用 setInterval通过不断更新元素的 CSS属性产生动画。每次更新时会迫使浏览器对页面进行重绘(reflow),而一般显示器 16.7ms刷新一次,如果在这间隔期间有其他的 setInterval请求,就会导致”帧”丢失,造成动画卡顿。
(1)现在几乎所有的现代浏览器(包括 IE 10及以上版本),都支持 requestAnimationFrame。requestAnimationFrame会根据浏览器的绘制时间 对动画进行不断优化,使动画流畅并减少对 CPU资源的消耗。
(2)而 jQuery 3会使用这个 API执行动画,让动画的播放更加顺畅、速度更快。
4,unwrap() 方法增加一个可选参数 selector
(1)我们知道使用unwrap()方法可以删除被选元素的父元素。
(2)jQuery 3为 unwrap()方法增加了一个可选参数 selector,我们可以通过这个字符串选择器匹配元素的父元素:
如果匹配到:则移除父元素
如果没有匹配到:就不移除父元素
$("input").unwrap(".wrapper3"); //由于没有匹配到,则不会移除父元素
(1)过去想要通过 addClass()、removeClass()、toggleClass()方法一次性设置多个类时,需要使用空格分开多个 class。
$("#div1").addClass("important blue");
(2)而从 jQuery 3.3起,这些方法可以直接接受类数组。
$("#div1").addClass(["important", "blue"]);
(1)jQuery 3新增的 $.escapeSelector()函数可以用来转义 CSS选择器中有特殊意义的字符或字符串。此方法对于一个 CSS类名或一个 ID包含的字符在 CSS中具有特殊含义的情况下非常有用,如点或分号。
(2)下面是一个简单的样例:
hangge.comhangge.com//如果像下面这么写会直接报错 $('##div1').text(); $('.abc.def').text(); //$.escapeSelector()就是用来解决这个问题 $('#' + $.escapeSelector('#div1')).text(); $('.' + $.escapeSelector('abc.def')).text();
(二)、有变更的特性
1,:visible 和 :hidden 过滤器含义变更
(1)jQuery 3修改了 :visible和 :hidden过滤器的定义。任何可用于布局的元素 即使它们的高度宽度为 0,都会被认为是 :visible。
(2)比如
元素和没有内容的内联元素,现在都会被 :visible过滤器匹配。
//在 jQuery 1.x 和 2.x 中,你得到的结果会是 0 //在 jQuery 3.x,你得到的结果会是 2 console.log($('body :visible').length);
2,data() 方法
(1)现在 data()方法行为已经变得跟 Dataset API规范一致。jQuery 3将会把所有属性键名转换成驼峰形式。
(2)比如下面一个样例:
在jQuery 1.x和 2.x中:属性名会保持全小写,并原样保留横杠。
在jQuery 3.x:属性名已经变成了驼峰形式,横杠已经被去除了。
/******************************* 测试样例 ********************************/ var $elem = $('#container'); $elem.data({ 'my-property': 'hello' }); console.log($elem.data()); /******************************* jQuery 1.x 和 2.x 结果 ********************************/ {my-property: "hello"} /******************************* jQuery 3.x 结果 ********************************/ {myProperty: "hello"}
3,Deferred 对象
Deferred对象可以说是 Promise对象的前身之一,它实现了对 Promise/A+协议 的兼容。关于 Deferred更详细的用法可以参考我之前写的这篇文章:
JS - Promise使用详解3(jQuery中的Deferred)
(1)jQuery 3改变了 deferred对象的行为,使得 deferred对象可与新的 Promises/A+标准兼容。deferred对象成为了可链对象,让创建回调队列成为可能。
在 jQuery 1.x和 2.x中:传递给 deferred的回调函数内如果出现未捕获的异常,就会阻断程序的执行。不像原生 Promise对象那样会抛出异常冒泡至window.onerror(通常冒泡到这里)。如果你没有定义一个函数处理错误事件(通常我们是会处理的),那么异常信息就会显示并且程序会终止执行。
在 jQuery 3.x中:jQuery3遵循原生 Promise对象的模式。因此,抛出的异常被当作失败,接着失败回调函数被执行。一旦失败回调函数执行完成,进程就会继续,下面的成功回调函数将被执行。
(2)下面是一个简单的样例:
var deferred = $.Deferred(); deferred .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”,而且程序的执行将中止。
而在 jQuery 3中,整个行为是完全不同的。你将在控制台中看到“Failure 1”和“Success 2”两条消息。那个异常将会被第一个失败回调处理,并且,一旦异常得到处理,那么后续的成功回调将被调用。
4,类操作方法支持 SVG
(1)可惜的是,jQuery现在还无法完全支持 SVG(包括 jQuery3)。
(2)但是在 jQuery 3中,对于操作 CSS类名称的 jQuery方法,如 addClass()和 hasClass()现在可以将 SVG文档作为目标。这意味着,我们可以修改(添加、移除、切换),或是寻找 SVG下的 jQuery类,然后使用 CSS的样式。
废弃与移除的区别:
废弃:是指一些方法还在存在于 jQuery源码中,但是已经提供了新方法来替换那些方法。
移除:是指一些方法已经从 jQuery源码中删除了。
(1)在很早之前,bind()、delegate()、unbind()和 undelegate()就已经不再推荐使用了,但它们还是一直存在着:
jQuery在很久以前就引入了on()方法,它提供了一个统一的接口,用以取代 bind()、delegate()和 live()等方法。
同时,jQuery还引入了 off()这个方法来取代 unbind()、undelegated()和 die()等方法。
(2)jQuery 3终于开始将这些方法标记为 “废弃” 了,并计划在未来的某个版本(很可能是 jQuery 4)中将它们彻底移除。因此,建议我们在项目中统一使用 on()和 off()方法,这样就不用担心未来版本的变更了。
load()、unload()和 error()等方法在很早以前(从 jQuery 1.8开始)就已经被标记为废弃了,但一直没有去掉。这次 jQuery 3彻底将它们移除了。
jQuery3移除了已经废弃的 context、support和 selector属性。
四、修复了之前版本中存在的重大 Bug
1,width() 和 height() 的返回值将不再取整
(1)在 jQuery 3中,width()和 height()及所有其它相关方法将不再将结果的像素值四舍五入到一个整数值,因为四舍五入后在某些情况下很难对元素进行定位。
(2)比如下面样例,container容器内有三个子元素,它们宽度均为父容器的 1/3。我们通过 width()得到具体的宽度值:
hangge.com My nameisAurelio De Rosa
在jQuery 1.x和2.x中,输出结果如下:
在 jQuery 3.x中,输出结果如下:
2,wrapAll() 方法
(1)jQuery 3还修复了 wrapAll()方法中的一个 bug,这个 bug出现在把一个函数作为参数传给它的情况下。在 jQuery 3以前的版本中,当一个函数被传给 wrapAll()方法时,它会把 jQuery集合中的每个元素单独包裹起来。换句话说,这种行为和把一个函数传给 wrap()时的行为是完全一样的。
(2)在修复这个问题的同时,还引入了另外一个变更:由于在jQuery 3中,这个函数只会调用一次了,那就无法把 jQuery集合中每个元素都传给它。因此,这个函数的执行上下文(this)将只能指向当前jQuery集合中的第一个元素。
感谢各位的阅读,以上就是“jquery版本2.x和3.x的区别有哪些”的内容了,经过本文的学习后,相信大家对jquery版本2.x和3.x的区别有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!