ホームページ > 記事 > ウェブフロントエンド > jqueryバージョン2.xと3.xの違いは何ですか

jqueryバージョン2.xと3.xの違いは何ですか

青灯夜游オリジナル: 2022-09-07 16:55:471921ブラウズ

違い: 1. 2.x はアップデートされなくなります。公式はバグメンテナンスのみを行い、新しい機能は追加されません。3.x は主にアップデートとメンテナンスが行われる正式バージョンであり、機能は追加されません。追加され続けます。 2. 3.x は "for...of" ループステートメントをサポートしますが、2.x は "をサポートしません。 3. 2.x は setInterval を使用してアニメーションを実装し、3.x は requestAnimationFrame() を使用してアニメーションを実装します。 4. 3. .6.1 バージョンの width() と height()、Dell G3 コンピューター

jQuery jqueryバージョン2.xと3.xの違いは何ですか

2006 年に誕生して以来

、リリース## 3 つのメジャーバージョンがあります: #1.x、2.x、3.x 。これら 3 つのメジャーバージョンの下にあります。バージョン。これらのバージョンの違いを知らない友人もいるかもしれません。実際の開発ではどのバージョンを使用するべきですか? 以下にまとめてみましょう。1. 1.x 、2.x、3.x 主要 3 シリーズの違い1、IE サポートの比較

(1) 状況分析

1.x:

ie6

、

ie7

ie8 をサポート2.x 、 3.x: サポートされていません
、
ie7、ie8 #2.X ie678との互換性がなくあまり使われていませんが、公式はバグメンテナンスのみで新機能の追加はありません、下位バージョンのブラウザとの互換性を考慮しない場合は2.xでも問題ありません。バージョン: 2.2.4 (2016 年 5 月 20 日) 3.X は ie678 と互換性がなく、最新のブラウザのみをサポートします。特別な要件がない限り、通常はバージョン 3.x は使用されません。古い jQuery が多くあります。プラグインはこのバージョンをサポートしていません。現在、このバージョンが正式なメインです。メンテナンスされているバージョンを更新してください。 (2) 提案を選択します。

# との互換性が必要な場合##ie678

: 選択できるのは

1.x

のみです。

ie678

との互換性が必要ない場合は、

、3.x. 1.x のコードのほとんどは古いブラウザとの互換性があるため、操作負荷が増加し、操作効率に影響します。
2. プラグインのサポートが比較的低い # (1) 状況分析理由は、jQuery

には下位互換性がないため、jQuery## に基づいて問題が発生します

# 開発されたプラグインには互換性の問題が発生します。つまり、

jQuery# の新しいバージョンが適用されると、互換性の問題が発生します。

(2) 選択の提案さまざまなプラグインとの互換性を高めるために、1.x # を選択できます。の##バージョン。 3、新機能の比較

(1)

2.x

1 との比較。 x

ie678

のサポートを削除し、パフォーマンスを向上させ、身体検査を減らします。

(2)3.x 以前のバージョンと比較して、多くの新機能が追加され、以前の機能もいくつか変更されています。 2. 特定のバージョンの提案1、バージョン履歴

# #バージョン番号

リリース日

最新の更新

サイズ (KB)##1.02006 年 8 月 26 日#最初の安定バージョン## 1.1##1.2.6##1.32009 年 1 月 14 日1.3.2Sizzleセレクターエンジンがコアに導入される1.42010 1 か月 141 月31, 2011ajax ##1.6.489##1.7.on()#90#1.102013 年 5 月 24 日および 1.11.3 (2015 年 4 月 28 日)95.9#1.122016 年 1 月 8 日日1.12.4 (5 月 20 日) 、2016)2.02013 年 4 月 18 日2.0.3 (2013 年 7 月 3 日、2018 年 7 月 3 日) のサポートを削除してパフォーマンスを向上させ、ファイルサイズを削減します## 2.2.4 (2016 年 5 月 20 日)85.6#86.3##Joinready handler

備考
	##2007 年 1 月 14 日
##1.2	2007 年 9 月 10 日		54
		##55.9	予定
		##1.4.4	#76	##1.5
