What is the difference between jquery version 2.x and 3.x-Front-end Q&A-php.cn

Difference: 1. 2.x will no longer be updated. The official only does bug maintenance and no new functions will be added. 3.x is the official version that is mainly updated and maintained, and functions will continue to be added. 2. 3.x supports "for...of" loop statement, 2.x does not support ". 3. 2.x uses setInterval to implement animation, and 3.x uses requestAnimationFrame() to implement animation. 4. 3. width() and height() in .6.1 version, Dell G3 computer.

jQuery What is the difference between jquery version 2.x and 3.x

Since its birth in

2006

, a release## There are three major versions: #1.x, 2.x, 3.x . Under these three major versions, many smaller versions are subdivided. Version. Some friends may not know the difference between these versions. Which version should be used in actual development? Let me summarize it below. 1. 1.x, 2.x, Differences between the three major 3.x series1, Comparison of IE support

(1) Situation analysis

1.x: Supports

ie6

ie7

ie82.x , 3.x: Not supported
,
ie7, ie8##2.X It is not compatible with ie678 and is rarely used by people. The official only does bug maintenance and no new functions will be added. If you do not consider compatibility with lower version browsers, you can use 2.x. Final version: 2.2.4 (May 20, 2016) 3.X is not compatible with ie678 and only supports the latest browsers. Unless there are special requirements, version 3.x is generally not used. Many old jQuery plug-ins do not support this version. Currently this version is the official main Update the maintained version. (2) Select the suggestion

If you need to be compatible with

ie678

: you can only choose

1.x

If you do not need to be compatible with

: You can choose 2.x, 3.x. Because most of the codes in
are Compatibility with old browsers increases the operating burden and affects operating efficiency.2. Plug-in support is relatively low (1) Situation analysis

Because the versions of

jQuery

are not backward compatible, resulting in problems based on

jQuery

The developed plug-ins will have compatibility issues. That is to say, when the new version of jQuery is launched, the original plug-ins may not work properly and need to be re-developed by the plug-in author. new version. (2) Selection suggestionsIn order to ensure better compatibility with various plug-ins, you can choose1.x

version of.

3, new feature comparison(1)2.x

Compared with 1 .x

does not add any new features, mainly removes the support of ie678 , improves performance, and reduces physical examination. (2)3.x Compared with the previous version, many new features have been added and some previous features have also been changed.

2. Specific version suggestions

1, version history

# #Version number

Release date##1.3.2##55.91.42010 1 Month 14##1.5.283 Delayed callback management, ajax##1.6.489Significant improvement between ##1.7: 1.81.91.10##1.11.3 (April 28, 2015)95.9January 8, 2016 Day1.12.4 (May 20, 2016)95April 18, 20132.0.3 (2013 July 3, 2018)81.1Remove support for January 24, 2014January 8, 20163.0.0 (June 9, 2016)##3.1July 7, 2016jQuery.readyException84.6Added support for retrieving the content of the 3.3January 19, 201884.8 Deprecated the old function, the function can now accept classes, and supports writing them as Array format.

Latest update	Size (KB)	Remarks	##1.0	August 26, 2006
	First stable version		1.1	##January 14, 2007
		##1.2	September 10, 2007	##1.2.6
54		#1.3	January 14, 2009
will Sizzle	Selector engine introduced into the core			##1.4.4 76
	##1.5	January 31, 2011
Module rewriting
##1.6	May 3, 2011			attr() and val()Performance
##November 3, 2011	1.7.2 (March 21, 2012)	92	New events API	.on() and .off(), while the old API is still supported.
August 9, 2012	1.8 .3 (November 13, 2012)	91.4	Rewrite Sizzle	Selector engine, improved animation and $(html, props) flexibility.
January 15, 2013	1.9 .1 (February 4, 2013)	90	Remove deprecated interfaces and clean up code
May 24, 2013	1.10.2 (July 2013 3rd)	91	Fixed	1.9 and 2.0 beta Version cycle bugs and differences ## 1.11
January 24, 2014				1.12
				2.0
			IE 6-8 to improve performance, and Reduce file size	##2.1
