区别：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.x、2.x、3.x 三大系列的区别
1，IE 的支持情况比较
（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 中有大部分代码是对老旧浏览器做的兼容，这个就增加了运行的负担，影响了运行效率。
2，插件的支持情况比较
（1）情况分析
-
由于 jQuery 的版本都是不向后兼容的，导致了基于 jQuery 开发的插件会有兼容性问题。也就是说当新版本的 jQuery 推出后，原有的插件可能无法正常使用，需要插件作者重新开发新版本。
（2）选择建议
-
为了保证与各种插件有更好的兼容性可以选择 1.x 的版本。
3，新特性比较
（1）2.x 相较于 1.x 没有增加什么新特性，主要是去除了 ie678 的支持，提升了性能，减小了体检。
（2）3.x 相较于之前版本，增加了许多新特性，也改变一些以往的特性。
二、具体版本建议
1，版本历史
|
版本号 |
发布日期 |
最新更新 |
大小（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 |
增加了对检索<template>元素内容的支持，弃用了多种旧方法。 |
|
3.3 |
2018年1月19日 |
3.3.1 (2018年1月20日) |
84.8 |
弃用旧函数，函数现在可以接受类，并支持其写成数组格式。 |
2，1.x 常用版本
-
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。
3，2.x、3.x 版本
除非有特殊要求（比如面向移动端），一般情况下这两大版本使用人的确很少：
-
2.x 最后一个稳定版本：2.2.4
-
3.x 最新版本：3.6.1
三、jQuery3的新特性汇总
不同于 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() 方法可以删除被选元素的父元素。
<script type="text/javascript"> $(function() { $("input").unwrap(); });</script><div class="wrapper1"> <div class="wrapper2"> <input type="text"> </div></div>
（2）jQuery 3 为 unwrap() 方法增加了一个可选参数 selector，我们可以通过这个字符串选择器匹配元素的父元素：
-
如果匹配到：则移除父元素
-
如果没有匹配到：就不移除父元素
$("input").unwrap(".wrapper3"); //由于没有匹配到，则不会移除父元素
5，addClass()、removeClass()、toggleClass() 方法可以接受类数组
（1）过去想要通过 addClass()、removeClass()、toggleClass() 方法一次性设置多个类时，需要使用空格分开多个 class。
$("#div1").addClass("important blue");
（2）而从 jQuery 3.3 起，这些方法可以直接接受类数组。
$("#div1").addClass(["important", "blue"]);
6，新增了 $.escapeSelector() 方法
（1）jQuery 3 新增的 $.escapeSelector() 函数可以用来转义 CSS 选择器中有特殊意义的字符或字符串。此方法对于一个 CSS 类名或一个 ID 包含的字符在 CSS 中具有特殊含义的情况下非常有用，如点或分号。
（2）下面是一个简单的样例：
<div id="#div1">hangge.com</div><div class="abc.def">hangge.com</div> //如果像下面这么写会直接报错$('##div1').text();$('.abc.def').text(); //$.escapeSelector()就是用来解决这个问题$('#' + $.escapeSelector('#div1')).text();$('.' + $.escapeSelector('abc.def')).text();
（二）、有变更的特性
1，:visible 和 :hidden 过滤器含义变更
（1）jQuery 3 修改了 :visible 和 :hidden 过滤器的定义。任何可用于布局的元素 即使它们的高度宽度为 0，都会被认为是 :visible。
（2）比如 <br> 元素和没有内容的内联元素，现在都会被 :visible 过滤器匹配。
<body> <div></div> <br/></body> //在 jQuery 1.x 和 2.x 中，你得到的结果会是 0//在 jQuery 3.x，你得到的结果会是 2console.log($('body :visible').length);
2，data() 方法
（1）现在 data() 方法行为已经变得跟 Dataset API 规范一致。jQuery 3 将会把所有属性键名转换成驼峰形式。
（2）比如下面一个样例：
-
在 jQuery 1.x 和 2.x 中：属性名会保持全小写，并原样保留横杠。
-
在 jQuery 3.x：属性名已经变成了驼峰形式，横杠已经被去除了。
/******************************* 测试样例********************************/<div id="container"></div> 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()、unbind()、delegate() 和 undelegate() 方法
（1）在很早之前，bind()、delegate()、unbind() 和 undelegate() 就已经不再推荐使用了，但它们还是一直存在着：
-
jQuery 在很久以前就引入了 on() 方法，它提供了一个统一的接口，用以取代 bind()、delegate() 和 live() 等方法。
-
同时，jQuery 还引入了 off() 这个方法来取代 unbind()、undelegated() 和 die() 等方法。
（2）jQuery 3 终于开始将这些方法标记为 “废弃” 了，并计划在未来的某个版本（很可能是 jQuery 4）中将它们彻底移除。因此，建议我们在项目中统一使用 on() 和 off() 方法，这样就不用担心未来版本的变更了。
2，移除 load()、unload() 和 error() 方法
load()、unload() 和 error() 等方法在很早以前（从 jQuery 1.8 开始）就已经被标记为废弃了，但一直没有去掉。这次 jQuery 3 彻底将它们移除了。
3，移除 context、support 和 selector 属性
jQuery3 移除了已经废弃的 context、support 和 selector 属性。
四、修复了之前版本中存在的重大 Bug
1，width() 和 height() 的返回值将不再取整
（1）在 jQuery 3 中，width() 和 height() 及所有其它相关方法将不再将结果的像素值四舍五入到一个整数值，因为四舍五入后在某些情况下很难对元素进行定位。
（2）比如下面样例，container 容器内有三个子元素，它们宽度均为父容器的 1/3。我们通过 width() 得到具体的宽度值：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>hangge.com</title> <script src="js/jquery-3.3.1.min.js" charset="utf-8"></script> <script type="text/javascript"> $(function() { var width = $('.container div').width() console.log(width); }); </script> <style> .container div { width: 33.3333%; float: left; } </style> </head> <body> <div class="container"> <div>My name</div> <div>is</div> <div>Aurelio De Rosa</div> </div> </body></html>
-
在 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的区别有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
文章标题：jquery版本2.x和3.x的区别有哪些，发布者：亿速云，转载请注明出处：https://worktile.com/kb/p/23939
微信扫一扫 
支付宝扫一扫 
