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

Accueil du site > Actualités > jQuery 1.1.4 : plus rapide, plus de tests, prêt pour la version (...)

jQuery 1.1.4 : plus rapide, plus de tests, prêt pour la version 1.2

dimanche 26 août 2007, par John Resig, Olivier G.

Traduction de l’article jQuery 1.1.4 : Faster, More Tests, Ready for 1.2, par John Resig.


Nous sommes heureux d’annoncer la dernière version de jQuery : jQuery 1.1.4. Sauf si nous avons commis d’horribles erreurs, cette version sera la dernière de la branche 1.1, ce qui devrait nous permettre de publier jQuery 1.2 en septembre.

Vous pouvez télécharger cette version sur la page jQuery de Google Code :

Télécharger :

Améliorations

Nous avons ajouté un certain nombre d’améliorations dans cette version, en plus des habituelles résolutions de bugs.

Utilisez n’importe quel nom

JQuery sera bientôt la première librairie javascript capable de se renommer complètement. Jusqu’à présent, il était possible de renommer le raccourci $ (utilisé à la place de la fonction jQuery). Désormais, vous pouvez renommer à la fois $ et jQuery, ce qui permet notamment deux choses :

  • Vous pouvez inclure simultanément de multiples versions de jQuery sur la même page ;
  • vous pouvez aussi inclure jQuery dans l’espace de nommage d’autres objets et librairies. Par exemple :
// Avec la boîte à outils Dojo
dojo.jquery = jQuery.noConflict(true);
dojo.jquery("#elem div").slideDown("slow");
// Avec Yahoo UI
YAHOO.query = jQuery.noConflict(true);
YAHOO.query("span.hidden").removeClass("hidden");

 

Améliorations de vitesse

Que serait une nouvelle version sans quelques améliorations de vitesse ? Nous avons eu l’opportunité d’aller au-delà de tous les test précédents et d’améliorer la vitesse des trois fonctions les plus utilisées dans jQuery : les sélecteurs d’ID, les sélecteurs de tag name, et les boucles each(). Il est absolument critique que chacun de ces éléments soit le plus rapide possible, puisqu’ils sont susceptibles d’être utilisés fréquement.

Voici les résultats d’un jeu de tests utilisé pour analyser la vitesse des trois changements :

Améliorations de $("#id")
Navigateur jQuery 1.1.3 jQuery 1.1.4 Progression
IE 6 651 ms 70 ms 830%
Firefox 2 1355 ms 27 ms 4919 %
Safari 3 101 ms 14 ms 620 %
Opera 9 270 ms 62 ms 335 %
Amélioration moyenne 1676 %
Améliorations de $("elem")
Navigateur jQuery 1.1.3 jQuery 1.1.4 Progression
IE 6 661 ms 451 ms 47 %
Firefox 2 1717 ms 143 ms 1100 %
Safari 3 99 ms 83 ms 19 %
Opera 9 226 ms 198 ms 14 %
Amélioration moyenne 295 %
Améliorations de .each()
Navigateur jQuery 1.1.3 jQuery 1.1.4 Progression
IE 6 200 ms 30 ms 567 %
Firefox 2 468 ms 29 ms< 1514 %
Safari 3 17 ms 11 ms 54 %
Opera 9 45 ms 25 ms 80 %
Amélioration moyenne 554 %

Améliorations du jeu de tests

C’est une grande nouvelle, en particulier pour les développeurs. Le jeu de tests de jQuery a été complètement revu et amélioré pour plus de stabilité. Un nouvel ensemble de tests pour l’animation et l’AJAX ont été intégrés, amenant le nombre de tests à plus de 800 !

De plus, le jeu de tests fonctionne sans erreurs dans tous les navigateurs les plus courants que nous prenons en compte : Firefox 2, Safari 3, Internet Explorer 6, et Opera 9 (Safari 2 et IE 7 ne sont pas montrés dans un soucis de concision). La preuve :

À l’avenir, nous travaillerons à l’amélioration des tests concernant les événements, les attributs et les CSS, ce qui nous amènera certainement à plus de 1 000 tests très prochainement.

