搜尋

首頁 >web前端 >前端問答 >jquery版本2.x和3.x的差別是什麼

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

青灯夜游
青灯夜游原創
2022-09-07 16:55:471986瀏覽

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

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

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

版本號碼發佈日期最新更新1.0 1.12007年9月10日#1.3

##大小（KB）

備註

2006年8月26日



第一個穩定版本

#2007年1月14日




##1.2

##1.2.6

54

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############延遲回呼管理，###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 选择器引擎，改善动画和 $(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

修复了 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

除去对 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 错误现在不会不显示了

3.2

2017年3月16日

3.2.1 (2017年3月20日)

84.6

增加了对检索元素内容的支持，弃用了多种旧方法。

3.3

2018年1月19日

3.3.1 (2018年1月20日)

84.8

弃用旧函数，函数现在可以接受类，并支持其写成数组格式。

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 <p id="u928244ca">（2）用新的<strong>for...of</strong> 迴圈怎可以這麼寫：</p><pre class="brush:php;toolbar:false">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>
   $(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版本2.x和3.x的差別是什麼

  • 而在 jQuery 3 中，整个行为是完全不同的。你将在控制台中看到“Failure 1”和“Success 2”两条消息。那个异常将会被第一个失败回调处理，并且，一旦异常得到处理，那么后续的成功回调将被调用。

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

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版本2.x和3.x的差別是什麼

  • 在 jQuery 3.x 中，输出结果如下：

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

2，wrapAll() 方法

（1）jQuery 3 也修正了wrapAll() 方法中的一個bug#，這個bug 出現在把一個函數當作參數傳給它的情況下。在jQuery 3 先前的版本中，當函數傳給wrapAll() 方法時，它會把jQuery 集合中的每個元素單獨包裹起來。換句話說，這種行為和把一個函數傳給 wrap() 時的行為是完全一樣的。

（2）在修復這個問題的同時，也引入了另一個變更：由於在 jQuery 3##中，這個函數只會呼叫一次了，那就無法把jQuery 集合中每個元素都傳給它。因此，這個函數的執行上下文（this）將只能指向目前 jQuery 集合中的第一個元素。

【推薦學習：

jQuery影片教學、web前端影片】

以上是jquery版本2.x和3.x的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：jquery能取到標籤的值嗎下一篇：jquery能取到標籤的值嗎

相關文章

看更多