.prop() vs .attr()

Question

Alors jQuery 1.6 a la nouvelle fonction prop().

$(selector).click(function(){
    //au lieu de:
    this.getAttribute('style');
    //dois-je utiliser:
    $(this).prop('style');
    //ou:
    $(this).attr('style');
})

ou dans ce cas, est-ce qu'ils font la même chose?

Et si je dois passer à utiliser prop(), est-ce que tous les anciens appels à attr() vont casser si je passe à la version 1.6?

MISE À JOUR

selector = '#id'

$(selector).click(function() {
    //au lieu de:
    var getAtt = this.getAttribute('style');
    //dois-je utiliser:
    var thisProp = $(this).prop('style');
    //ou:
    var thisAttr = $(this).attr('style');

    console.log(getAtt, thisProp, thisAttr);
});

test

(voir aussi ce fiddle: http://jsfiddle.net/maniator/JpUF2/)

La console enregistre le getAttribute comme une chaîne, et le attr comme une chaîne, mais le prop comme une CSSStyleDeclaration, Pourquoi? Et comment cela affecte-t-il mon codage à l'avenir?

Answer 1

TL;DR

Utilisez prop() plutôt que attr() dans la plupart des cas.

Une propriété est l'état actuel de l'élément d'entrée. Un attribut est la valeur par défaut.

Une propriété peut contenir des éléments de différents types. Un attribut ne peut contenir que des chaînes de caractères.

Answer 2

Dirty checkedness

Ce concept fournit un exemple où la différence est observable : http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

Essayez-le :

• cliquez sur le bouton. Les deux cases à cocher sont cochées.
• décochez les deux cases à cocher.

• cliquez à nouveau sur le bouton. Seule la case à cocher prop est cochée. BANG !

  $('button').on('click', function() { $('#attr').attr('checked', 'checked') $('#prop').prop('checked', true) })

  attr prop Définir les attributs checked attr et prop.

Pour certains attributs comme disabled sur button, ajouter ou supprimer l'attribut de contenu disabled="disabled" bascule toujours la propriété (appelée attribut IDL en HTML5) car http://www.w3.org/TR/html5/forms.html#attr-fe-disabled dit :

L'attribut IDL disabled doit refléter l'attribut de contenu disabled.

donc vous pourriez vous en sortir, bien que ce soit moche car cela modifie inutilement le HTML.

Pour d'autres attributs comme checked="checked" sur type="checkbox", les choses se compliquent, car une fois que vous cliquez dessus, elle devient sale, et ensuite ajouter ou supprimer l'attribut de contenu checked="checked" ne bascule plus l'état coché.

C'est pourquoi vous devriez utiliser principalement .prop, car cela affecte directement la propriété effective, au lieu de compter sur des effets secondaires complexes liés à la modification du HTML.

Answer 3

Tout est dans la documentation:

La différence entre les attributs et les propriétés peut être importante dans des situations spécifiques. Avant jQuery 1.6, la méthode .attr() prenait parfois en compte les valeurs de propriété lors de la récupération de certains attributs, ce qui pouvait entraîner un comportement incohérent. Depuis jQuery 1.6, la méthode .prop() fournit un moyen de récupérer explicitement les valeurs de propriété, tandis que .attr() récupère les attributs.

Alors utilisez prop !

Answer 4

attributs sont dans votre fichier document texte HTML (== imaginez que c'est le résultat de l'analyse de votre balisage HTML), tandis que
propriétés sont dans l'arbre DOM HTML (== fondamentalement une propriété réelle de certains objets dans le sens de JS).

Importamment, beaucoup d'entre eux sont synchronisés (si vous mettez à jour la propriété class, l'attribut class en html sera également mis à jour; et vice versa). Mais certains attributs peuvent être synchronisés avec des propriétés inattendues - par exemple, l'attribut checked correspond à la propriété defaultChecked, ainsi

• cocher manuellement une case à cocher changera la valeur de .prop('checked'), mais ne changera pas les valeurs de .attr('checked') et .prop('defaultChecked')
• définir $('#input').prop('defaultChecked', true) changera également .attr('checked'), mais cela ne sera pas visible sur un élément.

La règle à suivre est: la méthode .prop() devrait être utilisée pour les attributs/propriétés booléens et pour les propriétés qui n'existent pas dans le html (comme window.location). Tous les autres attributs (ceux que vous pouvez voir dans le html) peuvent et devraient continuer à être manipulés avec la méthode .attr(). (http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/)

Et voici un tableau qui montre où .prop() est préféré (même si .attr() peut toujours être utilisé).

---

Pourquoi voudriez-vous parfois utiliser .prop() au lieu de .attr() alors que ce dernier est officiellement recommandé?

1. .prop() peut retourner n'importe quel type - string, integer, boolean; tandis que .attr() retourne toujours une chaîne de caractères.
2. .prop() est dit être environ 2,5 fois plus rapide que .attr().

Answer 5

.attr():

• Obtenez la valeur d'un attribut pour le premier élément dans l'ensemble des éléments appariés.
• Vous donne la valeur de l'élément telle qu'elle a été définie dans le html lors du chargement de la page.

.prop():

• Obtenez la valeur d'une propriété pour le premier élément dans l'ensemble des éléments appariés.
• Donne les valeurs mises à jour des éléments qui ont été modifiés via javascript/jquery.