這篇文章主要講解了“jquery版本2.x和3.x的區(qū)別有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“jquery版本2.x和3.x的區(qū)別有哪些”吧！

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的米脂網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

區(qū)別：1、2.x不再更新，官方只做BUG維護(hù)，功能不再新增；3.x是官方主要更新維護(hù)的版本，功能持續(xù)新增。2、3.x支持“for...of ”循環(huán)語句，2.x不支持“。3、2.x利用setInterval來實(shí)現(xiàn)動(dòng)畫，3.x支采用requestAnimationFrame()來實(shí)現(xiàn)動(dòng)畫。4、3.x中width()和height()將不再將結(jié)果的像素值四舍五入到一個(gè)整數(shù)值。

本教程操作環(huán)境：windows7系統(tǒng)、jquery3.6.1版本、Dell G3電腦。

jQuery自 2006年誕生以來，一個(gè)發(fā)行了 1.x、2.x、3.x這三個(gè)大版本。而在這三個(gè)大版本下又細(xì)分了許多小版本?？赡苡行┬』锇椴惶宄@些版本有什么區(qū)別？實(shí)際開發(fā)中應(yīng)該選用哪個(gè)版本？下面我對(duì)其做個(gè)總結(jié)。

一、1.x、2.x、3.x 三大系列的區(qū)別

1，IE 的支持情況比較

（1）情況分析

• 1.x：支持 ie6、ie7、ie8

• 2.x、3.x：不支持 ie6、ie7、ie8

2.X不兼容ie678，很少有人使用，官方只做BUG維護(hù)，功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)

3.X不兼容ie678，只支持最新的瀏覽器。除非特殊要求，一般不會(huì)使用3.x版本的，很多老的jQuery插件不支持這個(gè)版本。目前該版本是官方主要更新維護(hù)的版本。

（2）選擇建議

• 如果需要兼容 ie678：只能選擇 1.x

• 如果不需要兼容 ie678：可以選擇 2.x、3.x。因?yàn)?1.x中有大部分代碼是對(duì)老舊瀏覽器做的兼容，這個(gè)就增加了運(yùn)行的負(fù)擔(dān)，影響了運(yùn)行效率。

2，插件的支持情況比較

（1）情況分析

• 由于 jQuery的版本都是不向后兼容的，導(dǎo)致了基于 jQuery開發(fā)的插件會(huì)有兼容性問題。也就是說當(dāng)新版本的 jQuery推出后，原有的插件可能無法正常使用，需要插件作者重新開發(fā)新版本。

（2）選擇建議

• 為了保證與各種插件有更好的兼容性可以選擇 1.x的版本。

3，新特性比較

（1）2.x相較于 1.x沒有增加什么新特性，主要是去除了 ie678的支持，提升了性能，減小了體檢。

（2）3.x相較于之前版本，增加了許多新特性，也改變一些以往的特性。

二、具體版本建議

1，版本歷史

