disabled - prop javascript

jQuery attr vs prop?

Question

Ahora bien, esta no es una pregunta más de What''s the difference , he realizado algunas pruebas (http://jsfiddle.net/ZC3Lf/) modificando prop y attr de <form action="/test/"></form>​ con el resultado siendo:

1) Prueba de modificación prop
Prop: http://fiddle.jshell.net/test/1
Attr: http://fiddle.jshell.net/test/1

2) prueba de modificación Attr
Prop: http://fiddle.jshell.net/test/1
Attr: /test/1

3) Prueba de modificación Attr y Prop.
Prop: http://fiddle.jshell.net/test/11
Attr: http://fiddle.jshell.net/test/11

4) Probar luego prueba de modificación de Attr
Prop: http://fiddle.jshell.net/test/11
Attr: http://fiddle.jshell.net/test/11

Ahora estoy confundido acerca de un par de cosas, según mi conocimiento:
Prop: El valor en su estado actual después de cualquier modificación a través de JavaScript
Attr El valor tal como se definió en html en la carga de la página.

Ahora si esto es correcto,

• ¿Por qué la modificación del prop parece hacer que la action totalmente calificada, y por el contrario, por qué no se modifica el atributo?
• ¿Por qué modificar el prop en 1) modifica el atributo, eso no tiene sentido para mí?
• ¿Por qué la modificación del attr en 2) 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 />'');

Answer 1

Desafortunadamente ninguno de sus enlaces funciona :(

Sin embargo, algunas ideas, attr es para todos los atributos. prop es para propiedades.

En versiones anteriores de jQuery (<1.6), acabamos de tener attr . Para llegar a las propiedades DOM como nodeName , selectedIndex o defaultValue tienes que hacer algo como:

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

Eso chupó, así que se agregó el prop :

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

Esto fue genial, pero molestamente esto no fue compatible con versiones anteriores, como:

<input type="checkbox" checked>

no tiene ningún atributo de checked , pero tiene una propiedad llamada checked .

Entonces, en la compilación final de 1.6, attr también hace prop para que las cosas no se rompan. Algunas personas querían que fuera un descanso limpio, pero creo que se tomó la decisión correcta ya que las cosas no se rompieron por todos lados.

Respecto a:

Prop: El valor en su estado actual después de cualquier modificación a través de JavaScript

Attr: El valor tal como se definió en el html en la carga de la página.

Esto no siempre es cierto, ya que muchas veces el atributo se cambia realmente, pero para propiedades como checked, no hay un atributo para cambiar, por lo que debe usar prop.

Referencias

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

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

Answer 2

Hay un caso claro para ver las diferencias entre .prop y .attr

considere el HTML a continuación:

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

y el JS debajo usando 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'') devolverá document.form.action node => HTMLInputElement
$ (''form''). attr (''action'') devolverá el atributo de acción => #

Answer 3

Lo he intentado

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

y produce como abajo

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

esto puede indicar que la action se normaliza solo cuando se lee con prop .

Answer 4

desde jquery 1.6.1+ attr () devuelve / cambia la propiedad como antes 1.6. por lo tanto, tus pruebas no tienen mucho sentido.

tenga en cuenta los cambios menores en los valores de retorno.

p.ej

attr (''verificado''): antes de 1.6 true / false es returend, desde 1.6.1. "Checked" / undefined se devuelve.

attr (''selected''): antes de devolver 1,6 verdadero / falso, desde que se devuelve 1.6.1 "selected" / undefined

una descripción detallada de este tema en alemán se puede encontrar aquí:

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