jquery版本2.x和3.x的區別是什麼

區別：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()將不再將結果的畫素值四捨五入到一個整數值。

前端（vue）入門到精通課程：進入學習

本教學操作環境：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，版本歷史

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，你得到的結果會是 2
console.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的區別是什麼的詳細內容，更多請關注TW511.COM其它相關文章！