jQuery est passé en version 1.3 puis rapidement en version 1.3.1. Cette version apporte le lot habituel de changements (optimisations, nouvelles fonctionnalités, réécritures, etc…) mais aussi, et surtout, casse la compatibilité avec les versions précédentes. Comme je me suis cassé les dents dessus, sans le savoir, j’ai pensé qu’il serait bon de faire un petit tour de quelques unes des nouveautés et incompatibilités introduites dans cette version…

Nouveautés
Comme à chaque version majeure (et on peut se demander comment ils font), les développeurs de ce framework ont de nouveau augmenté les performances de jQuery:

• Réécriture de l’injection HTML: 6x plus rapide!
• Utilisation d’un nouveau sélecteur, plus rapide: sizzle
• Ajout des live events dans le core de jQuery
• Nouvel objet Event
• Réécriture de la méthode offset(), beaucoup plus rapide
• Et bien plus…

Incompatibilités
Malheureusement, certaines fonctionnalités dépréciées depuis un moment ont été retirées de cette version. Les modifications à effectuer pour rendre son code compatible sont plutôt mineures, quand on sait où chercher

1. suppression de @ dans [@attr]
Le plus gros changement est la suppression de @. Une sélection comme:

$('input[@name=toto]')...

deviendra:

$('input[name=toto]')...

2. changements dans la méthode ready()
Auparavant la méthode attendait le chargement de toutes les feuilles de styles. Comme ce n’est plus le cas, tous les fichiers CSS doivent être inclus avant les scripts dans la page.

3. Ordre des sélecteurs « a, b, c »
L’ordre des sélecteurs peut varier. Les navigateurs supportant querySelectorAll (Safari, Firefox 3.1+, Opera 10+, IE8+) retourneront les éléments dans l’ordre du document alors que les autres navigateurs les retourneront (pour l’instant) dans l’ordre spécifié. Dans une prochaine version 1.3.x tous les sélecteurs séparés par des virgules seront retournés dans l’ordre du document.
Concrètement, cela signifie que dans l’exemple suivant:
DOM

<div id="c">
	Div c
  </div>
 
  <div id="b">
	Div b
  </div>
 
  <div id="a">
	Div a
  </div>

Code

$(document).ready(function()
{
    $('#a, #b, #c').each(
      function() {
         alert( $(this).attr('id') ); 
      }
   );
});

Les navigateurs supportant querySelectorAll (cf. au dessus), renverront les éléments dans l’ordre du DOM, à savoir:

c b a

Alors que les autres renverront les éléments dans l’ordre spécifié dans le sélecteur, c’est à dire:

a b c

Attention à ne pas se baser sur cet ordre donc !

Nouveautés
Cette nouvelle version de jQuery vient comme d’habitude avec son lot de nouveautés bien pratiques, parmi lesquelles:

1. nouvelle méthode closest( expr )
Cette méthode renvoie le plus proche parent correspondant à l’expression, l’élément de départ compris. Exemple:

DOM

<div class="superParent" id="main">
     <div>
        <ul id="maListe">
			<li id="15">
				<a>clique !</a>
			</li>
        </ul>
    </div>
  </div>

Code

$('a').click(function() {
  alert($(this).closest('li').attr('id'));
  alert($(this).closest('div.superParent').attr('id'));
});

L’exécution du code ci-dessus donnera le résultat suivant:

15
main

2. live events
Auparavant, les événements n’étaient pas mis à jour en temps réel sans passer par un plugin comme livequery et un appel comme celui là:

$('a') 
    .livequery('click', function(event) { 
        alert('clique !'); 
        return false; 
    });

sera tout simplement remplacé par:

$('a') 
    .live('click', function(event) { 
        alert('clique !'); 
        return false; 
    });

3. La méthode is() et selecteur not() supportent maintenant des expressions complexes, comme:

$('a:not(.selected, .highlighted)')...

Quelques liens
Pour finir, et pour en savoir plus, voici quelques liens sur jQuery:

• changelog complet: changelog jQuery 1.3
• Introduction à jQuery
• Documentation officielle: docs.jquery.com