Discussion :

[danielhagnoul]

jQuery 1.6 est disponible
Mais pas rétrocompatible, réécriture majeure de la méthode attr()


Pour utiliser cette version, il suffit d'inclure un appel au serveur de code jQuery dans votre page web : <script charset="utf-8" src="http://code.jquery.com/jquery-1.6.min.js"></script>.

Voir : Comment installer la bibliothèque jQuery ?

En général, l'équipe de développement travaille de manière à conserver la compatibilité avec les anciennes versions, cela n'a pas été possible cette fois-ci.

Vous devrez contrôler tous vos scripts avant d'utiliser la version 1.6 en production.

La version 1.6 comprend une réécriture majeure de la méthode attr() et une modification importante dans l'écriture des attributs HTML5 data-XYZ pour tenir compte des recommandations du W3C.

Les méthodes attr() et prop()

Le passage d'une version antérieure à la nouvelle version ne se fera pas automatiquement et sans douleur pour ceux qui n'ont pas respecté les règles CSS et, à tord, posait, par exemple, que la valeur de l'attribut "checked" était "true" au lieu de "checked". La méthode prop() remplacera avantageusement la méthode attr() dans le cas ci-dessus et dans de nombreux autres cas.

Avant la version 1.6, jQuery ne faisait pas la distinction entre propriété et attribut et gérait le tout avec la méthode attr().

Dans la plupart des cas, le navigateur traite la valeur de l'attribut comme valeur de départ pour la propriété, mais les attributs de type Boolean tels que checked ou disabled ont une sémantique inhabituelle.

Un exemple étant plus parlant, considérons : <input type="checkbox" checked> (Écriture valide en HTML5).

attr('checked') représente l'état de l'élément lors de la création du DOM. La propriété (this.checked) est l'état dynamique de l'élément du DOM.