2.1.4 (April 28, 2015)	82.4		##2.2
##2.2.4 (May 20, 2016)	85.6		##3.0	2016 June 9
##86.3	Deferred, $.ajax, $.when support Promises/A, making .data() compatible with HTML5			##3.1.1 (September 23, 2016)
86.3	Join	, ready handler	Errors will no longer be displayed	3.2March 16, 2017##3.2.1 (2017 March 20, 2018)
				3.3 .1 (January 20, 2018)
		2, 1.x commonly used version 1.4.2: The stability and compatibility are excellent, with the most plug-ins, but the performance is not as good as The following versions are below. 1.7.2: Performance improvement, second most plug-ins, ajax and attr etcapi There are slight modifications. 1.8.3: The last stable version that supports IE6 1.9.1: Many methods have been removed at the beginning. For event binding, it is recommended to use on method one instead of all. 1.12.4: 1.x The last stable version of the era, only supports IE8, not IE6/7. 3, 2.x, 3.x versions Unless there are special requirements (such as for mobile terminals), these two versions are generally used There are indeed very few people: 2.x The last stable version: 2.2.4 3.x Latest version: 3.6.1 ##3. Summary of new features of jQuery3 Different from jQuery 2, the main thing is to improve performance. jQuery 3 actually adds many new features. I will summarize these new features in this article. (1) New features 1, support for...of loop statement In jQuery 3, we can use the for...of loop statement to iterate over all ## in a jQuery collection #DOM element. This new iteration method is part of the ECMAScript 2015 (i.e. ES6) specification. This method can loop over "Iterable objects" (such as Array, Map, Set , etc.). (1) For example, in the past we used for to loop through all input elements on the page, And modify its ID, you can write it like this: for(var i = 0; i Copy after login (2) How can you use the new for...of loop to write like this: var i = 0; for(var input of $('input')) { input.id = 'input-' + i++; } Copy after login Note: for...of The value obtained each time in the loop body is not a jQuery object, but A DOM element. This is similar to the .each() method provided by jQuery . $('input').each(function(index,item){ item.id = 'input-' + index; }); Copy after login 2, $.get() and $.post() added new parameter types [settings] (1) jQuery 3 Added new parameter types for the two methods $.get() and $.post() #[settings], so that they are consistent with the interface style of $.ajax(). The only difference between //过去这么写 $.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); } }); Copy after login (2) and $.ajax() is: if $.get() and $.post() The [settings] passes the method attribute, the method attribute is passed value will be ignored. $.get({ url: 'test.php', method: 'POST' //这个将被忽略，仍然是get请求 }); Copy after login 3, use requestAnimationFrame() to implement animation In previous versions, jQuery used setInterval Animate by continuously updating the CSS properties of the element. Each update will force the browser to redraw the page (reflow), and the general display 16.7ms refreshes once, if there are other setInterval # during this interval ##Request will cause "frame" to be lost, causing animation to freeze. (1) Almost all modern browsers (including IE 10 and above) now support requestAnimationFrame . requestAnimationFrame will continuously optimize the animation according to the browser's drawing time to make the animation smooth and reduce the consumption of CPU resources. (2) And jQuery 3 will use this API to execute the animation, making the animation playback smoother and faster. 4, the unwrap() method adds an optional parameter selector (1) We know to use unwrap() Method can delete the parent element of the selected element. <script> $(function() { $("input").unwrap(); }); </script> <div> <div> <input> </div> </div> Copy after login （2）jQuery 3 为 unwrap() 方法增加了一个可选参数 selector，我们可以通过这个字符串选择器匹配元素的父元素：如果匹配到：则移除父元素如果没有匹配到：就不移除父元素 $("input").unwrap(".wrapper3"); //由于没有匹配到，则不会移除父元素 Copy after login 5，addClass()、removeClass()、toggleClass() 方法可以接受类数组（1）过去想要通过 addClass()、removeClass()、toggleClass() 方法一次性设置多个类时，需要使用空格分开多个 class。 $("#div1").addClass("important blue"); Copy after login （2）而从 jQuery 3.3 起，这些方法可以直接接受类数组。 $("#div1").addClass(["important", "blue"]); Copy after login 6，新增了 $.escapeSelector() 方法（1）jQuery 3 新增的 $.escapeSelector() 函数可以用来转义 CSS 选择器中有特殊意义的字符或字符串。此方法对于一个 CSS 类名或一个 ID 包含的字符在 CSS 中具有特殊含义的情况下非常有用，如点或分号。（2）下面是一个简单的样例： <div>hangge.com</div> <div>hangge.com</div> //如果像下面这么写会直接报错 $('##div1').text(); $('.abc.def').text(); //$.escapeSelector()就是用来解决这个问题 $('#' + $.escapeSelector('#div1')).text(); $('.' + $.escapeSelector('abc.def')).text(); Copy after login （二）、有变更的特性 1，:visible 和 :hidden 过滤器含义变更（1）jQuery 3 修改了 :visible 和 :hidden 过滤器的定义。任何可用于布局的元素即使它们的高度宽度为 0，都会被认为是 :visible。（2）比如元素和没有内容的内联元素，现在都会被 :visible 过滤器匹配。 <div></div> <br> //在 jQuery 1.x 和 2.x 中，你得到的结果会是 0 //在 jQuery 3.x，你得到的结果会是 2 console.log($('body :visible').length); Copy after login 2，data() 方法（1）现在 data() 方法行为已经变得跟 Dataset API 规范一致。jQuery 3 将会把所有属性键名转换成驼峰形式。（2）比如下面一个样例：在 jQuery 1.x 和 2.x 中：属性名会保持全小写，并原样保留横杠。在 jQuery 3.x：属性名已经变成了驼峰形式，横杠已经被去除了。 /***************************** 测试样例 ****************************/ <div></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"} Copy after login 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(); Copy after login 在 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() 得到具体的宽度值： nbsp;html> <meta> <title>hangge.com</title> <script></script> <script> $(function() { var width = $('.container div').width() console.log(width); }); </script> <style> .container div { width: 33.3333%; float: left; } </style> <div> <div>My name</div> <div>is</div> <div>Aurelio De Rosa</div> </div> Copy after login 在 jQuery 1.x 和 2.x 中，输出结果如下：在 jQuery 3.x 中，输出结果如下： 2，wrapAll() 方法 (1)jQuery 3 Also fixed a bug in the wrapAll() method, this bug Appears when a function is passed to it as a parameter. In versions prior to jQuery 3, when a function was passed to the wrapAll() method, it would jQuery Each element of is wrapped individually. In other words, the behavior is exactly the same as when passing a function to wrap() . (2) While fixing this problem, another change was also introduced: Since in jQuery 3 , this function only It will be called once, then you cannot pass it every element in the jQuery collection. Therefore, the execution context of this function (this) will only point to the first element in the current jQuery** collection. [Recommended learning: jQuery video tutorial, web front-end video]

The above is the detailed content of What is the difference between jquery version 2.x and 3.x. For more information, please follow other related articles on the PHP Chinese website!