Sekarang ini bukan hanya pertanyaan Apa perbedaannya , saya telah melakukan beberapa tes (http://jsfiddle.net/ZC3Lf/) memodifikasi propdan attrdari <form action="/test/"></form>​ dengan output menjadi:

1) prop Uji Modifikasi
Prop: http://fiddle.jshell.net/test/1
Attr:http://fiddle.jshell.net/test/1

2) Attr Modification test
Prop: http://fiddle.jshell.net/test/1
Attr:/test/1

3) Attr lalu Prop Modification test
Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

4) Prop lalu Attr Modification test
Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

Sekarang saya bingung tentang beberapa hal, sejauh pengetahuan saya:
Prop: Nilai dalam keadaan saat ini setelah modifikasi melalui JavaScript
Attr: Nilai seperti yang didefinisikan dalam html saat pemuatan halaman.

Sekarang jika ini benar,

• Mengapa memodifikasi atribut proptampaknya membuat yang actionmemenuhi syarat, dan sebaliknya mengapa memodifikasi atribut tidak?
• Mengapa memodifikasi propin 1)mengubah atribut, yang satu itu tidak masuk akal bagi saya?
• Mengapa memodifikasi attrdalam 2)mengubah properti, apakah mereka dimaksudkan untuk dihubungkan seperti itu?

Kode Tes

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

Sayangnya tidak ada tautan Anda yang berfungsi :(

Namun beberapa wawasan, attradalah untuk semua atribut. propadalah untuk properti.

Dalam versi jQuery yang lebih lama (<1.6), kami baru saja attr. Untuk mendapatkan sifat DOM seperti nodeName, selectedIndexatau defaultValueAnda harus melakukan sesuatu seperti:

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

Itu menyebalkan, jadi propditambahkan:

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

Ini bagus, tapi sayangnya ini tidak kompatibel ke belakang, karena:

<input type="checkbox" checked>

tidak memiliki atribut checked, tetapi memiliki properti bernama checked.

Jadi, di build terakhir 1.6, attrlakukan juga propagar tidak ada yang rusak. Beberapa orang ingin ini menjadi terobosan baru, tetapi saya pikir keputusan yang tepat telah dibuat karena hal-hal tidak pecah di semua tempat!

Mengenai:

Prop: Nilai dalam keadaannya saat ini setelah modifikasi apa pun melalui JavaScript

Attr: Nilai seperti yang didefinisikan di html saat pemuatan halaman.

Ini tidak selalu benar, berkali-kali atribut benar-benar diubah, tetapi untuk properti seperti diperiksa, tidak ada atribut untuk diubah, jadi Anda perlu menggunakan prop.

Referensi:

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

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

Ada kasus yang jelas untuk melihat perbedaan antara .prop dan .attr

perhatikan HTML di bawah ini:

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

dan JS di bawah ini menggunakan 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);
});

menciptakan keluaran berikut:

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

Saya sudah mencoba ini

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

dan hasilnya seperti di bawah ini

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

ini mungkin menunjukkan bahwa actiondinormalisasi hanya jika dibaca dengan prop.

sejak jquery 1.6.1+ attr () mengembalikan / mengubah properti seperti sebelumnya 1.6. sehingga tes Anda tidak masuk akal.

Waspadai perubahan kecil pada nilai pengembalian.

misalnya

attr ('Check'): sebelum 1.6 true / false adalah returend, sejak 1.6.1. "Check" / undefined dikembalikan.

attr ('selected'): sebelum 1.6 true / false dikembalikan, karena 1.6.1 "selected" / undefined dikembalikan

gambaran rinci tentang topik ini dalam bahasa Jerman dapat ditemukan di sini:

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