版本號(hào)	發(fā)布日期	最新更新	大?。↘B）	備注
1.0	2006年8月26日			第一個(gè)穩(wěn)定版本
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	延遲回調(diào)管理，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選擇器引擎，改善動(dòng)畫和 $(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	修復(fù)了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	除去對(duì) 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錯(cuò)誤現(xiàn)在不會(huì)不顯示了
3.2	2017年3月16日	3.2.1 (2017年3月20日)	84.6	增加了對(duì)檢索<template>元素內(nèi)容的支持，棄用了多種舊方法。
3.3	2018年1月19日	3.3.1 (2018年1月20日)	84.8	棄用舊函數(shù)，函數(shù)現(xiàn)在可以接受類，并支持其寫成數(shù)組格式。

2，1.x 常用版本

• 1.4.2：穩(wěn)定性和兼容性都很出色，插件最多，但性能不如下面后面的幾個(gè)版本。

• 1.7.2：性能提升，插件第二多，ajax和 attr等 api有少許修改。

• 1.8.3：最后一個(gè)支持 IE6的穩(wěn)定版

• 1.9.1：開始移除了不少方法，事件綁定推薦使用 on方法一個(gè)代替所有的。

• 1.12.4：1.x時(shí)代最后一個(gè)穩(wěn)定版本，僅支持 IE8，不支持 IE6/7。

3，2.x、3.x 版本

除非有特殊要求（比如面向移動(dòng)端），一般情況下這兩大版本使用人的確很少：

• 2.x最后一個(gè)穩(wěn)定版本：2.2.4

• 3.x最新版本：3.6.1

三、jQuery3的新特性匯總

不同于 jQuery 2主要做的是性能的提升，jQuery 3是實(shí)實(shí)在在增加了許多新特性，本文我就對(duì)這些新特性做個(gè)匯總。

（一）、新增的特性

1，支持 for...of 循環(huán)語句

在 jQuery 3中，我們可以用 for...of循環(huán)語句來迭代一個(gè) jQuery集合中的所有 DOM元素。這種新的迭代方法是 ECMAScript 2015（即 ES6）規(guī)范中的一部分。這個(gè)方法可以對(duì) “可迭代對(duì)象”（比如 Array、Map、Set等）進(jìn)行循環(huán)。

（1）比如過去我們使用 for循環(huán)遍歷頁面上的所有 input元素，并修改它的 ID，可以這么寫：

for(var i = 0; i < $('input').length; i++) {
  $('input')[i].id = 'input-' + i;
}

（2）使用新的 for...of循環(huán)怎可以這么寫：

var i = 0;
for(var input of $('input')) {
   input.id = 'input-' + i++;
}

注意：for...of循環(huán)體內(nèi)每次拿到的值并不是一個(gè) jQuery對(duì)象，而是一個(gè) DOM元素。這一點(diǎn)跟 jQuery自己提供的 .each()方法類似。

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

2，$.get() 和 $.post() 增加了新的參數(shù)類型 [settings]

（1）jQuery 3為 $.get()和 $.post()這兩個(gè)方法增加了新的參數(shù)類型 [settings]，從而使得它們和 $.ajax()的接口風(fēng)格保持一致。

//過去這么寫
$.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'  //這個(gè)將被忽略，仍然是get請(qǐng)求
});

3，采用 requestAnimationFrame() 來實(shí)現(xiàn)動(dòng)畫

之前的版本中，jQuery使用 setInterval通過不斷更新元素的 CSS屬性產(chǎn)生動(dòng)畫。每次更新時(shí)會(huì)迫使瀏覽器對(duì)頁面進(jìn)行重繪（reflow），而一般顯示器 16.7ms刷新一次，如果在這間隔期間有其他的 setInterval請(qǐng)求，就會(huì)導(dǎo)致”幀”丟失，造成動(dòng)畫卡頓。

（1）現(xiàn)在幾乎所有的現(xiàn)代瀏覽器（包括 IE 10及以上版本），都支持 requestAnimationFrame。requestAnimationFrame會(huì)根據(jù)瀏覽器的繪制時(shí)間 對(duì)動(dòng)畫進(jìn)行不斷優(yōu)化，使動(dòng)畫流暢并減少對(duì) CPU資源的消耗。
（2）而 jQuery 3會(huì)使用這個(gè) API執(zhí)行動(dòng)畫，讓動(dòng)畫的播放更加順暢、速度更快。

4，unwrap() 方法增加一個(gè)可選參數(shù) 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()方法增加了一個(gè)可選參數(shù) selector，我們可以通過這個(gè)字符串選擇器匹配元素的父元素：

• 如果匹配到：則移除父元素

• 如果沒有匹配到：就不移除父元素

$("input").unwrap(".wrapper3"); //由于沒有匹配到，則不會(huì)移除父元素

5，addClass()、removeClass()、toggleClass() 方法可以接受類數(shù)組

（1）過去想要通過 addClass()、removeClass()、toggleClass()方法一次性設(shè)置多個(gè)類時(shí)，需要使用空格分開多個(gè) class。

$("#div1").addClass("important blue");

（2）而從 jQuery 3.3起，這些方法可以直接接受類數(shù)組。

$("#div1").addClass(["important", "blue"]);

6，新增了 $.escapeSelector() 方法

（1）jQuery 3新增的 $.escapeSelector()函數(shù)可以用來轉(zhuǎn)義 CSS選擇器中有特殊意義的字符或字符串。此方法對(duì)于一個(gè) CSS類名或一個(gè) ID包含的字符在 CSS中具有特殊含義的情況下非常有用，如點(diǎn)或分號(hào)。

（2）下面是一個(gè)簡(jiǎn)單的樣例：

