web-dev-qa-db-fra.com

jQuery attr vs prop?

Maintenant ce n’est pas juste un autre Quelle est la question de différence, j’ai fait quelques tests (http://jsfiddle.net/ZC3Lf/) en modifiant le prop et attr de <form action="/test/"></form>​ avec la sortie étant:

1) test de modification de prop
Prop: http://fiddle.jshell.net/test/1
Attr: http://fiddle.jshell.net/test/1

2) Test de modification Attr
Prop: http://fiddle.jshell.net/test/1
Attr: /test/1

3) Attr, puis test de modification de prop
Prop: http://fiddle.jshell.net/test/11
Attr: http://fiddle.jshell.net/test/11

4) Test puis modification du test de modification
Prop: http://fiddle.jshell.net/test/11
Attr: http://fiddle.jshell.net/test/11

Maintenant, je suis confus sur deux choses, autant que je sache:
Prop: La valeur dans son état actuel après toute modification via JavaScript
Attr: La valeur telle qu'elle a été définie dans le code HTML lors du chargement de la page.

Maintenant, si cela est correct,

  • Pourquoi la modification de prop semble-t-elle conférer à la action une qualification complète, et inversement, pourquoi ne pas modifier l'attribut?
  • Pourquoi modifier prop dans 1) modifier l'attribut, ça n'a aucun sens pour moi?
  • Pourquoi modifier attr dans 2) modifier la propriété, sont-ils censés être liés de cette façon?

Code de test

[~ # ~] html [~ # ~]

JavaScript 

var element = $('form');
var property = 'action';

/*You should not need to modify below this line */

var body = $('body');
var original = element.attr(property);

body.append('<h1>Prop Modification test</h1>');
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr Modification test</h1>');
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr then Prop Modification test</h1>');
element.attr(property, element.attr(property) + 1);
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Prop then Attr Modification test</h1>');
element.prop(property, element.prop(property) + 1);
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');
javascriptjqueryattrprop
100
Hailwood

Malheureusement, aucun de vos liens ne fonctionne :(

Un peu de perspicacité cependant, attr concerne tous les attributs. prop est pour les propriétés.

Dans les anciennes versions de jQuery (<1.6), nous avions juste attr. Pour obtenir des propriétés DOM telles que nodeName, selectedIndex ou defaultValue, vous deviez faire quelque chose comme:

var elem = $("#foo")[0];
if ( elem ) {
  index = elem.selectedIndex;
}

C'est nul, donc prop a été ajouté:

index = $("#foo").prop("selectedIndex");

C'était génial, mais ennuyeusement, cela n'était pas compatible avec les versions antérieures, comme:

<input type="checkbox" checked>

n'a pas d'attribut checked, mais il possède une propriété appelée checked.

Ainsi, dans la version finale de 1.6, attr fait également prop afin que les choses ne se cassent pas. Certaines personnes voulaient que ce soit une pause nette, mais je pense que la bonne décision a été prise car les choses ne se sont pas cassées!

En ce qui concerne:

Prop: la valeur dans son état actuel après toute modification via JavaScript

Attr: La valeur telle qu'elle a été définie dans le code HTML lors du chargement de la page.

Ce n'est pas toujours vrai, car plusieurs fois l'attribut est réellement modifié, mais pour les propriétés telles que coché, il n'y a pas d'attribut à modifier, vous devez donc utiliser prop.

Les références:

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

http://ejohn.org/blog/jquery-16-and-attr

70
Rich Bradshaw

Il y a un cas clair pour voir les différences entre .prop et .attr

considérez le code HTML ci-dessous:

<form name="form" action="#">
    <input type="text" name="action" value="myvalue" />
    <input type="submit" />
</form>
<pre id="return">
</pre>

et le JS ci-dessous en utilisant jQuery:

$(document).ready(function(){
    $("#return").append("$('form').prop('action') : " + $('form').prop('action') + '\r\n');
    $("#return").append("$('form').attr('action') : " + $('form').attr('action') + '\r\n');
    $("#return").append("document.form.action : " + document.form.action);
});

crée la sortie suivante:

$('form').prop('action') : [object HTMLInputElement]
$('form').attr('action') : #
document.form.action : [object HTMLInputElement]
3
SmasherHell

depuis jquery 1.6.1+ attr () renvoie/modifie la propriété comme avant 1.6. Par conséquent, vos tests n’ont pas beaucoup de sens.

être conscient des changements mineurs dans les valeurs de retour.

par exemple.

attr (‘vérifié’): avant 1,6 vrai/faux est retourné, depuis 1.6.1. "Vérifié"/non défini est renvoyé.

attr ('selected'): avant que 1,6 vrai/faux soit renvoyé, puisque 1.6.1 “sélectionné”/non défini est renvoyé

un aperçu détaillé de ce sujet en allemand peut être trouvé ici:

http://mabraham.de/jquery-prop-attr-val-richtig-verwenden/

1
Martin Abraham

J'ai essayé ça

console.log(element.prop(property));
console.log(element.attr(property));

et il sort comme ci-dessous

http://fiddle.jshell.net/test/
/test/

cela peut indiquer que le action n'est normalisé que lorsqu'il est l avec prop.

1
Haocheng