Ora, questo non è solo un altro Qual è la domanda differenza , ho fatto alcuni test (http://jsfiddle.net/ZC3Lf/) modificando la prope attrdel <form action="/test/"></form>​ con l'uscita di essere:

1) Test di modifica
dell'elica Prop: http://fiddle.jshell.net/test/1
Attr:http://fiddle.jshell.net/test/1

2) Test di modifica Attr
Prop: http://fiddle.jshell.net/test/1
Attr:/test/1

3) Attr quindi Test di modifica Prop
Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

4) Prop quindi Attr Test di modifica
Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

Ora sono confuso su un paio di cose, per quanto ne so:
Prop: il valore nel suo stato attuale dopo qualsiasi modifica tramite JavaScript
Attr: il valore come è stato definito nell'html al caricamento della pagina.

Ora se questo è corretto,

• Perché la modifica dell'attributo propsembra rendere actionpienamente qualificata e, al contrario, perché la modifica dell'attributo non lo fa?
• Perché la modifica di propin 1)modifica l'attributo, quello non ha senso per me?
• Perché la modifica di attrin 2)modifica la proprietà, devono essere collegati in quel modo?

Codice di prova

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

Sfortunatamente nessuno dei tuoi link funziona :(

Alcune intuizioni, tuttavia, attrriguardano tutti gli attributi.propè per le proprietà.

Nelle versioni precedenti di jQuery (<1.6), avevamo solo attr. Per arrivare alla proprietà DOM come ad esempio nodeName, selectedIndexo defaultValuesi doveva fare qualcosa di simile:

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

Ha fatto schifo, quindi è propstato aggiunto:

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

Era fantastico, ma fastidiosamente non era compatibile con le versioni precedenti, in quanto:

<input type="checkbox" checked>

non ha attributo di checked, ma ha una proprietà chiamatachecked .

Quindi, nella build finale di 1.6, attrfunziona ancheprop modo che le cose non si rompano. Alcune persone volevano che fosse una rottura netta, ma penso che sia stata presa la decisione giusta perché le cose non si sono rotte dappertutto!

Per quanto riguarda:

Prop: il valore nel suo stato corrente dopo qualsiasi modifica tramite JavaScript

Attr: il valore così come è stato definito nell'html al caricamento della pagina.

Questo non è sempre vero, poiché molte volte l'attributo viene effettivamente modificato, ma per proprietà come check, non c'è un attributo da modificare, quindi è necessario utilizzare prop.

Riferimenti:

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

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

C'è un chiaro caso per vedere differenze tra .prop e .attr

considera l'HTML di seguito:

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

e il JS di seguito utilizzando 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);
});

crea il seguente output:

$('form').prop('action') : [object HTMLInputElement]
$('form').attr('action') : #
document.form.action : [object HTMLInputElement]

L'ho provato

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

ed esce come di seguito

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

questo può indicare che actionè normalizzato solo quando viene letto con prop.

poiché jquery 1.6.1+ attr () restituisce / modifica la proprietà come prima della 1.6. quindi i tuoi test non hanno molto senso.

essere consapevoli di piccole modifiche nei valori di ritorno.

per esempio

attr ('verificato'): prima della 1.6 true / false viene rimandata, dalla 1.6.1. Viene restituito "verificato" / undefined.

attr ('selected'): prima di 1.6 viene restituito true / false, poiché 1.6.1 viene restituito "selected" / undefined

una panoramica dettagliata di questo argomento in tedesco può essere trovata qui:

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