Apakah perbezaan antara versi jquery 2.x dan 3.x

Perbezaan: 1. 2.x tidak akan dikemas kini lagi, pegawai hanya melakukan penyelenggaraan pepijat, dan tiada fungsi baharu akan ditambah 3.x ialah versi rasmi yang kebanyakannya dikemas kini dan diselenggara, dan berfungsi akan terus ditambah. 2. 3.x menyokong pernyataan gelung "for...of", 2.x tidak menyokong ". 3. 2.x menggunakan setInterval untuk melaksanakan animasi, dan 3.x menggunakan requestAnimationFrame() untuk melaksanakan animasi. 4. 3 . width() dan height() dalam x tidak lagi akan membulatkan nilai piksel yang terhasil kepada versi .6.1, komputer Dell G3

jQuery

Sejak. kelahirannya pada tahun 2006

, satu telah dikeluarkan >1.x, 2.x, 3.x terbahagi kepada tiga versi utama Terdapat banyak versi kecil Mungkin sesetengah rakan tidak pasti apakah perbezaan antara versi ini yang harus digunakan dalam pembangunan sebenar. x, 2. Perbezaan antara tiga siri utama 1.x: menyokong ie6, ie7, ie8

2 .x

, 3.x: Tidak disokong

2. 20 Mei 2019)

3 , versi ini ialah versi yang dikemas kini dan diselenggara secara rasmi (2) Pilih pengesyoran

• Jika anda perlu serasi dengan ie678: anda hanya boleh memilih . 1. xJika anda tidak perlu serasi dengan ie678
: anda boleh memilih
• 2.x

  , 3.x kerana 1 Kebanyakan kod dalam x serasi dengan penyemak imbas lama, yang meningkatkan beban operasi dan menjejaskan kecekapan operasi sokongan. dalam Pemalam yang dibangunkan berdasarkan jQuery akan mempunyai masalah keserasian, maksudnya, apabila versi baharu jQuery

dilancarkan. , pemalam asal akan terjejas Ia mungkin tidak berfungsi dengan betul dan memerlukan pengarang pemalam untuk membangunkan versi baharu.

(2) Cadangan pemilihan

Untuk memastikan keserasian yang lebih baik dengan pelbagai pemalam, anda boleh memilih

1.x

• versi .
3, perbandingan ciri baharu
• (1)2.x berbanding 1 .x

tidak menambah sebarang ciri baharu, terutamanya menghilangkan sokongan

ie678

, meningkatkan prestasi dan mengurangkan pemeriksaan fizikal.

(2)

3.x
• Berbanding dengan versi sebelumnya, banyak ciri baharu telah ditambah dan beberapa ciri terdahulu juga telah ditukar. 2. Cadangan versi khusus1. Sejarah versi

Nombor versi

• Tarikh keluaran

Kemas kini terkini

Saiz (KB)

Catatan1.0

26 Ogos 2006

Versi stabil pertama

1.110 September 20071.2.654DesisEnjin pemilih diperkenalkan dalam teras1.42010 1 Bulan 141.4.4761.5 31 Januari 20111.5.283Penulisan semula modul18 April 20132.0.3 (2013 3 Julai) 81.1 untuk meningkatkan prestasi dan Kurangkan saiz fail2.1 24 Januari 20142.1.4 (28 April 2015)82.4 🎜>

86.3

2, 1.x versi yang biasa digunakan

• 1.4.2: Kestabilan dan keserasian sangat baik, dengan pemalam terbanyak, tetapi prestasinya tidak sebaik Versi berikut adalah di bawah.
• 1.7.2: peningkatan prestasi, pemalam kedua terbanyak, ajax dan attr Menunggu api diubah suai sedikit.

• 1.8.3: Versi stabil terakhir yang menyokong IE6
• 1.9.1: Banyak kaedah telah dialih keluar pada mulanya untuk mengikat acara, disyorkan untuk menggunakan kaedah on untuk menggantikan kesemuanya.
• 1.12.4: 1.x Versi stabil terakhir era , hanya menyokong IE8, tidak tidak menyokong IE6/7.

Versi 3, 2.x dan 3.x

Melainkan terdapat keperluan khas (seperti untuk terminal mudah alih), kedua-dua versi ini biasanya digunakan Terdapat sangat sedikit orang:

• 2.x Versi stabil terakhir: 2.2.4
• 3.x Versi terkini: 3.6.1

Ringkasan ciri baharu jQuery3

Berbeza daripada jQuery 2, yang terutamanya meningkatkan prestasi, jQuery 3 sebenarnya menambah banyak ciri baharu ini dalam artikel ini.

(1) Ciri baharu

1, sokongan untuk...penyataan gelung

Dalam jQuery 3, kita boleh menggunakan penyataan gelung untuk...dari untuk mengulang semua jQuery >DOM elemen. Pendekatan berulang baharu ini adalah sebahagian daripada spesifikasi ECMAScript 2015 (iaitu ES6). Kaedah ini boleh melingkari "Objek Boleh Lelar" (seperti Array, Peta, Set , dsb.).

(1) Contohnya, pada masa lalu kami menggunakan

untuk untuk menggelungkan semua input elemen pada halaman, Dan ubah suai IDnya, anda boleh menulisnya seperti ini:

