Les nouveautés de jQuery 1.4
Publié le
La nouvelle version de jQuery vient de sortir avec son lot de nouveautés appréciables. Pour fêter l'évènement, les concepteurs de cette librairie comptent nous proposer pas moins de 14 articles afin de nous présenter l'ensemble des mises à jour et comment les utiliser. Voyons à présent rapidement ce qu'apporte cette mise à jour.
Toujours plus de performance
A chaque nouvelle version, de nombreuses optimisations sont effectuées, mais d'après leurs créateurs, la vitesse d'exécution des méthodes les plus couramment utilisées est doublée, pour certaines triplée. Si on associe cette librairie à un navigateur performant (Firefox 3.6+ ou Chrome), on se rapproche de plus en plus d'une exécution qui semble instantanée, ce qui est fort plaisant.
Amélioration de la méthode .live()
La méthode .live() permet enfin d'écouter tous les évènements (hormis .focus() et .blur() où il faut utiliser à la place .focusin() et .focusout(), y compris ceux qui sont rajoutés dans le DOM après la mise en place des écouteurs d'évènements.
Ajouter un délai lors d'une liste d'animations avec la méthode .delay()
Autrefois, pour marquer une pause lors d'une animation, il fallait jongler avec les timers. Cette époque est révolue. A présent il suffit d'utiliser la méthode .delay() entre deux animations pour marquer une pause.
1 | $('div.first').slideUp(300).delay(800).fadeIn(400); |
Écouteurs d'évènements multiples
Il est à présent possible de cibler un élément et d'y définir plusieurs écouteurs d'évènements de manière simultanée:
1 2 3 4 5 6 7 8 9 10 11 | jQuery('#nav').bind({ click: function() { // Gestion du clic. }, mouseover: function() { // Gestion du survol. }, mouseout: function() { // Gestion de la fin du survol. } }) |
Définir un type de déplacement pour chaque direction.
Au lieu de ne pouvoir définir qu'un seul type de déplacement pour l'ensemble d'une animation, il est possible de choisir pour chaque direction l'effet souhaité (voir un exemple concret) :
1 2 3 4 | jQuery('#foo').animate({ left: 500, top: [500, 'easeOutBounce'] }, 2000); |
Récupérer l'emplacement d'un item plus facilement
La méthode .index() a été améliorée et permet de cibler la position d'un élément sans passer de valeur à la méthode :
1 2 3 | jQuery('li').click(function(){ alert( jQuery(this).index() ); // Retourne la position de l'élément cliqué }); |
1 2 3 4 5 6 | <ul> <li>Item 0</li> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> |
Retirer un nœud parent sans détruire ses enfants
La nouvelle méthode .unwrap() permet de retirer du DOM le nœud parent de l'élément ciblé.
Retirer un élément du DOM sans détruire les écouteurs d'évènements associés
La nouvelle méthode .detach() permet de retirer un nœud sans détruire les éventuels écouteurs d'évènements qui lui sont associés, si on réinjecte à nouveau cet item dans le DOM, les écouteurs fonctionneront toujours (utile pour la gestion d'un carousel à déplacement infini auquel on a greffé des écouteurs par exemple).
Sélectionner tous les éléments jusqu'à un élément prédéfini
Trois nouvelles méthodes font leur apparition : .prevUntil(), .nextUntil(), .parentsUntil(). Elles permettent de sélectionner tous les éléments dans une direction jusqu'à ce que l'élément demandé soit rencontré.
Et bien d'autres amélioration encore
J'ai fais rapidement le tour des principales améliorations de cette librairie, mais la liste n'est pas exhaustive, pour connaitre l'ensemble des mises à jour, je ne peux que vous conseiller de votre rendre sur les articles mis en place pour l'occasion. Si vous avez des remarques, n'hésitez pas à m'en faire part.