web-dev-qa-db-fra.com

différence entre prop () et attr () dans jQuery et quand utiliser attr () et prop ()

J'ai vu dans certains endroits .attr () est utilisé dans jQuery.In certains endroits. .Prop () est utilisé.Mais j'ai cherché dans SO et Google, je suis très confus. quand les utiliser.

J'ai vu les liens suivants jQuery attr vs prop, il y a une liste d'accessoires?jQuery attr vs prop?

Mais je n'ai pas eu la réponse.Veuillez m'aider.Merci d'avance.

Avant de donner un vote négatif, veuillez expliquer la raison, puis je corrigerai dans mon prochain message.

jqueryattrprop
73
PSR

de docs

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 () tenait parfois compte des valeurs de propriété lors de l'extraction de certains attributs, ce qui pouvait entraîner un comportement incohérent. Depuis jQuery 1.6, la méthode .prop () fournit un moyen d'extraire explicitement les valeurs de propriétés, tandis que .attr () récupère les attributs.

exemple

Par exemple, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked et defaultSelected doivent être récupérés et définis avec la méthode .prop (). Avant jQuery 1.6, ces propriétés étaient récupérables avec la méthode .attr (), mais cela ne faisait pas partie de la portée de attr. Ceux-ci n'ont pas d'attributs correspondants et ne sont que des propriétés.

mis à jour après un commentaire

Vous pouvez définir un attribut pour un élément HTML. Vous le définissez en écrivant le code source. Une fois que le navigateur a analysé votre code, le nœud DOM correspondant sera créé. Il s’agit d’un objet ayant ainsi des propriétés.

Un exemple simple peut être ..

<input type="test" value="test" id="test" />

Ici le type, la valeur, l'id sont des attributs.Une fois que le navigateur l'a rendu, vous obtiendrez d'autres propriétés telles que align, alt , autofocus, baseURI, vérifié et ainsi de suite.

lien si vous voulez en savoir plus à ce sujet

79
bipen

.attr() modifie les attributs de cette balise HTML.

.prop() modifie les propriétés de cette balise HTML conformément à l'arborescence DOM.

Comme le suggère l'exemple de ce lien. Un champ de saisie peut avoir l'attribut "valeur". Cela correspondra à la valeur par défaut que vous avez entrée. Si l'utilisateur modifie la valeur dans le champ de saisie, la propriété "valeur" change dans l'arborescence DOM, mais l'attribut d'origine reste inchangé.

En résumé, si vous souhaitez définir la valeur par défaut pour l'attribut d'une balise HTML, utilisez la fonction .attr(). Si cette valeur peut être modifiée par l'utilisateur (entrées, cases à cocher, radios, etc.), utilisez la fonction .prop() pour obtenir la valeur la plus récente.

Référence: HTML: différence entre attribut et propriété

Exemple d'extrait de code 

$(document).ready(function() {
  console.log($('#test').attr('value') + " - With .attr()");

  $('#answer').click(function() {
    console.log($('#test').attr('value') + " - With .attr()");
    console.log($('#test').prop('value') + " - With .prop()");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Change the input value and check the console...</div>
<input type="text" id="test" value="Sample">
<button id="answer">Click Me</button>
54
CP510

JQuery est une bibliothèque en constante évolution, qui apporte parfois des améliorations régulières. .attr () est utilisé pour obtenir des attributs à partir des balises HTML, et bien qu'il soit parfaitement fonctionnel. .prop () a été ajouté plus tard pour être plus sémantique et fonctionne mieux avec des attributs sans valeur tels que 'coché' et 'sélectionné'.

Si vous utilisez une version ultérieure de JQuery, vous devez utiliser .prop () autant que possible.

7
Cyril Gupta