De plus, il faut noter que le jeu de tests de jQuery est à présent inclus dans le jeu de tests de Mozilla, et qu’il est joué à chaque commit de la prochaine version de Firefox (Firefox 3). On s’assure ainsi systématiquement que tout fonctionnera comme on s’y attend dans les prochaines versions de Firefox.

Corrections de bugs

53 tickets ont été fermés pour cette version. Vous pouvez lire tous les détails sur le suivi de bugs (qui inclut aussi les corrections qui ont été faites dans jQuery 1.1.3.1).

Beaucoup de problèmes importants ont été résolus, notamment concernant l’évaluation de scripts inclus dans une chaîne HTML, l’accès aux CSS calculées par Safari, et la manipulation des réglages Ajax.

Nouvelles fonctionnalités

Deux ensembles de nouvelles fonctionnalités ont été ajoutés. Les deux premières, .slice() et :has(), font partie de jQuery 1.2, mais leur incorporation a été rendue nécessaire par la dépréciation d’autres fonctionnalités (voir ci-dessous). Les changements apportés à .extend() et .noConflict() ont été introduits pour corriger des bugs qui existaient depuis longtemps.

.slice()

Vous pouvez identifier le nom de cette méthode à celui de la méthode .slice() qui existe dans les tableaux — NDT : Array() — Javascript (vous êtes chanceux, parce que son comportement est identique). C’est une bonne méthode pour séparer des objets jQuery et accéder aux éléments qu’ils contiennent. Tous les exemples qui suivent sont des manières valides d’utiliser la méthode .slice() :

$("div").slice(0,1);  // Première div
$("div").slice(-1);   // Dernière div
$("div").slice(1,-1); // Toutes les divs, sauf la première et la dernière
$("div").slice(1,3);  // Le second et le troisième divs
$("div").slice(7,8);  // Le huitième div

:has()

Ce nouveau sélecteur vient en remplacement de la manière actuelle de tester si un élément contient un autre élément (div[p]). Vous pouvez désormais utiliser ce sélecteur de la même manière que vous utiliseriez ce sélecteur XPath, comme suit :

// Tous les divs qui contiennent un paragraphe
$("div:has(p)")
// Toutes les ancres qui contiennent une image
$("a:has(img)")
// Tous les divs qui contiennent une ancre qui contient une image
$("div:has(a:has(img))")

.extend() récursif profond

C’est une amélioration fréquemment demandée de la méthode .extend(). Cette modification vous autorise à fusionner plus profondément des objets imbriqués (au lieu d’écraser certaines propriétés). Cela est plus clair avec un exemple :

.extend() normal

jQuery.extend(
 { name: "John", location: { city: "Boston" } },
 { last: "Resig", location: { state: "MA" } }
);
// Resultat :
// => { name: "John", last: "Resig", location: { state: "MA" } }

Nouvel .extend() profond

jQuery.extend(true,
 { name: "John", location: { city: "Boston" } },
 { last: "Resig", location: { state: "MA" } }
);
// Resultat :
// => { name: "John", last: "Resig",
//      location: { city: "Boston", state: "MA" } }

.noConflict(true)

Comme décrit précédemment, cet ajout à .noConflict() vous autorise à renommer complètement l’espace de nommage jQuery et le raccourci $, tout en pouvant revenir en arrière sur n’importe quel changement que celà pourrait avoir fait. Vous pouvez utiliser ce nouveau raccourci de la manière suivante :

// Donner à jQuery un nom personnalisé
var jq = jQuery.noConflict(true);
jq("#id div").hide();

// Les deux commandes échouent, puisque $ et jQuery ont été renommés
$("#id div").hide();
jQuery("#id div").hide();

Cette méthode peut aussi être utilisée pour introduire jQuery dans un espace de nommage comme suit :

// Introduire jQuery dans un espace de nommage
var obj = {};
obj.jq = jQuery.noConflict(true);
obj.jq("#id div").hide();

Fonctionnalités dépréciées

Nous avons aussi déprécié un certain nombre de méthodes dans jQuery 1.1.4 pour préparer les changements d’API dans jQuery 1.2. Quand c’était possible, nous avons fourni des méthodes alternatives.

