Ahora bien, esta no es solo otra pregunta ¿Cuál es la diferencia? He hecho algunas pruebas (http://jsfiddle.net/ZC3Lf/) modificando el prop
y attr
de <form action="/test/"></form>
con el resultado:
1)
Prop Prueba de modificación Prop:http://fiddle.jshell.net/test/1
Attr:http://fiddle.jshell.net/test/1
2) Prueba de modificación de atributos
Prop:http://fiddle.jshell.net/test/1
Attr:/test/1
3) Atributo, luego prueba de modificación de la propuesta
Prop:http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11
4) Prop y luego Attr Modificación de prueba
Prop:http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11
Ahora estoy confundido acerca de un par de cosas, en lo que respecta a mi conocimiento:
Prop: el valor en su estado actual después de cualquier modificación a través de JavaScript
Attr: el valor como se definió en el html al cargar la página.
Ahora si esto es correcto,
- ¿Por qué modificar el
prop
parece haceraction
que el atributo esté completamente calificado y, a la inversa, por qué no modifica el atributo? - ¿Por qué modificar el
prop
en1)
modifica el atributo, ese no tiene sentido para mí? - ¿Por qué la modificación de
attr
en2)
modifica la propiedad, están destinados a estar vinculados de esa manera?
Código de prueba
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 />');