Sekarang ini bukan hanya pertanyaan Apa perbedaannya , saya telah melakukan beberapa tes (http://jsfiddle.net/ZC3Lf/) memodifikasi prop
dan attr
dari <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
prop
tampaknya membuat yangaction
memenuhi syarat, dan sebaliknya mengapa memodifikasi atribut tidak? - Mengapa memodifikasi
prop
in1)
mengubah atribut, yang satu itu tidak masuk akal bagi saya? - Mengapa memodifikasi
attr
dalam2)
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 />');
sumber
Jawaban:
Sayangnya tidak ada tautan Anda yang berfungsi :(
Namun beberapa wawasan,
attr
adalah untuk semua atribut.prop
adalah untuk properti.Dalam versi jQuery yang lebih lama (<1.6), kami baru saja
attr
. Untuk mendapatkan sifat DOM sepertinodeName
,selectedIndex
ataudefaultValue
Anda harus melakukan sesuatu seperti:Itu menyebalkan, jadi
prop
ditambahkan:Ini bagus, tapi sayangnya ini tidak kompatibel ke belakang, karena:
tidak memiliki atribut
checked
, tetapi memiliki properti bernamachecked
.Jadi, di build terakhir 1.6,
attr
lakukan jugaprop
agar 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:
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
sumber
undefined
, dan attr () berfungsi dengan baik.Ada kasus yang jelas untuk melihat perbedaan antara .prop dan .attr
perhatikan HTML di bawah ini:
dan JS di bawah ini menggunakan jQuery:
menciptakan keluaran berikut:
sumber
Saya sudah mencoba ini
dan hasilnya seperti di bawah ini
ini mungkin menunjukkan bahwa
action
dinormalisasi hanya jika dibaca denganprop
.sumber
2)
akan dinormalisasi!/test/
akses keattr
, dan kemudian diatur/test/1
keattr
, yang merupakan attr elemen. Tidak ada prosedur yang memicu normalisasi.2)
atas adalahelement.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?property = 'action'; body = $('body'); element = $('form');
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/
sumber