<div id="#div1">hangge.com</div>
<div class="abc.def">hangge.com</div>
 
//如果像下面這么寫會(huì)直接報(bào)錯(cuò)
$('##div1').text();
$('.abc.def').text();
 
//$.escapeSelector()就是用來解決這個(gè)問題
$('#' + $.escapeSelector('#div1')).text();
$('.' + $.escapeSelector('abc.def')).text();

（二）、有變更的特性

1，:visible 和 :hidden 過濾器含義變更

（1）jQuery 3修改了 :visible和 :hidden過濾器的定義。任何可用于布局的元素 即使它們的高度寬度為 0，都會(huì)被認(rèn)為是 :visible。

（2）比如 <br>元素和沒有內(nèi)容的內(nèi)聯(lián)元素，現(xiàn)在都會(huì)被 :visible過濾器匹配。

<body>
  <div></div>
  <br/>
</body>
 
//在 jQuery 1.x 和 2.x 中，你得到的結(jié)果會(huì)是 0
//在 jQuery 3.x，你得到的結(jié)果會(huì)是 2
console.log($('body :visible').length);

2，data() 方法

（1）現(xiàn)在 data()方法行為已經(jīng)變得跟 Dataset API規(guī)范一致。jQuery 3將會(huì)把所有屬性鍵名轉(zhuǎn)換成駝峰形式。

（2）比如下面一個(gè)樣例：

• 在jQuery 1.x和 2.x中：屬性名會(huì)保持全小寫，并原樣保留橫杠。

• 在jQuery 3.x：屬性名已經(jīng)變成了駝峰形式，橫杠已經(jīng)被去除了。

/*******************************
    測(cè)試樣例
********************************/
<div id="container"></div>
 
var $elem = $('#container');
 
$elem.data({
   'my-property': 'hello'
});
 
console.log($elem.data());
 
 
/*******************************
    jQuery 1.x 和 2.x 結(jié)果
********************************/
{my-property: "hello"}
 
 
/*******************************
    jQuery 3.x 結(jié)果
********************************/
{myProperty: "hello"}

3，Deferred 對(duì)象

Deferred對(duì)象可以說是 Promise對(duì)象的前身之一，它實(shí)現(xiàn)了對(duì) Promise/A+協(xié)議 的兼容。關(guān)于 Deferred更詳細(xì)的用法可以參考我之前寫的這篇文章：

• JS - Promise使用詳解3（jQuery中的Deferred）

（1）jQuery 3改變了 deferred對(duì)象的行為，使得 deferred對(duì)象可與新的 Promises/A+標(biāo)準(zhǔn)兼容。deferred對(duì)象成為了可鏈對(duì)象，讓創(chuàng)建回調(diào)隊(duì)列成為可能。

• 在 jQuery 1.x和 2.x中：傳遞給 deferred的回調(diào)函數(shù)內(nèi)如果出現(xiàn)未捕獲的異常，就會(huì)阻斷程序的執(zhí)行。不像原生 Promise對(duì)象那樣會(huì)拋出異常冒泡至window.onerror（通常冒泡到這里）。如果你沒有定義一個(gè)函數(shù)處理錯(cuò)誤事件（通常我們是會(huì)處理的），那么異常信息就會(huì)顯示并且程序會(huì)終止執(zhí)行。

• 在 jQuery 3.x中：jQuery3遵循原生 Promise對(duì)象的模式。因此，拋出的異常被當(dāng)作失敗，接著失敗回調(diào)函數(shù)被執(zhí)行。一旦失敗回調(diào)函數(shù)執(zhí)行完成，進(jìn)程就會(huì)繼續(xù)，下面的成功回調(diào)函數(shù)將被執(zhí)行。

（2）下面是一個(gè)簡(jiǎn)單的樣例：

var deferred = $.Deferred();
deferred
 .then(function() {
   throw new Error('An error'); // 拋出一個(gè)錯(cuò)誤
 })
 .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中，只有第一個(gè)函數(shù)（也就是拋出錯(cuò)誤的那個(gè)函數(shù)）會(huì)被執(zhí)行到。此外，由于我們沒有為window.onerror定義任何事件處理函數(shù)，控制臺(tái)將會(huì)輸出 “Uncaught Error: An error”，而且程序的執(zhí)行將中止。

