Maintenant, ce n'est pas juste une autre question Quelle est la 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 l'hélice
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 Prop Modification test
Prop:http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11
4) Prop puis Attr Modification test
Prop:http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11
Maintenant, je suis confus sur deux ou trois choses, pour 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 html au chargement de la page.
Maintenant, si c'est correct,
- Pourquoi modifier le
prop
semble - t-il rendre leaction
pleinement qualifié, et inversement pourquoi ne pas modifier l'attribut? - Pourquoi modifier le
prop
in1)
modifie-t-il l'attribut, celui-là n'a aucun sens pour moi? - Pourquoi modifier le
attr
in2)
modifie-t-il 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 />');
la source
Réponses:
Malheureusement, aucun de vos liens ne fonctionne :(
Cependant, certaines informations
attr
concernent tous les attributs.prop
est pour les propriétés.Dans les anciennes versions de jQuery (<1.6), nous venons d'avoir
attr
. Pour obtenir des propriétés DOM telles quenodeName
,selectedIndex
oudefaultValue
il fallait faire quelque chose comme:Cela a sucé, a donc
prop
été ajouté:C'était génial, mais malheureusement ce n'était pas rétrocompatible, car:
n'a pas d'attribut de
checked
, mais il a une propriété appeléechecked
.Donc, dans la version finale de la 1.6,
attr
faites aussiprop
pour 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 partout!En ce qui concerne:
Ce n'est pas toujours vrai, car l'attribut est souvent modifié, mais pour les propriétés telles que cochées, il n'y a pas d'attribut à modifier, vous devez donc utiliser prop.
Références:
http://blog.jquery.com/2011/05/03/jquery-16-released/
http://ejohn.org/blog/jquery-16-and-attr
la source
undefined
et attr () fonctionne bien.Il y a un cas clair pour voir les différences entre .prop et .attr
considérez le HTML ci-dessous:
et le JS ci-dessous en utilisant jQuery:
crée la sortie suivante:
la source
J'ai essayé ça
et il sort comme ci-dessous
cela peut indiquer que le
action
n'est normalisé que lorsqu'il est lu avecprop
.la source
2)
serait normalisée!/test/
accès àattr
, puis défini/test/1
surattr
, qui est l'attr de l'élément. Il n'y a aucune procédure qui déclenche la normalisation.2)
ci-dessus estelement.attr(property, element.attr(property) + 1); body.append('Prop: '+element.prop(property)+'<br />'); body.append('Attr: '+element.attr(property)+'<hr />');
Si c'était normalisé lors de la lecture, la dernière ligne ne produirait-elle pas la version normalisée?property = 'action'; body = $('body'); element = $('form');
puisque jquery 1.6.1+ attr () retourne / change la propriété comme avant 1.6. ainsi vos tests n'ont pas beaucoup de sens.
soyez 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 1.6 true / false est retourné, puisque 1.6.1 “selected” / undefined est retourné
un aperçu détaillé de ce sujet en allemand peut être trouvé ici:
http://mabraham.de/jquery-prop-attr-val-richtig-verwenden/
la source