Avec jQuery 1.2, tout comme avec la version 1.1, un plugin de rétro-compatibilité sera fourni. Donc, si vous voulez continuer d’utiliser ces techniques particulières, vous pourrez utiliser ce plugin et continuer de le faire.

De plus, afin de tenir compte des changements dans le support de XPath, un autre plugin sera publié qui gérera les fonctionnalités de sélections par XPath dans la version 1.2 de jQuery.

Sélecteurs

$("div//p") : sélecteur XPath de descendant : utilisez le sélecteur CSS $("div p") à la place. Ou, lorsque jQuery 1.2 sera plublié, utilisez le plugin XPath.

$("div/p") : sélecteur XPath d’enfant : utilisez le sélecteur CSS $("div > p") à la place. Ou, lorsque jQuery 1.2 sera plublié, utilisez le plugin XPath.

$("p/../div") : sélecteur XPath de parent : utilisez le sélecteur $("p").parent("div") à la place. Ou, lorsque jQuery 1.2 sera plublié, utilisez le plugin XPath.

$("div[p]") : sélecteur XPath de contenu : utilisez le nouveau sélecteur $("div:has(p)") à la place. Ou, lorsque jQuery 1.2 sera plublié, utilisez le plugin XPath.

$("a[@href]") : sélecteur XPath d’attribut : bien que ce sélecteur soit déprécié dans cette version, il ne sera pas retiré de jQuery 1.2. Mais il sera recommandé dans cette version que vous utilisiez le sélecteur CSS $("a[href]") à la place. Ou, lorsque jQuery 1.2 sera publié, utilisez le plugin XPath.

Manipulation de l’arbre du DOM

$("div").clone(false) : appeler la méthode .clone() avec un argument est déprécié (la méthode .clone(), en tant que telle, est conservée). Au lieu d’appeler .clone(false), vous devez à présent utiliser .clone().empty().

Traversée de l’arbre du DOM

$("div").eq(0) : cette méthode est dépréciée au profit de l’utilisation de la nouvelle méthode .slice() (qui fonctionne de la même manière que la méthode .slice() des tableaux javascripts). Vous pouvez remplacer .eq(0); par .slice(0,1);

De plus, .eq(0); peut être remplacé par $("div:eq(0)") ou $("div:first").

$("div").lt(2) : cette méthode est dépréciée au profit de la nouvelle méthode .slice() (qui fonctionne de la même manière que la méthode .slice() des tableaux javascript). Vous pouvez remplacer .lt(2); par .slice(0,2);

De plus, .lt(2); peut être remplacé par $("div:lt(2)").

$("div").gt(2) : cette méthode est dépréciée au profit de la nouvelle méthode .slice() (qui fonctionne de la même manière que la méthode .slice() des tableaux javascript). Vous pouvez remplacer .gt(2) par $("div").slice(3);

De plus, $("div:gt(2)") peut être remplacé par $("div:gt(2)").

Ajax

$("#elem").loadIfModified("some.php") : cette méthode est retirée au profit de la forme développée de $.ajax() :

$.ajax({
 url: "some.php",
 ifModified: true,
 success: function(html){
   $("#elem").html(html);
 }
});

$.getIfModified("some.php") : cette méthode est retirée au profit de la forme développée de $.ajax() :

$.ajax({
 url: "some.php",
 ifModified: true
});

$.ajaxTimeout(3000) : cette méthode est retirée au profit de la méthode plus explicite $.ajaxSetup() :

$.ajaxSetup({timeout: 3000});

$(...).evalScripts() : cette méthode n’est plus nécessaire dans jQuery, puisque tous les scripts inclus dans une chaîne HTML sont automatiquement évalués quand ils sont introduits dans le document. Il n’y a donc pas de méthode de substitution.


Comme toujours, signalez nous tout bug que vous pourriez rencontrer dans jQuery 1.1.3.1 et jQuery 1.1.4. Merci !

Répondre à cet article

