jquery版本2.x和3.x的區別有哪些

這篇文章主要講解了“jquery版本2.x和3.x的區別有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“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()將不再將結果的像素值四舍五入到一個整數值。

本教程操作環境：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的區別有哪些”的內容了，經過本文的學習后，相信大家對jquery版本2.x和3.x的區別有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！