.jpg)
.jpg)
扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要讲解了“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()方法可以删除被选元素的父元素。