La présence de l'attribut checked signifie que le DOM considère la propriété (this.checked) comme vraie (true), même si l'attribut n'a pas de valeur. Dans le code ci-dessus, la valeur de l'attribut checked est une chaîne vide (ou undefined si aucun attribut n'a été spécifié), mais la valeur de la propriété vérifiée est vraie.

jQuery 1.6 renvoie la valeur réelle de l'attribut (une chaîne vide), elle ne change pas lorsque l'utilisateur clique sur la case à cocher pour changer son état. Seule la valeur de la propriété est modifiée !

$(this).prop("checked") récupère la même valeur que this.checked et est relativement rapide. L'expression $(selection).is(": checked") fonctionne pour toutes les versions de jQuery.

La méthode css()

On peut utiliser un déplacement relatif comme valeur d'une propriété (avant 1.6, on pouvait déjà utiliser cette écriture dans la méthode animate()).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
// Déplacer le bord gauche d'un élément de 10 px
$("#item").css("left", "+=10px");

La méthode data()

Un attribut data-XYZ sera toujours accessible par un data("XYZ") mais un attribut date-dvjh-XYZ sera accessible par un data("dvjhXYZ").

L'amélioration des performances de la méthode déclenchant les événements (trigger) permet une meilleure gestion des événements getData et setData et améliorera les performances des plugins qui les utilisent.

Les objets différés (deferred) et les promesses (promise)

deferred.always(alwaysCallbacks) : ajoute des méthodes de rappel aux files d'attente. Ces méthodes seront exécutées dans tous les cas (succès ou échec) lorsque la promesse se réalisera.

deferred.pipe( [ doneFilterFunction ], [ failFilterFunction ] ) : retourne une nouvelle promesse (un objet différé) qui filtre le statut et les valeurs de l'objet différé original au travers d'une fonction.

promise( [ type ], [ target ] ) : retourne une promesse (un objet différé) qui se réalisera lorsque les actions attachées à la sélection se termineront.

Les animations

Plusieurs animations (certaines sur le même élément du DOM) peuvent être en cours au même moment. La version 1.6 améliore la gestion de la file des animations (fx) en s'assurant qu'elles se déroulent de manière synchrone dans le même intervalle de temps.

Pour obtenir un rendu plus fluide, jQuery utilise la méthode requestAnimationFrame disponible sur les nouvelles versions des navigateurs.

Les animations gèrent les promesses (objets différés).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$(".elements").fadeOut();
 
$.when( $(".elements") ).done(function( elements ) {
    // all elements faded out
});

À retenir :

.is() : retourne "true" si un sélecteur, un élément du DOM ou un objet jQuery est inclus dans un ensemble de même nature. La version 1.6 ajoute : .is( obj_jQuery ) ; .is( element ) et .is( function(index) )

.undelegate() : cette méthode permet la suppression de gestionnaires d'événements installés par la méthode delegate(). Elle peut être paramétrée sur un espace de nom, sur un sélecteur et un ou plusieurs types d’événements.

$.holdReady() : empêche ou laisse se produire l'événement "ready event". Cette méthode est destinée à faciliter le travail des logiciels chargeurs de code.

$.map( arrayOrObject, callback( value, indexOrKey )) : transforme les éléments d'un tableau ou d'un objet en un nouveau tableau (array).

.closest() : cherche, en partant de l'élément courant et en remontant l'arbre des éléments composant le DOM, le premier élément qui correspond à la sélection. La version 1.6 ajoute : .closest( jQuery object ) et .closest( element )

find(), closest() et is() traitent maintenant tous les éléments du DOM et les objets jQuery.

------------------

La liste et les liens vers les modifications apportées par la version 1.6 : http://api.jquery.com/category/version/1.6/

------------------

Cette version contient une liste interminable de modifications mineures ou de corrections de bogues. Il m'est impossible de traduire tout cela.

Source : http://blog.jquery.com/2011/05/03/jquery-16-released/

[Wormus]

Pour le moment, je vais rester en 1.5.1, je venais juste de tout vérifier pour cette version.
Même si la 1.6 à l'air d'être moins rétro-compatible que d'autres versions précédente, je crois pas que ça affectera mais plugins et scripts.

Les ajouts ou améliorations comme closest() et css() m'intéressent particulièrement.
Quand je devais faire des trucs du genre

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$$.css('...', parseInt($$.css('...')) + 10);
// devient  :
$$.css("...", "+=10px"); // cool!

[danielhagnoul]

Liste des propriétés pour les attributs booléens.

checked             (input type=checkbox/radio)
selected            (option)
disabled            (input, textarea, button, select, option, optgroup)
readonly            (input type=text/password, textarea)
multiple            (select)

[Pilru]

Z'auraient pu introduire la nouvelle méthodes prop() sans toucher à attr() dans une premier temps. Cela aurait au moins eu l'avantage de permettre d'adapter en douceur l'existant. Et ensuite modifier la méthode attr() en 1.7, par exemple.
Parce que là, franchement, c'est un peu bourrin comme façon de faire.

Vraiment déçu, sur ce coup là.

[danielhagnoul]

Bonsoir

Au premier abord, le changement est déroutant, mais à l'usage la séparation entre le code HTML (attribut), les propriétés du DOM et leur usage en JavaScript semble très logique.

Un exemple d'utilisation vous aidera peut-être à mieux digérer le changement : http://www.developpez.net/forums/d10...n-suppression/

Exemple de deux sélections, avec transfert des options sélectionnées de l'une vers l'autre. Avec gestion des boutons et réinitialisation de l'ensemble lors du rechargement de la page.

Cet exemple utilise la dernière version de jQuery, 1.6, et montre un exemple d'utilisation de la méthode prop().

La page utilise les techniques d'aujourd'hui et fonctionne sous C11, F4.1 et IE9. (Je ne travaille plus pour les navigateurs obsolètes, je vous laisse le soin de l'adaptation. Cela n'influence pas le code jQuery 1.6)

[Pilru]

L'utilité de prop() je le comprend très bien. Mais casser la compatibilité sur attr() directement en 1.6 ne me parait pas très judicieux. Déjà que la 1.5 avait cassé le plugin validate...

[danielhagnoul]

Bonjour

Après le "je prop() moi non plus" de la saga 1.6, John Resig publie un billet sur son blog pour expliquer la sortie de la version 1.6.1

Car l'explication donnée lors de la sortie de la version 1.6.1 RC1 et reprise à l'identique pour la sortie de la version finale, n'est pas un modèle de simplicité.

Après avoir reconnu que le "patch" appliqué sur la méthode attr() risquait de compliquer la maintenance et les évolutions futures de cette portion du code de jQuery, il résume clairement la situation des méthodes attr() et prop().

Quelle est l'utilité de la méthode prop() ?

1. Connaître et modifier la valeur de propriétés du DOM. Par exemple : nodeName, tagName, selectedIndex, defaultValue, etc.
2. Accéder aux propriétés du DOM au travers de la méthode attr() sera toujours plus lent, car en interne attr() fait appel à prop().

Avec 1.6 et plus : $("#maDivID").prop("tagName");

Avant 1.6, on ne pouvait accéder aux propriétés du DOM qu'indirectement en sélectionnant l'élément du DOM contenu dans l'objet jQuery : $("#maDivID")[0].tagName

L'affaire 1.6, a montré que la majorité des utilisateurs sont plus attachés à la stabilité de l'API qu'à l'introduction d'améliorations. À terme, si l'équipe de développement n'ose plus introduire de nouveautés, le risque de sclérose par manque d'innovation sera un véritable danger pour l'avenir de jQuery.