for(var i = 0; i  (2) Bagaimana anda boleh menggunakan <p id="u928244ca"> baharu untuk... <strong> gelung untuk menulis seperti ini: </strong></p><pre class="brush:php;toolbar:false">var i = 0;
for(var input of $('input')) {
   input.id = 'input-' + i++;
}

Nota:

untuk...daripada Nilai yang diperolehi setiap kali dalam badan gelung bukan satujQuery Objek, tetapi elemen DOM . Ini serupa dengan kaedah .each() yang disediakan oleh jQuery .

$('input').each(function(index,item){  
	item.id = 'input-' + index;
});

2, $.get() dan $.post() menambah jenis parameter baharu [tetapan]

(1)

jQuery 3 Menambah jenis parameter baharu pada kaedah $.get() dan $.post() kaedah [tetapan] , dengan itu menjadikannya konsisten dengan gaya antara muka $.ajax(). Satu-satunya perbezaan antara

//过去这么写
$.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) dan

$.ajax() ialah: jika $.get() dan $.post( ) [tetapan] melepasi atribut kaedah , kaedah nilai atribut akan diabaikan.

$.get({
  url: 'test.php',
  method: 'POST'  //这个将被忽略，仍然是get请求
});

3, gunakan requestAnimationFrame() untuk melaksanakan animasi

Dalam versi sebelumnya,

jQuery menggunakan setInterval Menghidupkan dengan mengemas kini sifat CSS elemen secara berterusan. Setiap kemas kini akan memaksa penyemak imbas untuk melukis semula halaman (aliran semula), dan monitor umum dimuat semula sekali dalam 16.7ms , jika terdapat setInterval Permintaan akan menyebabkan "bingkai" hilang, menyebabkan animasi menjadi beku.

(1) Hampir semua penyemak imbas moden (termasuk

IE 10

dan ke atas) kini menyokong requestAnimationFrame. requestAnimationFrame akan terus mengoptimumkan animasi mengikut masa lukisan penyemak imbas untuk menjadikan animasi lancar dan mengurangkan penggunaan sumber CPU . (2) Dan jQuery 3
akan menggunakan API ini untuk melaksanakan animasi, menjadikan main balik animasi lebih lancar dan pantas.

4. Kaedah unwrap() menambah pemilih parameter pilihan

(1) Kami tahu menggunakan

unwrap() Kaedah boleh memadamkan elemen induk bagi elemen yang dipilih.

<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 = $(&#39;.container div&#39;).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 juga membetulkan pepijat dalam kaedah wrapAll(), ini pepijat berlaku apabila fungsi dihantar kepadanya sebagai parameter. Dalam versi jQuery 3 sebelumnya, apabila fungsi diserahkan kepada kaedah wrapAll(), ia akan meletakkan koleksi jQuery ke dalam Setiap elemen dibalut secara individu. Dalam erti kata lain, tingkah laku adalah sama seperti semasa menghantar fungsi ke wrap() .

(2) Semasa membetulkan masalah ini, satu lagi perubahan turut diperkenalkan: Sejak dalam jQuery 3 , fungsi ini hanya akan dipanggil sekali , maka anda tidak boleh menghantarnya setiap elemen dalam koleksi jQuery. Oleh itu, konteks pelaksanaan fungsi ini (ini) hanya akan menunjuk kepada elemen pertama dalam koleksi jQuery semasa.

[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]

14 Januari 2007				1.2
				1.3
14 Januari 2009	1.3.2	55.9	akan
				Pengurusan panggilan balik tertunda, ajax
1.6	3 Mei 2011	1.6.4	89	Peningkatan ketara berbanding attr() lwn. val() Prestasi
1.7	3 November 2011	1.7.2 (21 Mac 2012)	92	Acara baharu API: .on( ) dan .off(), manakala API lama masih disokong.
1.8	9 Ogos 2012	1.8 .3 (13 November 2012)	91.4	Tulis SemulaDesis Enjin pemilih, animasi yang dipertingkatkan dan fleksibiliti $(html, props) .
1.9	15 Januari 2013	1.9 .1 (4 Februari 2013)	90	Alih keluar antara muka yang tidak digunakan dan bersihkan kod
1.10	24 Mei 2013	1.10.2 (3 Julai 2013)	91	Tetap 1.9 dan 2.0 beta pepijat dan perbezaan dalam kitaran versi
1.11	24 Januari 2014	1.11.3 (28 April 2015)	95.9
1.12	8 Januari 2016 Hari	1.12. 4 (20 Mei 2016)	95
2.0				Alih keluar sokongan untuk IE 6-8
2.2	8 Januari 2016	2.2.4 (20 Mei 2016)	85.6
3.0	2016 9 Jun	3.0.0 (9 Jun 2016)	86.3	Ditunda, $.ajax, $.when support Promises/A, menjadikan .data() serasi dengan HTML5
3.1	7 Julai 2016	3.1.1 (23 September 2016)	Ditambah jQuery.readyException, pengendali sedia>
3.2	16 Mac 2017	3.2.1 (2017 Mac 20, 2018)	84.6	Menambah sokongan untuk mendapatkan semula kandungan < ;template> elemen, Pelbagai kaedah lama telah ditamatkan.
3.3	19 Januari 2018	3.3 .1 (20 Jan 2018)	84.8	Fungsi lama yang ditamatkan, fungsi kini boleh menerima kelas dan menyokong penulisannya sebagai format Array.

Atas ialah kandungan terperinci Apakah perbezaan antara versi jquery 2.x dan 3.x. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!