7 Messages de forum

  • Je trouve cela génial, j’utilise jquery depuis le commencement et mes sites internet sont de très bonne qualité avec cette librairie mettant ainsi du piment a de simple page statique.
    Ceci juste pour montré ma gratitude et la recommande chaudement depuis longtemps.
    PS : j’espère que vous continuerez a faire des tutoriaux sur le sujet par rapport au version sans oublier qu’une documentation en français serai un plus ;-)
    amicalement gtraxx

    Répondre à ce message

  • bientôt jQuery 1.1.4.1

    3 septembre 2007 16:38, par Fil

    La révision [3070] de jQuery corrige un bug de la 1.1.4 dont le $(document).ready() ne marchait pas bien sous MSIE. Pour mémoire je l’ai recopié ici http://zone.spip.org/trac/spip-zone...

    Répondre à ce message

    • (logo)
      bientôt jQuery 1.1.4.1 17 septembre 2007 17:16, par mp

      Bonjour

      J utilise SPIP 192b et ai un probleme d affichage d une cellule survolée ( css utilisé avec des balises ul et li)
      sous IE6 !! tout est ok sous IE7

      je tourne depuis une semaine sur le forums, et spip contrib etc .. et ce pb IEv6 me sort par les yeux, je ne trouve pas de solution, du moins je ne sais pas mettre en oeuvre ces modifications

      SPIP a ete installé avec une jquery version 1.1 , que je viens de mettre à jour a 1.1.4
      parait il que ça marche sans le jquery ! pas chez moi !

      MAIS : la page ne prend pas le include ni meme le "#chemin... du jquery

      j avoue que je me perds completemnt

      pouvez vous m aider et me dire comment on exploite ce fameux jquery ?

      d avance un grand merci

      mpaule

      Répondre à ce message

      • (logo)
        bientôt jQuery 1.1.4.1 18 septembre 2007 13:31, par yy

        comment envoyer plusieur id pour les drop down deja créer par ajax pour faire une requette par exemple :

        $("select#couleur").change(
        function()
        $.getJSON("ajax_tapis.php",id_couleur : $(this).val(), ajax : ’true’,
        function(e)
        var options = ’’ ;
        for (var f = 0 ; f < e.length ; f++)
        options += ’’ ;

        $("select#tapis").html(options) ;
        $(’#tapis option:first’).attr(’selected’, ’selected’) ;
        )
        )
        pour construire le select tapis sa depend d’un autre id encore
        $.getJSON("ajax_tapis.php", id_couleur : $(this).val(), ajax : ’true’ ,

        Répondre à ce message

  • (logo)

    jQuery 1.1.4 : plus rapide, plus de tests, prêt pour la version 1.2

    17 décembre 2007 11:18, par Laurent

    Bonjour,

    Très pratique en effet. Cependant, un souci avec Firefox...
    Le code suivant marche sans souci sur IE6 et Opéra en revanche, sous firefox, il entre dans la fonction error et me retourne l’alert ave pourtant les bonnes donnees...

    $(document).ready(function()
    $("form[@name=ajout_carac]").submit(function()
    var id = GetParam("id") ;
    var i=0 ; // données nom des caractéristiques
    nom = new Array() ;
    codl = new Array() ;
    $("input[@type=text]").each(function()
    nom[i] = this.value ;
    i++ ;
    ) ;
    var i=0 ; // données id des langues
    $("input[@type=hidden]").each(function()
    codl[i] = this.value ;
    i++ ;
    ) ;
    // construction des données envoyées
    var donnees = "id="+id ;
    for(i=0 ; i
    donnees += "&lang"+codl[i]+"="+nom[i]+"" ;

    if(donnees != "" && id != "")
    $.ajax(
    url : "ajoutCarac.php",
    data : donnees,
    success : function(data)
    $("#message").html(data) ;
    document.location = "gestion_type.php ?menu=gestion_type" ;
    ,
    error : function()
    alert(’pas d\’ajout\n’+donnees) ;
    document.location = "gestion_type.php ?menu=gestion_type" ;

    ) ;

    ) ; ) ;

    Répondre à ce message


Derniers commentaires

Nouveautés sur le Web