jQuery attr vs prop?

102

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 />');
Hailwood
sumber
3
Kemungkinan duplikat stackoverflow.com/questions/5874652/prop-vs-attr
selamat tinggal

Jawaban:

71

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

Bradshaw kaya
sumber
Tautan untuk menguji ada pada "melakukan beberapa tes" di atas saya akan membuatnya lebih terlihat, tetapi ini dia: jsfiddle.net/ZC3Lf
Hailwood
Saya menemukan pertanyaan, jika atributnya disesuaikan, bukan properti DOM, prop () return undefined, dan attr () berfungsi dengan baik.
hiway
3

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]
SmasherHell
sumber
1

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.

Haocheng
sumber
Saya rasa tidak, karena jika tidak, output 2)akan dinormalisasi!
Hailwood
@Hailwood Itu tidak akan, karena Anda mendapat /test/akses ke attr, dan kemudian diatur /test/1ke attr, yang merupakan attr elemen. Tidak ada prosedur yang memicu normalisasi.
Haocheng
Saya bingung apa yang Anda maksud, tes di 2)atas adalah element.attr(property, element.attr(property) + 1); body.append('Prop: '+element.prop(property)+'<br />'); body.append('Attr: '+element.attr(property)+'<hr />'); Jika dinormalisasi ketika dibaca, apakah baris terakhir di sana tidak menampilkan versi yang dinormalisasi?
Hailwood
Variabel:property = 'action'; body = $('body'); element = $('form');
Hailwood
Normalisasi hanya akan terpicu ketika prop diakses, dan akses attr tidak.
Haocheng
1

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/

Martin Abraham
sumber