##1.5.2	83	遅延コールバック管理、	モジュールの書き換え
##1.6	2011 年 5 月 3 日			attr() と val()# 間の大幅な改善 # #パフォーマンス
##2011 年 11 月 3 日	1.7.2 (3 月 21 日) 、2012)	92	新しいイベント API :	および .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 日)	#非推奨のインターフェイスを削除し、コードをクリーンアップ
1.10.2 (2013 年 7 月 3 日)	91	修正	1.9	2.0 ベータ版 # バージョンサイクルバグと相違点## 1.11 2014 年 1 月 24 日

95
81.1	#IE 6-8		##2.1	2014 年 1 月 24 日 2.1.4 (2015 年 4 月 28 日)
82.4		##2.2	2016 年 1 月 8 日
	##3.0	2016 6 月 9	3.0.0 (2016 年 6 月 9 日)
Deferred、$.ajax、$.when が Promises/A をサポートし、.data() と HTML5 との互換性を実現	##3.1	2016 年 7 月 7 日	##3.1.1 (2016 年 9 月 23 日)	86.3
jQuery.readyException 、	エラーは表示されなくなります		3.2	2017 年 3 月 16 日 ##3.2.1 (2017 年 3 月 20 日) 、2018)84.6
	3.3	2018 年 1 月 19 日	3.3 .1 (2018 年 1 月 20 日)	84.8
2、1.x 一般的に使用されるバージョン 1.4.2: 安定性と互換性が優れており、ほとんどのプラグインが使用できます。ただし、パフォーマンスは次のバージョンほど良くありません。 1.7.2: パフォーマンスの向上、2 番目に多いプラグイン、ajax および attr etcapi 若干の変更があります。 1.8.3: IE6 をサポートする最後の安定バージョン1.9.1: 多くのメソッドが最初から削除されているため、イベントバインディングについては、すべてではなく on メソッド 1 を使用することをお勧めします。 1.12.4: 1.x 時代の最後の安定バージョンは、IE8のみをサポートし、#はサポートしません。 # #IE6/7。 3、2.x、3.x バージョン特別な要件 (モバイル端末など) がない限り、通常はこれら 2 つのバージョンが使用されます確かに人はほとんどいません: 2.x 最後の安定バージョン: 2.2.4 3.x 最新バージョン: 3.6.1 ##3. jQuery3 の新機能の概要 jQuery 2 とは異なり、主にパフォーマンスの向上が図られています。jQuery 3 では実際に多くの新機能が追加されています。この記事ではこれらの新機能についてまとめます。 (1) 新機能 1、ループ文のサポート jQuery 3 では、for...of ループステートメントを使用して、jQuery コレクション #DOM # 内のすべての ## を反復できます。＃＃要素。この新しい反復メソッドは、ECMAScript 2015 (つまり、ES6) 仕様の一部です。このメソッドは、「Iterable オブジェクト」(Array、Map、Set など) をループできます。 (1) たとえば、以前は for を使用してすべての input をループしていました。ページ上の要素を編集し、その ID を変更するには、次のように記述できます: for(var i = 0; 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() に新しいパラメータタイプが追加されました [設定](1) jQuery 3 2 つのメソッド $.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) が強制され、この間隔中に他の setInterval # がある場合、一般的な表示 16.7ms が 1 回更新されます ##Request 「フレーム」が失われ、アニメーションがフリーズします。 (1) ほぼすべての最新のブラウザ (IE 10 以降を含む) が requestAnimationFrame をサポートするようになりました。 requestAnimationFrame は、ブラウザの描画時間に応じてアニメーションを継続的に最適化して、アニメーションをスムーズにし、 CPU リソースの消費を削減します。 (2) そして、jQuery 3 は、この API を使用してアニメーションを実行し、アニメーションの再生をよりスムーズかつ高速にします。 4、unwrap() メソッドはオプションのパラメーターセレクターを追加します (1) unwrap()# を使用することがわかっています。 # # このメソッドは、選択した要素の親要素を削除できます。 <script> $(function() { $("input").unwrap(); }); </script> <div> <div> <input> </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>hangge.com</div> <div>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）比如元素和没有内容的内联元素，现在都会被 :visible 过滤器匹配。 <div></div> <br> //在 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：属性名已经变成了驼峰形式，横杠已经被去除了。 /***************************** 测试样例 ****************************/ <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"} 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() 得到具体的宽度值： 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> 在 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 ビデオチュートリアル、Web フロントエンドビデオ ]