Découvrir jQuery 3 : 17 nouvelles fonctionnalités puissantes et comment les exploiter

Cela fait plus de 10 ans que jQuery a commencé à faire vibrer le web et il est resté pour de bonnes raisons. En juillet 2015, jQuery a annoncé la première alpha de la version 3.0 – une mise à jour majeure après une longue période. Ils ont travaillé dessus pendant presque 2 ans. La nouvelle version promet un jQuery plus mince et plus rapide avec la compatibilité descendante à l'esprit.

La version actuelle 3.1.1 corrige beaucoup de bugs, ajoute de nouvelles méthodes, en supprime certaines et change le comportement de quelques fonctions. Jetons un coup d'œil aux nouvelles fonctionnalités qu'ils ont ajoutées et comment les utiliser.

17. Méthodes Hide et Show

Afin d'augmenter la compatibilité avec le design responsive, jQuery 3 a été amélioré pour masquer de nombreux éléments. Un test effectué sur 54 échantillons montre que la nouvelle version est 2 pour cent plus rapide que la précédente.

En plus de cela, les méthodes .hide(), .show() et .toggle() se concentreront sur les styles en ligne au lieu des styles calculés. Ainsi, ils respecteront mieux les valeurs d'affichage des feuilles de style chaque fois que possible, ce qui signifie que les règles CSS peuvent changer dynamiquement lors d'événements tels que le redimensionnement de la fenêtre ou la réorientation de l'appareil.

<script> $( "#showr" ).click(function() { $( "div" ).first().show( "fast", function showNext() { $( this ).next( "div" ).show( "fast", showNext ); }); }); $( "#hidr" ).click(function() { $( "div" ).hide( 1000 ); }); </script> 

À lire : 28 effets CSS3 incroyables pour donner un look moderne à votre site web

16. Fonctions WrapAll() et Unwrap()

Dans jQuery 2, la méthode .wrapAll() se comportait comme .wrap() lorsqu'une fonction était passée. Cela a été changé maintenant – .wrapAll(function) appelle sa fonction une fois, en utilisant le résultat en chaîne de l'appel de fonction pour envelopper toute la collection.

