jQuery

Changements du module Attributes dans jQuery 1.6

Flattr this!

La nouvelle version de jQuery a apporté quelques changements intéressants au module Attributes.

Je vais essayer de détailler les changements dans ce billet.

Premièrement, utiliser .attr() sur les objets document et window ne fonctionnera pas. Par respect du DOM, ceux-ci ne peuvent pas avoir d'attributs, il est donc normal que jQuery suive cette règle au plus près. Ils contiennent cependant des propriétés qui elles peuvent donc être manipulées grâce à .prop().

Avec jQuery 1.6, vous aurez une exception si vous tentez d'utiliser .attr() sur ces objets. Avec 1.6.1, .attr() vous renverra le résultat de .prop(). Ah oui, au fait, jQuery 1.6.1 est disponible mais je vous en reparle lundi 😉

Les booléens tels que checked, selected ou encore disabled reçoivent un traitement spécial.

Le problème de définir un attribut pour ces booléens est que cela ne définit que la valeur initiale et non la valeur courante. Il faut donc utiliser .prop() pour être au plus juste. Vous pouvez faire ceci par exemple :

$(“:checkbox”).get(0).checked = true;
// Ou encore
$(":checkbox:first").prop(“checked”, true);

Mais vous ne pouvez pas faire ça :

$(“:checkbox”).attr(“checked”, true);

Vous ne feriez que modifier la valeur initiale de vos checkbox, sans intérêt et risque de vous faire tourner en rond. Avec jQuery 1.6.1, ce sera la propriété qui est modifiée mais maintenir cet usage n'est pas recommandé puisque ne correspond pas à la logique de jQuery et du DOM.

Pour info, voici la liste exhaustive des propriétés booléennes dont vous allez devoir prendre l'habitude d'utiliser .prop() pour les manipuler :

  • autofocus
  • autoplay
  • async
  • checked
  • controls
  • defer
  • disabled
  • hidden
  • loop
  • multiple
  • open
  • readonly
  • required
  • scoped
  • selected

Et ici une correspondance un peu plus complète de ce qui peut être manipulé avec .attr() et avec .prop() ou avec les deux (mais recommandé avec .prop()) :

Attribut/Propriété .attr() .prop()
accesskey
align
async
autofocus
checked
class
contenteditable
defaultValue
draggable
href
id
label
location
multiple
nodeName
nodeType
readOnly
rel
selected
selectedIndex
src
style
tabindex
tagName
title
type
width

Encore une fois, n'oubliez pas que si c'est coché pour les deux, il vaut quand même mieux utiliser .prop().

Voilà, à vos questions, si vous en avez 😉

Flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans jQuery, avec comme mot(s)-clef(s) , , , , . Vous pouvez la mettre en favoris avec ce permalien.
  • Syndrael

    Sympa cet article.. C’est clair que ça risque de faire des modifs dans les codes, voire rendre incompatibles ou défectueux certains plugins.. urgh..
    Croisons les doigts pour que JQueryUI ne soit pas trop impacté..
    Il faudrait presque faire une recherche full-text de ‘attr(‘ dans les codes de plugins..
    S.

  • http://dascritch.net Da Scritch

    Eh oui, on peut pas changer un src via prop() pour une image, mais via attr() .
    Par contre, undeterminate , qui n’est jamais exploité en HTML, sans problème settable en prop
    faut tout retester, si on veut faire evoluer son code.

    • http://www.mathieurobin.com/ Mathieu

      Ah, merci de l’info. Je vais faire quelques tests et mettre à jour en conséquence l’article. Merci!

Articles liés