Quelle est la différence entre les versions 2.x et 3.x de jquery

Différences : 1. 2.x ne sera plus mis à jour, l'officiel effectue uniquement la maintenance des bugs et aucune nouvelle fonction ne sera ajoutée ; 3.x est la version officielle qui est principalement mise à jour et maintenue, et les fonctions continueront à l'être. ajouté. 2. 3.x prend en charge l'instruction de boucle "for...of", 2.x ne prend pas en charge ". 3. 2.x utilise setInterval pour implémenter l'animation et 3.x utilise requestAnimationFrame() pour implémenter l'animation. 4. 3 .Width() et height() dans

Depuis sa naissance en 2006

, trois versions majeures ont été publiées :

1 Il existe de nombreuses petites versions. Peut-être que certains amis ne connaissent pas la différence entre ces versions. ? Quelle version doit être utilisée pour le développement réel ? 1.x, 2.x, 3. Différences entre les trois principales 2.x, 3.x : Ne supporte pas ie6, ie7, ie8

2. Nouveau Si vous ne considérez pas la compatibilité avec les navigateurs de version inférieure, vous pouvez utiliser la version 2.x finale : 2.2.4 (20 mai 2016)

3.X. n'est pas compatible avec ie678 et ne prend en charge que les derniers navigateurs requis, la version 3.x n'est généralement pas utilisée. De nombreux anciens plug-ins jQuery ne prennent pas en charge cette version. Actuellement, cette version est la version officielle qui est principalement mise à jour et maintenue.

(2) Sélectionnez les recommandations

si vous devez être compatible avec

ie678

 : vous ne pouvez choisir que

1.x

• Si vous n'avez pas besoin d'être compatible avec ie678 : vous pouvez choisir 2.x ou 3.x car la plupart du code dans 1.x
est destiné aux anciens navigateurs Compatibilité, cela augmente la charge de fonctionnement et affecte l'efficacité de fonctionnement

• 2. (1) Analyse de la situation Étant donné que les versions de jQuery

sont rétrocompatibles, ce qui entraîne des problèmes de compatibilité pour les plug-ins développés sur la base de

jQuery

Cela signifie que lorsque. une nouvelle version de

jQuery

est lancée, le plug-in d'origine peut ne pas fonctionner correctement et doit être redéveloppé par l'auteur du plug-in Nouvelle version
• (2) Recommandations de sélection
Afin de. assurer une meilleure compatibilité avec divers plug-ins, vous pouvez choisir la version
• 1.x3, comparaison des nouvelles fonctionnalités (1) 2. 2) 3.x

Par rapport à la version précédente, de nombreux de nouvelles fonctionnalités ont été ajoutées et certaines fonctionnalités précédentes ont également été modifiées.

2. Recommandations de version spécifiques

• 1, historique des versionsnuméro de versiondate de sortie

taille ( Ko)

• Remarques 1.0 1.0 .1
14 janvier 2007

10 septembre 2007 1.2.6 54 54 1.3 14 janvier 2009

1.3.2

55.9

Introduction du Sizzle

moteur de sélection dans le noyau

1.5 31 janvier 20111.5.2Réécriture de modules1.92.0 betabug24 janvier 20141.12 pour améliorer les performances , et réduisez la taille du fichier2.1 24 janvier 20142.1.4 (28 avril 2015)82.42.2 8 janvier 20162.2.4 (20 mai 2016)85.6jQuery.readyException L'ancienne fonction est obsolète, la fonction accepte désormais les classes et prend en charge son écriture au format tableau.

2, 1.x version couramment utilisée

• 1.4.2 : La stabilité et la compatibilité sont excellentes, avec le plus grand nombre de plug-ins, mais les performances ne sont pas aussi bonnes que les versions suivantes.
• 1.7.2 : Amélioration des performances, le deuxième plus grand nombre de plug-ins, ajax et attr etc. api ont de légères modifications.

• 1.8.3 : La dernière version stable prenant en charge IE6
• 1.9.1 : De nombreuses méthodes ont été supprimées au début Pour la liaison d'événements, il est recommandé d'utiliser on. méthode plutôt Tous.
• 1.12.4 : 1.x La dernière version stable de l'ère , ne prend en charge que IE8, pas IE6/7.

Versions 3, 2.x, 3.x

Sauf exigences particulières (comme pour les terminaux mobiles), de manière générale, il y a très peu d'utilisateurs de ces deux versions :

• 2.x La dernière version stable : 2.2.4
• 3.x La dernière version : 3.6.1

3. Résumé des nouvelles fonctionnalités de jQuery3

est différent de jQuery 2 Principalement De plus, jQuery 3 a en fait ajouté de nombreuses nouvelles fonctionnalités. Je vais résumer ces nouvelles fonctionnalités dans cet article.

(1), nouvelles fonctionnalités

1, prise en charge de l'instruction de boucle...of

