jQuery attr vs prop?

Agora isso não é apenas outro Qual é a diferença pergunta , eu fiz alguns testes (http://jsfiddle.net/ZC3Lf/) modificando o prop e attr de com a saída sendo:

1) prop teste de modificação
Prop: http://fiddle.jshell.net/test/1
Attr: http://fiddle.jshell.net/test/1

2) teste de modificação Attr
Prop: http://fiddle.jshell.net/test/1
Attr: /test/1

3) Attr, em seguida, teste Prop Modification
Prop: http://fiddle.jshell.net/test/11
Attr: http://fiddle.jshell.net/test/11

4) Prop então teste de modificação de Attr
Prop: http://fiddle.jshell.net/test/11
Attr: http://fiddle.jshell.net/test/11

Agora estou confuso sobre algumas coisas, no que diz respeito ao meu conhecimento:
Prop: O valor em seu estado atual após quaisquer modificações via JavaScript
Attr: O valor como foi definido no html no carregamento da página.

Agora, se isso estiver correto,

  • Por que modificar o prop parece fazer a action totalmente qualificada e, por outro lado, por que modificar o atributo não?
  • Por que modificar o prop em 1) modifica o atributo, que não faz sentido para mim?
  • Por que modificar o attr 2) modifica a propriedade, eles devem estar ligados dessa maneira?

Código de teste

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('

Prop Modification test

'); element.prop(property, element.prop(property) + 1); body.append('Prop: '+element.prop(property)+'
'); body.append('Attr: '+element.attr(property)+'
'); //reset element.prop(property, original); element.attr(property, original); body.append('

Attr Modification test

'); element.attr(property, element.attr(property) + 1); body.append('Prop: '+element.prop(property)+'
'); body.append('Attr: '+element.attr(property)+'
'); //reset element.prop(property, original); element.attr(property, original); body.append('

Attr then Prop Modification test

'); element.attr(property, element.attr(property) + 1); element.prop(property, element.prop(property) + 1); body.append('Prop: '+element.prop(property)+'
'); body.append('Attr: '+element.attr(property)+'
'); //reset element.prop(property, original); element.attr(property, original); body.append('

Prop then Attr Modification test

'); element.prop(property, element.prop(property) + 1); element.attr(property, element.attr(property) + 1); body.append('Prop: '+element.prop(property)+'
'); body.append('Attr: '+element.attr(property)+'
');

Infelizmente nenhum dos seus links funciona 🙁

Alguns insights, porém, é para todos os atributos. prop é para propriedades.

Nas versões mais antigas do jQuery (<1.6), nós apenas tínhamos attr . Para obter propriedades do DOM, como nodeName , selectedIndex ou defaultValue você defaultValue fazer algo como:

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

Isso foi uma droga, então foi adicionado prop :

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

Isso foi ótimo, mas irritantemente isso não era compatível com versões anteriores, como:

  

não tem atributo de checked , mas tem uma propriedade chamada checked .

Então, na versão final de 1.6, attr também faz prop para que as coisas não quebrem. Algumas pessoas queriam que isso fosse um rompimento claro, mas acho que a decisão certa foi tomada, já que as coisas não aconteceram em todo o lugar!

A respeito de:

Prop: O valor em seu estado atual após quaisquer modificações via JavaScript

Attr: O valor como foi definido no html no carregamento da página.

Isso nem sempre é verdade, pois muitas vezes o atributo é realmente alterado, mas para propriedades como marcadas, não há um atributo para alterar, portanto, é necessário usar prop.

Referências:

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

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

Há um caso claro para ver as diferenças entre .prop e .attr

considere o HTML abaixo:

 
 

e o JS abaixo 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’) retornará document.form.action node => HTMLInputElement
$ (‘form’). attr (‘action’) retornará action attribute => #

Eu tentei isso

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

e sai como abaixo

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

isso pode indicar que a action é normalizada somente quando é lida com prop .

desde jquery 1.6.1 + attr () retorna / altera a propriedade como antes de 1.6. Portanto, seus testes não fazem muito sentido.

esteja ciente de pequenas alterações nos valores de retorno.

por exemplo

attr (‘checado’): antes de 1.6 true / false é returdido, desde 1.6.1. “Checked” / undefined é retornado.

attr (‘selected’): antes de 1.6 true / false é retornado, uma vez que 1.6.1 “selected” / undefined é retornado

Uma visão geral detalhada deste tópico em alemão pode ser encontrada aqui:

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