Dibandingkan dengan ATTR, Prop baru di 1.6.1. Keduanya dipahami dari makna Cina, dan merupakan metode untuk mendapatkan/mengatur atribut (atribut dan properti). Hanya saja menggunakan metode .attr () di jendela atau dokumen tidak dapat dijalankan secara normal sebelum jQuery 1.6 karena tidak mungkin ada atribut di jendela dan dokumen. Prop muncul.
Karena kami ingin mengetahui perbedaan di antara mereka, yang terbaik adalah melihat kode sumber mereka dan tidak takut dengan panjang kode. Mari kita lihat kalimat utama:
attr: function (elem, name, value, pass) {var ret, hooks, notxml, ntype = elem.nodetype; // Jangan Dapat/Tetapkan Atribut pada Teks, Komentar dan Atribut Node if (! Elem || ntype === 3 || ntype === 8 || ntype === 2) {return; } if (pass && jQuery.isfunction (jQuery.fn [name])) {return jQuery (elem) [name] (value); } // fallback ke prop ketika atribut tidak didukung jika (typeof elem.getAttribute === "tidak terdefinisi") {return jQuery.prop (elem, name, value); } notxml = ntype! == 1 || ! jQuery.isxmldoc (elem); // semua atribut adalah huruf kecil // ambil hook yang diperlukan jika seseorang didefinisikan jika (notxml) {name = name.tolowercase (); hooks = jQuery.attrhooks [name] || (rboolean.test (nama)? Boolhook: nodehook); } if (value! == tidak terdefinisi) {if (value === null) {jquery.removeattr (elem, name); kembali; } else if (hooks && "atur" di hooks && notxml && (ret = hooks.set (elem, value, name))! == tidak terdefinisi) {return return; } else {elem.setAttribute (name, value + ""); nilai pengembalian; }} lain jika (hooks && "dapatkan" di hooks && notxml && (ret = hooks.get (elem, name))! == null) {return ret; } else {ret = elem.getAttribute (name); // atribut yang tidak ada kembali nol, kami menormalkan ke rets ret === null? tidak terdefinisi: ret; }}Kode Metode Prop (JQuery Versi 1.8.3)
prop: function (elem, name, value) {var ret, hooks, notxml, ntype = elem.nodetype; // Jangan Dapat/Tetapkan Properti di Teks, Komentar dan Node Atribut if (! Elem || ntype === 3 || ntype === 8 || ntype === 2) {return; } notxml = ntype! == 1 || ! jQuery.isxmldoc (elem); if (notxml) {// perbaiki nama dan lampirkan name hooks = jQuery.propfix [name] || nama; hooks = jQuery.prophooks [name]; } if (value! == tidak terdefinisi) {if (hooks && "set" di hooks && (ret = hooks.set (elem, value, name))! == tidak terdefinisi) {return ret; } else {return (elem [name] = value); }} else {if (hooks && "get" in hooks && (ret = hooks.get (elem, name))! == null) {return ret; } else {return elem [name]; }}}Dalam metode ATHT, dua baris kode yang paling kritis, elem.setAttribute (nama, nilai + "") dan ret = elem.getAttribute (nama), jelas bahwa metode API API dan metode getAttribute yang dioperasikan oleh node elemen atribut.
Dalam metode prop, dua baris kode yang paling kritis, return (elem [name] = value) dan return elem [name], Anda dapat memahaminya sebagai document.geteLementById (el) [name] = value, yang merupakan properti yang dikonversi menjadi objek JS.
Karena kita memahami prinsipnya, mari kita lihat contoh:
<input type = "centang kotak" id = "test" abc = "111" />
$ (function () {el = $ ("#test"); console.log (el.attr ("style")); // console.log yang tidak terdefinisi (el.prop ("style")); // cssstyledeclaration objek console.log (document.geteLementById ("test"). style); // css cs;output el.attr ("style") tidak terdefinisi karena attr adalah nilai dari node atribut objek yang diperoleh. Jelas, tidak ada node atribut saat ini, sehingga output alami tidak terdefinisi.
el.prop ("style") menghasilkan objek csstyledeclaration. Untuk objek DOM, ia memiliki atribut objek gaya asli, sehingga objek gaya adalah output.
Adapun document.geteLementById ("test"). Gaya sama dengan yang di atas
Tampilan berikutnya:
el.attr ("abc", "111") console.log (el.attr ("ABC")); // 111 console.log (el.prop ("ABC")); //belum diartikanPertama, gunakan metode ATHT untuk menambahkan atribut node ABC ke objek ini, dengan nilai 111, Anda dapat melihat bahwa struktur HTML juga telah berubah.
output el.attr ("ABC") adalah 111, yang normal
output el.prop ("ABC") tidak ditentukan, karena ABC ada di simpul properti ini, sehingga tidak dapat diambil melalui prop.
el.prop ("ABC", "222"); console.log (el.attr ("ABC")); // 111 console.log (el.prop ("ABC")); // 222Kami kemudian mengatur atribut ABC untuk objek ini menggunakan metode prop, dengan nilai 222. Anda dapat melihat bahwa struktur HTML belum berubah. Hasil output tidak akan dijelaskan.
Di atas telah menjelaskan prinsipnya dengan jelas, dan Anda dapat memahami apa yang Anda gunakan sendiri.
Disebutkan bahwa ketika Anda menghadapi properti seperti diperiksa, dipilih, hanya dengan readyly dan dinonaktifkan, jelas lebih baik menggunakan metode prop, seperti berikut:
<input type = "centang kotak" id = "test" checked = "checked" />
console.log (el.attr ("checked")); // checked console.log (el.prop ("checked")); // true console.log (el.attr ("dinonaktifkan")); // console.log yang tidak ditentukan (el.prop ("dinonaktifkan")); //PALSUJelas, nilai Boolean membuat pemrosesan berikutnya lebih masuk akal daripada nilai string.
Ps. Jika Anda memiliki kebersihan kinerja JS, jelas kinerja prop lebih tinggi, karena ATTS perlu mengakses node atribut DOM, mengakses DOM adalah yang paling memakan waktu. Situasi ini berlaku untuk beberapa opsi dan skenario yang tidak dipilih.
Semua orang tahu bahwa beberapa browser hanya perlu menulis dinonaktifkan dan diperiksa, sementara yang lain perlu menulis dinonaktifkan = "dinonaktifkan", diperiksa = "diperiksa". Misalnya, saat menggunakan attr ("checked") untuk mendapatkan properti yang diperiksa dari kotak centang, Anda bisa mendapatkan nilainya saat Anda memilihnya. Nilainya "diperiksa" tetapi jika Anda tidak memilihnya, itu tidak ditentukan.
JQ menyediakan metode baru "prop" untuk mendapatkan properti ini, yaitu untuk menyelesaikan masalah ini. Di masa lalu, kami menggunakan ATTR untuk mendapatkan properti yang diperiksa dan dikembalikan "diperiksa" dan "", tetapi sekarang kami menggunakan metode prop untuk mendapatkan properti dan mengembalikan benar dan salah.
Jadi, kapan menggunakan attr () dan kapan menggunakan prop ()?
1. Tambahkan nama atribut. Atribut ini akan berlaku. Anda harus menggunakan prop ();
2. Ada dua properti yang memiliki Penggunaan Prop yang Benar dan Salah ();
3. Gunakan attr () untuk orang lain;
Setiap orang harus memperhatikan hal ini saat meningkatkan jQuery di proyek!
Berikut ini adalah saran resmi untuk penggunaan attr () dan prop ():
Berikut ini adalah saran resmi untuk penggunaan attr () dan prop ():