Dans jQuery 3, nous pouvons utiliser l'instruction de boucle for...of pour parcourir tous les éléments DOM d'une collection jQuery . Cette nouvelle approche itérative fait partie de la spécification ECMAScript 2015 (c'est-à-dire ES6). Cette méthode peut boucler sur des "Objets itérables" (tels que Array, Map, Set , etc.).

(1) Par exemple, dans le passé, nous utilisions for pour parcourir tous les input éléments de la page et modifier son ID, qui peut s'écrire ainsi :

for(var i = 0; i <p id="u928244ca"> ( 2) Utilisez new <strong> Comment une boucle for...of</strong> peut-elle être écrite comme ceci : </p><pre class="brush:php;toolbar:false">var i = 0;
for(var input of $('input')) {
   input.id = 'input-' + i++;
}

Remarque : for...of La valeur obtenue à chaque fois dans le corps de la boucle n'est pas un jQuery objet, mais un DOM Element. Ceci est similaire à la méthode .each() fournie par jQuery .

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

2, $.get() et $.post() ont ajouté de nouveaux types de paramètres [settings]

(1)jQuery 3 pour $.get() et $ post(. ) Ces deux méthodes ajoutent de nouveaux types de paramètres [settings], les rendant cohérents avec le style d'interface de $.ajax(). La seule différence entre

//过去这么写
$.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) et $.ajax() est : si method est transmise dans [settings] de $.get() et $.post() Attributs, méthode les valeurs d'attribut seront ignorées.

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

3, en utilisant requestAnimationFrame() pour implémenter l'animation

Dans les versions précédentes, jQuery utilisait setInterval pour générer une animation en mettant continuellement à jour l'attribut CSS de l'élément. Chaque mise à jour forcera le navigateur à redessiner la page (reflow), et le moniteur général s'actualisera une fois toutes les 16,7 ms S'il y a d'autres requêtes setInterval pendant cet intervalle, cela entraînera la perte du "frame". . Provoquant un décalage d'animation.

(1) Désormais, presque tous les navigateurs modernes (y compris IE 10 et supérieur) prennent en charge requestAnimationFrame. requestAnimationFrame optimisera en permanence l'animation en fonction du temps de dessin du navigateur pour rendre l'animation fluide et réduire la consommation de ressources CPU .
(2) Et jQuery 3 utilisera cette API pour exécuter l'animation, rendant la lecture de l'animation plus fluide et plus rapide.

4, la méthode unwrap() ajoute un sélecteur de paramètre facultatif

(1) Nous savons que l'élément parent de l'élément sélectionné peut être supprimé à l'aide de la méthode 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 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 Correction également d'un bug dans la méthode wrapAll() qui se produisait lorsqu'une fonction lui était transmise en tant que paramètre. Dans les versions antérieures à jQuery 3, lorsqu'une fonction était transmise à la méthode wrapAll(), elle encapsulait individuellement chaque élément de la collection jQuery . En d'autres termes, le comportement est exactement le même que lors du passage d'une fonction à wrap() . (2) Tout en corrigeant ce problème, il a également introduit un autre changement : puisque dans

jQuery 3

, cette fonction ne sera appelée qu'une seule fois, il est donc impossible d'ajouter chaque élément dans les éléments de la collection jQuery lui sont transmis. Par conséquent, le contexte d'exécution de cette fonction (this) pointera uniquement vers le premier élément de la collection jQuery actuelle. 【Apprentissage recommandé : Tutoriel vidéo jQuery,

Vidéo web front-end

】

1 4	14 janvier. Journée 2010	1.4.4	76
			83	Gestion des rappels différés, ajax
1.6	3 mai 2011	1.6.4	89	Améliorations significatives de attr() avec val()performance
1.7	3 novembre 2011	1.7.2 (21 mars 2012)	92	Nouveaux événements API : .on () et .off (), tandis que l'ancienne API est toujours prise en charge.
1.8	9 août 2012	1.8.3 (13 novembre 2012)	91.4	Réécriture Sizzle Selector Engine, animation et flexibilité améliorées de $(html, accessoires) . Interface obsolète, code propre Correction
et	cycle de version	et différences		1.11
1.11 .3 28 avril 2015)	95.9			8 janvier 20161.12.4 20 mai 2016) 95
2.0	18 avril 2013	2.0.3 (3 juillet 2013)	81.1	Sauf la prise en charge de IE 6-8
3 .0	9 juin 2016	3.0. 0 (9 juin 2016)	86.3	Différé, $.ajax, $.lorsque la prise en charge de Promises/A+, rendant .data() compatible avec HTML5
3.1	Ju ly 7, 2016	3.1.1 (23 septembre 2016)	86.3	Join
, gestionnaire prêt	Les erreurs ne seront plus affichées	3.2	16 mars 2017	3.2.1 (20 mars 2017)
8 4.6	Ajout du support pour la récupération < ;template> contenu de l'élément, dépréciant plusieurs anciens méthodes.		3.3	19 janvier 2018 3.3.1 (20 janvier 2018)84.8

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!