jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Actualités > jQuery 1.3.2

jQuery 1.3.2

mardi 6 octobre 2009, par John Resig, Olivier G.

Traduction (très) tardive de la documentation de jQuery consacré à la sortie de jQuery 1.3.2, paru le 20 février 2009.


20 février 2009 : ceci est une version de maintenance pour jQuery 1.3. Vous pouvez voir la liste complète de ce qui a été changé ou corrigé sur le traqueur de bugs

Téléchargement

jQuery 1.3.2 :

jQuery hébergé chez Google :

Si vous désirez récupérer la version complète depuis le dépôt subversion, vous pouvez le faire en suivant ces instructions et en récupérant le code source depuis l’adresse suivante :

svn co http://jqueryjs.googlecode.com/svn/tags/1.3.2

Changements

Les éléments sont retournée dans l’ordre du document

C’est un changement dans le moteur de sélecteurs de jQuery qui a réorganisé les éléments retournés de manière à ce qu’ils soient dans l’ordre du document, plutôt que dans l’ordre dans lequel les sélecteurs étaient envoyés. Ce changement a été fait afin d’être en accord avec la spécification API des sélecteurs (qui est utilisée en interne par jQuery dans les navigateurs qui la supportent).

Un exemple :

// jQuery 1.3.1 (et précédentes)
$("h1, h2, h3")
=> [ h1, h1, h2, h2, h3, h3 ]

// jQuery 1.3.2
$("h1, h2, h3")
=> [ h1, h2, h3, h3, h1, h2 ]

Je voudrais remercier Diego Perini pour nous avoir poussés à faire cette implémentation.

.live() peut maintenant éviter le bouillonement (bubbling)

Il est maintenant possible d’appeler event.stopPropagation() ou return false dans la fonction de rappel (Callback) d’un .live() et de lui faire stopper le bouillonnement de l’événement. Cela signifie que vous pouvez maintenant lier des événements live à l’intérieur les uns des autres et empêcher les gestionnaires (handlers) internes de déclencher les gestionnaires externes.

Par exemple :

<ul>
  <li><b>Google</b></li>
  <li><b>Yahoo</b></li>
</ul>
<script>
  $("li").live("click", function(){
    $(this).addClass("active");
  });
  $("li b").live("click", function(){
    $(this).addClass("active");
    return false;
  });
</script>

Je voudrais remercier Iraê pour la solutions qu’il a proposé pour ce problème.

Pour ceux qui se poseraient des questions à propos des fonctionnalités encore manquantes dans .live() (comme par exemple les événements submit et change), vous pouvez vous attendre à ce que tout ceci soit présent dans jQuery 1.3.3, qui devrait arriver dans le courant du prochain mois (NdT : pas de nouvelles de cette version depuis).

Améliorations de :visible/:hidden

Nous avons changé le fonctionnement des sélecteurs :visible et :hidden (qui étaient utilisés dans jQuery pour déterminer la visibilité d’un élément) :

  • dans jQuery 1.3.1 (et précédents) un élément était visible si sa propriété CSS display n’était pas none, si sa propriété CSS visibility n’était pas hidden et si son type (s’il s’agissait d’un input) n’était pas hidden ;
  • dans jQuery 1.3.2 un élément est visible si les valeurs offsetWidth ou offsetHeight annoncées par le navigateur sont supérieures à 0.

Que signifie ce changement ? Il signifie que si l’attribut CSS display de votre élément ou de l’un de ses parents et ancêtres est none, ou si la largeur ou la hauteur de votre élément est 0, alors cet élément sera déclaré caché (hidden).