jQuery( "div" ).wrapAll(function( /* Pas d'argument index, car la fonction serait exécutée une seule fois */ ) { // context est égal au premier élément trouvé return "<h4></h4>"; });

Dans jQuery 3, il y a un paramètre sélecteur optionnel pour la méthode unwrap(). La nouvelle signature de la méthode est :

unwrap([selector])

Cela vous permet de passer une chaîne contenant une expression de sélecteur à faire correspondre dans l'élément parent. S'il y a une correspondance, les éléments enfants correspondants sont déballés, sinon ils ne le seront pas.

15. Largeur/hauteur de la barre de défilement prise en compte

Dans jQuery 2, les appels à $(window).width() retournent la « largeur de contenu » qui exclut toute barre de défilement que le navigateur a ajoutée si le contenu dépasse les dimensions de l'élément. Afin de fournir une mesure équivalente à la requête média CSS, $(window).outerWidth() et $(window).outerHeight() retournent maintenant la largeur et la hauteur incluant la largeur et la hauteur de la barre de défilement. Cela équivaut à la propriété DOM window.innerWidth.

14. Comportement de data()

Dans jQuery 3, le comportement de la méthode data() a été légèrement modifié pour aligner la méthode sur les spécifications de l'API Dataset. Elle transformera maintenant toutes les clés des propriétés en camelCase.

var $elem = $('#container'); $elem.data({ 'custom-property': 'Hello World' }); console.log($elem.data());

Si vous utilisez une ancienne version, vous obtiendrez le résultat suivant sur la console :

{custom-property: "Hello World"}

Dans jQuery 3, vous obtiendrez :

{customProperty: "Hello World"}

Comme vous pouvez le voir, le nom de la propriété est en camelCase sans tiret alors que dans les versions plus anciennes, il restait en minuscules et conservait le tiret.

13. Opérations de classe supportent SVG

jQuery ne supporte toujours pas complètement SVG, mais les méthodes qui manipulent les noms de classes CSS comme .hasClass() ou .addClass(), peuvent être utilisées pour cibler des documents SVG. Vous pouvez modifier (ajouter, basculer, supprimer) ou trouver des classes avec jQuery dans SVG, puis styliser les classes en utilisant CSS.

12. Filtres Visible et Hidden

jQuery 3 modifie la signification des filtres :visible et :hidden. Il considère les éléments :visible s'ils ont des boîtes de mise en page, y compris celles de largeur et hauteur nulles. Par exemple, l'élément br et les éléments en ligne sans contenu seront sélectionnés par le filtre :visible.

Si vous avez la page HTML suivante :

<section></section> <div></div> <br />

et vous exécutez l'instruction :

console.log($('body :visible').length);

Dans jQuery 1 et 2, vous obtiendrez 0 comme résultat, mais dans cette version, le résultat sera 3.

11. Plus d'arrondi pour la largeur et la hauteur

jQuery retourne maintenant la valeur de .width() et .height() en nombres à virgule flottante au lieu d'entiers, chaque fois que le navigateur le supporte. Pour les utilisateurs recherchant une précision au sous-pixel pour la conception de pages web, cela peut être une bonne nouvelle.

Par exemple, si vous avez 3 éléments avec une largeur d'un tiers (33,3333333 %) à l'intérieur d'un élément conteneur qui a une largeur de 100px :

<div class="container"> <div>The car is </div> <div>black</div> <div>Audi</div> </div>

Si vous essayez d'obtenir la largeur des éléments enfants :

$('.container div').width();

Vous obtiendrez la valeur 33,3333333, le résultat le plus précis.

10. Couche de sécurité supplémentaire

Une couche de sécurité supplémentaire a été intégrée contre les attaques Cross-Site Scripting (XSS). Elle exige que les développeurs spécifient dataType:"script" dans les options des méthodes $.ajax() et $.get(). Cela empêche la possibilité d'une attaque où le site distant fournit un contenu non-script mais décide ensuite de servir un script malveillant. Puisque jQuery.getScript() définit explicitement dataType:"script", il n'est pas affecté par ce changement.

$.ajax({ accepts: { mynewcustomtype: 'application/abc-some-custom-type' }, // how to deserialize a `mynewcustomtype` converters: { 'text mynewcustomtype': function(result) { // do things return newresult; } }, // Expect a `mynewcustomtype` back from server dataType: 'mynewcustomtype' });

9. Le marqueur de hachage invalide

jQuery 3 lance une erreur de syntaxe si une chaîne de sélecteur ne consiste qu'en un marqueur de hachage, comme jQuery(« # ») et .find(« # »). Dans l'ancienne version, $(« # ») retournait une collection vide et .find(« # ») lançait une erreur.

8. Nouvelle méthode pour échapper une chaîne

La nouvelle méthode jQuery.escapeSelector() vous permet d'échapper n'importe quelle chaîne ou caractère qui a une signification spéciale dans un sélecteur CSS. C'est utile dans les cas où un ID ou un nom de classe contient des caractères avec une signification spéciale en CSS, comme un point-virgule ou un point.

Par exemple, si un élément sur la page a un id de « abc.xyz », il ne peut pas être sélectionné avec $(« abc.xyz ») car le sélecteur est analysé comme un élément avec id 'abc', qui a aussi une classe 'xyz'. Cependant, il peut être sélectionné avec la nouvelle méthode $(« # » + $.escapeSelector(« abc.xyz »)).

7. Arguments de jQuery.when()

Dans jQuery 3, si vous ajoutez un argument d'entrée avec une méthode then() à $.when(), il sera interprété comme un « thenable » compatible Promise. Cela permet une gamme beaucoup plus large d'entrées, y compris les promesses Bluebird et les promesses ES6, ce qui permet d'écrire des rappels asynchrones plus sophistiqués.

$.when($.ajax("test.apx")).then(function(data,textStatus,jqHXR) { alert (jqHXR.status); //alerts 200 }); 

Les appels jQuery.when multi-arguments se comportent comme Promise.all, agrégeant les valeurs de réalisation dans un tableau de réalisation, ou alternativement rejetant avec la première valeur de rejet. Les appels à argument unique et zéro argument se comportent comme Promise.resolve, retournant un Deferred qui se résout identiquement à thenable, ou se réalise avec son entrée non-Promise.

De plus, la méthode jQuery.when() ne transmet plus les notifications de progression des Deferreds d'entrée vers le Deferred de sortie.

6. Hachage dans une URL préservé

La méthode jQuery.ajax() envoie maintenant l'URL complète au transport (script, xhr, jsonp, ou transport personnalisé). Elle ne supprime plus le hachage dans l'URL s'il est présent. Cependant, vous devez le supprimer manuellement avant d'envoyer la requête si le serveur à l'autre bout de la connexion ne peut pas gérer un hachage sur une URL.

5. Objets Deferred compatibles avec les promesses JS

Les Deferreds sont des objets chainables qui permettent de créer des files d'attente de rappels. jQuery 3 a rendu les objets Deferred compatibles avec les nouveaux standards Promises/A+. Il y a un changement clé dans la méthode .then(). Toute exception lancée dans un rappel .then() est maintenant attrapée et convertie en valeur de rejet. La valeur non-thenable retournée depuis un gestionnaire de rejet se transforme en valeur de réalisation.

L'ancienne méthode Deferred :

$.ajax("/stat") .done(function(data) { whoops(); // console displays: "whoops is not a function" // no further execution }) .fail(function(arg) { // doesn't execute since the was not caught });

Le nouveau comportement standard Promises/A+

$.ajax("/stat") .then(function(data) { whoops(); // console displays "jQuery.Deferred exception: whoops is not a function" // no further execution }) .catch(function(arg) { // arg is an Error object - "whoops is not a function" });

4. Nouvelle API pour les animations

jQuery 3 utilise l'API requestAnimationFrame() pour exécuter les animations. Cette nouvelle API fait tourner les animations plus fluide et plus rapide, en consommant moins de temps CPU. Elle n'est utilisée que dans les navigateurs qui la supportent. Pour les anciens navigateurs comme Internet Explorer 9, jQuery utilise son ancienne API comme méthode de secours.

À lire : 24 outils d'animation CSS3 et HTML5 pour designers

3. jQuery 3 s'exécute en mode strict

La plupart des navigateurs qui supportent jQuery 3 utilisent le mode strict, et la nouvelle version a été construite avec cette directive à l'esprit. Bien que jQuery 3 ait été écrit en mode strict, votre code n'est pas obligé de s'exécuter en mode strict, donc vous n'avez pas besoin de réécrire le code existant si vous allez migrer vers la version actuelle. Cependant, il y a une exception – certaines versions d'ASP.net ne sont pas compatibles à cause du mode strict.

Si vous exécutez ASP.net 4.0 qui utilise arguments.caller.callee pour tenter de tracer à travers les piles d'appels dans la méthode doPostBack(), vous feriez mieux de continuer à utiliser jQuery 2.x ou versions antérieures. De nos jours, les navigateurs supportent les traces de pile via error.stack, donc il n'est pas nécessaire d'examiner arguments.caller.callee.

2. Nouvelle signature pour les méthodes Get et Post

jQuery a une nouvelle signature pour les fonctions utilitaires $.get() et $.post() pour les aligner sur $.ajax(). La nouvelle signature est les paramètres settings.

$.get([settings]) $.post([settings])

L'objet settings peut avoir de nombreuses propriétés. C'est le même objet que vous pouvez fournir à $.ajax(). La seule différence lors du passage de l'objet à $.get() et $.post() par opposition à $.ajax() est que la propriété method est toujours ignorée, car $.get() et $.post() ont une méthode HTTP prédéfinie pour effectuer la requête Ajax (GET et POST).

Considérez un code :

$.get({ url: 'https://www.rankred.com', method: 'POST' // property is ignored });

En dépit de la propriété method, l'instruction n'enverra pas une requête POST mais une requête GET.

1. Boucle For…of

jQuery 3 supporte la boucle for…of introduite dans la spécification ECMAScript 6. Elle vous permet de boucler sur des objets itérables comme Map, Set, Array, etc. Lors de l'utilisation de cette boucle, la valeur obtenue est un élément DOM d'une collection jQuery, un à la fois.

À lire : 26 plugins jQuery modernes pour améliorer votre site web

La boucle for…of peut être utilisée pour remplacer l'ancienne syntaxe $.each( ), et faciliter le parcours des éléments d'une collection jQuery. Supposons que vous vouliez assigner un nom à chaque élément input d'une page.

Le code jQuery 2 ressemblerait à…

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

Le code jQuery 3 sera similaire à…

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