• 而在 jQuery 3中，整個(gè)行為是完全不同的。你將在控制臺(tái)中看到“Failure 1”和“Success 2”兩條消息。那個(gè)異常將會(huì)被第一個(gè)失敗回調(diào)處理，并且，一旦異常得到處理，那么后續(xù)的成功回調(diào)將被調(diào)用。

4，類操作方法支持 SVG

（1）可惜的是，jQuery現(xiàn)在還無法完全支持 SVG（包括 jQuery3）。

（2）但是在 jQuery 3中，對(duì)于操作 CSS類名稱的 jQuery方法，如 addClass()和 hasClass()現(xiàn)在可以將 SVG文檔作為目標(biāo)。這意味著，我們可以修改（添加、移除、切換），或是尋找 SVG下的 jQuery類，然后使用 CSS的樣式。

三、已廢棄、已移除的方法和屬性

廢棄與移除的區(qū)別：

• 廢棄：是指一些方法還在存在于 jQuery源碼中，但是已經(jīng)提供了新方法來替換那些方法。

• 移除：是指一些方法已經(jīng)從 jQuery源碼中刪除了。

1，廢棄 bind()、unbind()、delegate() 和 undelegate() 方法

（1）在很早之前，bind()、delegate()、unbind()和 undelegate()就已經(jīng)不再推薦使用了，但它們還是一直存在著：

• jQuery在很久以前就引入了on()方法，它提供了一個(gè)統(tǒng)一的接口，用以取代 bind()、delegate()和 live()等方法。

• 同時(shí)，jQuery還引入了 off()這個(gè)方法來取代 unbind()、undelegated()和 die()等方法。

（2）jQuery 3終于開始將這些方法標(biāo)記為 “廢棄” 了，并計(jì)劃在未來的某個(gè)版本（很可能是 jQuery 4）中將它們徹底移除。因此，建議我們?cè)陧?xiàng)目中統(tǒng)一使用 on()和 off()方法，這樣就不用擔(dān)心未來版本的變更了。

2，移除 load()、unload() 和 error() 方法

load()、unload()和 error()等方法在很早以前（從 jQuery 1.8開始）就已經(jīng)被標(biāo)記為廢棄了，但一直沒有去掉。這次 jQuery 3徹底將它們移除了。

3，移除 context、support 和 selector 屬性

jQuery3移除了已經(jīng)廢棄的 context、support和 selector屬性。

四、修復(fù)了之前版本中存在的重大 Bug

1，width() 和 height() 的返回值將不再取整

（1）在 jQuery 3中，width()和 height()及所有其它相關(guān)方法將不再將結(jié)果的像素值四舍五入到一個(gè)整數(shù)值，因?yàn)樗纳嵛迦牒笤谀承┣闆r下很難對(duì)元素進(jìn)行定位。

（2）比如下面樣例，container容器內(nèi)有三個(gè)子元素，它們寬度均為父容器的 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中，輸出結(jié)果如下：

• 在 jQuery 3.x中，輸出結(jié)果如下：

2，wrapAll() 方法

（1）jQuery 3還修復(fù)了 wrapAll()方法中的一個(gè) bug，這個(gè) bug出現(xiàn)在把一個(gè)函數(shù)作為參數(shù)傳給它的情況下。在 jQuery 3以前的版本中，當(dāng)一個(gè)函數(shù)被傳給 wrapAll()方法時(shí)，它會(huì)把 jQuery集合中的每個(gè)元素單獨(dú)包裹起來。換句話說，這種行為和把一個(gè)函數(shù)傳給 wrap()時(shí)的行為是完全一樣的。

（2）在修復(fù)這個(gè)問題的同時(shí)，還引入了另外一個(gè)變更：由于在jQuery 3中，這個(gè)函數(shù)只會(huì)調(diào)用一次了，那就無法把 jQuery集合中每個(gè)元素都傳給它。因此，這個(gè)函數(shù)的執(zhí)行上下文（this）將只能指向當(dāng)前jQuery集合中的第一個(gè)元素。

感謝各位的閱讀，以上就是“jquery版本2.x和3.x的區(qū)別有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)jquery版本2.x和3.x的區(qū)別有哪些這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

分享標(biāo)題：jquery版本2.x和3.x的區(qū)別有哪些
本文網(wǎng)址：http://chinadenli.net/article38/jioosp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、域名注冊(cè)、網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站營(yíng)銷、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)