Quels sont les avantages de ce changement ? Il y a deux aspects :

  • Les performances sont bien bien meilleures (voir ci-dessous) ;
  • un élément est déclaré hidden s’il est dans un élément hidden (ce qui n’était pas possible auparavant sans l’utilisation d’un plugin
JPEG - 66 ko
graphique des améliorations de :visible/:hidden

Je voudrais remercier Matheus Almeida d’avoir proposé certains des changement que nous avons effectué pour améliorer les performances de ces sélecteurs.

Améliorations de .height()/.width()

.height(), .width(), .innerHeight(), .innerWidth(), .outerHeight(), et .outerWidth() ont été améliorés, accroissant largement leur vitesse dans tous les navigateurs.

JPEG - 66.3 ko
Graphique des améliorations de .height()/.width()

je voudrais remercier Mike Helgeson pour ses contributions sur ce sujet qui ont été largement responsables de certains des gains importants que nous avons avec ces méthodes.

Accélération des sélecteurs dans IE

Les bénéfices du nouveau moteur de sélection Sizzle commencent à vraiment se faire sentir alors que des contributions venant des plus importantes communautés JavaScript arrivent. Un grand nombre d’améliorations ont été envoyées et ont aidé à améliorer les performances du moteur, spécialement dans Internet Explorer

JPEG - 54.5 ko
Accélération des sélecteurs dans IE

Je voudrais remercier Fabio Buffoni pour sa contribution qui ont été largement responsables de ces accélérations.

De même, il y a maintenant une documentation pour Sizzle, si vous êtes intéressés à étendre ou intégrer cette bibliothèque dans la vôtre.

.appendTo(), etc. retournent désormais les éléments insérés

C’est un changement (mineur) dans l’API qui résout un bug de jQuery. Les méthodes appendTo, prependTo, insertBefore, insertAfter, et replaceAll retournent désormais le groupe d’éléments insérés, au lieu de retourner le groupe d’éléments orignaux.

Pour comprendre ce changement, voici un exemple simple.

Soit le code suivant :

<div></div>
<div></div>
<script>
$("<p/>")
  .appendTo("div")
  .addClass("test");
</script>

Voici le résultat avec jQuery 1.3.1 (et précédents) :

<div><p class="test"></p></div>
<div><p></p></div>

C’est le résultat obtenu parce que ces méthodes ne retournent que l’élément qui leur a été passé, au lieu de retourner tous les éléments qui ont effectivement été insérés (et comme seul un paragraphe a été passé — le premier a être inséré — seul le premier paragraphe reçoit la classe).

Mais, si vous utilisez le même code dans jQuery 1.3.2, voilà le résultat :

<div><p class="test"></p></div>
<div><p class="test"></p></div>

Ce qui est le résultat attendu. Le seul problème est que appendTo, prependTo, insertBefore, insertAfter, et replaceAll sont désormais poussés dans la pile jQuery (ce qui signifie qu’ils sont affectés par .end()).

Nous avons mené une étude sur les usages actuels des méthodes ci-dessus et nous n’avons pas trouvé de cas où ce changement affecterait un code existant, nous nous sommes donc sentis autorisés à faire le changement (surtout en considérant que c’était le comportement attendu).

Tester

Nous avons deux annonces à faire concernant notre jeu de tests et notre méthodologie de test dans le projet jQuery :

  • Nous supportons maintenant, en plus de la sélection habituelle de navigateurs, Internet Explorer 8rc1 et Chrome 2 (version de développement — Nightly), et le jeu de tests passe dans ces deux navigateurs sans erreur ;
  • Le jeu de tests à dépassé les 1 500 tests (1 504 pour être précis).
JPEG - 90 ko
résultat du jeu de test sur jQuery 1.3.2

Cela signifie que nous testons avec succès 11 navigateurs : Chrome 1, la version de développement de Chrome, IE 6, IE 7, IE 8rc1, Opera 9.6, Safari 3.2, la version de développement de Webkit, Firefox 2, Firefox 3, la version de développement de Firefox.

(Nous attendons la prochaine beta d’Opera 10 avant de commencer à la supporter entièrement, il y a quelques problèmes critiques avec la beta actuelle)

Performances

Pour mesurer les performances de différentes parties de jQuery, nous utilisons une copie modifée de la suite de tests SlickSpeed pour lancer nos tests (adaptée pour gérer les tests qui ne relèvent pas des sélecteurs). Les résultats bruts de ces tests peuvent être trouvés ci-dessous (tous les temps sont en millisecondes).

Tests sur les sélecteurs

Nous utilisons une copie de la page d’accueil de Yahoo! (dont la complexité est représentative d’une page web) et nous utilisons une sélection des sélecteurs que les gens utilisent vraiment. Cela nous aide à améliorer les performances à la fois pour les applications existantes et les applications futures.

FrameworksjQuery 1.2.6jQuery 1.3jQuery 1.3.2
IE 6 1059 799 626

Tests sur :hidden/:visible

Nous avons testé à la fois les sélecteur :hidden et :visible sur un un grand nombre d’éléments de notre page de tests.

FrameworksjQuery 1.3jQuery 1.3.2
Firefox 3 1512 190
Firefox 3.1 1202 161
Safari 3.2 592 80
Safari Nightly 334 43
Opera 9.6 1307 497
IE 6 1948 738
IE 7 1295 830
Chrome 490 30

Tests sur width/height

Nous avons testé à la fois les méthodes width, height, innerWidth, innerHeight, outerWidth et outerHeight.

FrameworksjQuery 1.3jQuery 1.3.2
Firefox 3 310 106
Firefox 3.1 281 84
Safari 3.2 146 37
Safari Nightly 166 32
Opera 9.6 345 116
IE 6 313 124
IE 7 283 123
Chrome 113 27

Répondre à cet article


Derniers commentaires

Nouveautés sur le Web