.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

Généralement, vous voudrez utiliser des propriétés. Utilisez les attributs uniquement pour :

1. Obtenir un attribut HTML personnalisé (car il n'est pas synchronisé avec une propriété DOM).
2. Obtenir un attribut HTML qui ne se synchronise pas avec une propriété DOM, par exemple obtenir la "valeur d'origine" d'un attribut HTML standard, comme .

Answer 2

attributs -> HTML

propriétés -> DOM

Answer 3

Avant jQuery 1.6, la méthode attr() parfois tenait compte des valeurs de propriété lors de la récupération des attributs, ce qui provoquait un comportement plutôt incohérent.

L'introduction de 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.

La documentation :

jQuery.attr() Obtenez la valeur d'un attribut pour le premier élément de l'ensemble d'éléments appariés.

jQuery.prop() Obtenez la valeur d'une propriété pour le premier élément de l'ensemble d'éléments appariés.

Answer 4

Une chose que .attr() peut faire et que .prop() ne peut pas : affecter les sélecteurs CSS

Voici un problème que je n'ai pas vu dans les autres réponses.

Sélecteur CSS [nom=valeur]

• répondra à .attr('nom', 'valeur')
• mais pas toujours à .prop('nom', 'valeur')

.prop() n'affecte que quelques sélecteurs d'attributs

• input[nom] (merci à @TimDown)

.attr() affecte tous les sélecteurs d'attributs

• input[valeur]
• input[nom]
• span[nom]
• input[data-attribut-personnalisé] (ni .data('attribut-personnalisé') ne modifiera ce sélecteur)

Answer 5

Rappel doux concernant l'utilisation de prop(), exemple :

if ($("#checkbox1").prop('checked')) {
    isDelete = 1;
} else {
    isDelete = 0;
}

La fonction ci-dessus est utilisée pour vérifier si la case à cocher 1 est cochée ou non, si elle est cochée : retourne 1; si non : retourne 0. La fonction prop() est utilisée ici comme une fonction GET.

if ($("#checkbox1").prop('checked', true)) {
    isDelete = 1;
} else {
    isDelete = 0;
}

La fonction ci-dessus est utilisée pour cocher la case 1 et retourner TOUJOURS 1. Maintenant la fonction prop() est utilisée comme une fonction SET.

Ne fais pas d'erreur.

N/B : Lorsque je vérifie la propriété src de l'image. Si le src est vide, prop renvoie l'URL actuelle de la page (incorrect), et attr renvoie une chaîne vide (correct).