jQuery attr vs prop?

Question

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

1) prop Modification d'essai
Prop: http://fiddle.jshell.net/test/1
Attr: http://fiddle.jshell.net/test/1

2) Attr Modification d'essai
Prop: http://fiddle.jshell.net/test/1
Attr: /test/1

3) Attr puis Prop Modification d'essai
Prop: http://fiddle.jshell.net/test/11
Attr: http://fiddle.jshell.net/test/11

4) Prop puis Attr Modification d'essai
Prop: http://fiddle.jshell.net/test/11
Attr: http://fiddle.jshell.net/test/11

Maintenant, je suis confus au sujet d'un couple de choses, aussi loin que mes connaissances se passe:
Prop: La valeur dans son état actuel après toute modification via JavaScript
Attr La valeur telle qu'elle est définie dans le code html de chargement de page.

Maintenant, si cela est correct,

• Pourquoi ne modifiant l' prop semblent faire l' action pleinement qualifié, et à l'inverse pourquoi la modification de l'attribut non?
• Pourquoi ne modifiant l' prop en 1) modifier l'attribut, que l'on n'a pas de sens pour moi?
• Pourquoi ne modifiant l' attr en 2) modifier la propriété, sont-ils destinés à être lié de cette manière?

---

Le 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 />');

Answer 1

Malheureusement, aucun de vos liens de travail :(

Un aperçu cependant, l'attribut est pour tous les attributs. Prop est pour les propriétés.

Dans les anciennes jQuerys (<1.6), nous avons juste eu attr. Pour arriver à DOM des propriétés telles que nodeName, selectedIndex, ou defaultValue vous avez dû faire quelque chose comme:

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

Qui a sucé, donc nous avons eu prop:

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

C'était génial, mais fâcheusement ce n'était pas compatible, comme

<input type="checkbox" checked>

n'a pas d'attribut de l' checked, mais il a une propriété appelée " est cochée.

Ainsi, dans la dernière version de 1.6, attr ne font prop , de sorte que les choses ne se sont pas cassé. Certaines personnes veulent une rupture nette, mais je pense que la bonne décision a été prise car les choses ne se sont pas cassé de partout!

Sujet:

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

Attr: La valeur telle qu'elle est définie dans le code html de chargement de page.

Ce n'est pas toujours vrai, comme beaucoup de fois l'attribut est effectivement changé, mais pour les propriétés telles que vérifié, il n'y a pas un attribut à modifier, si vous avez besoin d'utiliser la prop.

Références:

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

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

Answer 2

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);
});
 

$ ('form'). prop ('action') retournera document.form.action node => HTMLInputElement
$ ('form'). attr ('action') retournera l'attribut d'action => #

Answer 3

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 action n'est normalisé que s'il est lu avec prop .

Answer 4

depuis jquery 1.6.1+ attr() renvoie les changements de propriété comme avant 1.6. ainsi, vos tests n'ont pas beaucoup de sens.

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

par exemple

attr(‘checked'): avant de 1.6 vrai/faux est returend, depuis 1.6.1. "checked"/undefined est retourné.

attr(‘selected'): avant de 1.6 true/false est retourné, depuis 1.6.1 "sélectionné"/undefined est retourné

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

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