Rumah > Artikel > hujung hadapan web > Perbezaan antara atribut attr dan prop dalam JS dan pengenalan kepada contoh pemilihan keutamaan_Pengetahuan asas
Berbanding dengan attr, prop adalah baharu dalam 1.6.1 Kedua-duanya difahami daripada maksud Cina, dan kedua-duanya adalah kaedah mendapatkan/menetapkan atribut (atribut dan sifat). Walau bagaimanapun, kaedah .attr() yang digunakan dalam tetingkap atau dokumen tidak boleh berjalan dengan betul sebelum jQuery 1.6, kerana tidak boleh ada atribut dalam tetingkap atau dokumen. prop wujud.
Memandangkan kita ingin mengetahui perbezaan antara mereka, sebaiknya lihat kod sumber mereka. Jangan takut dengan panjang kod tersebut
attr: function( elem, name, value, pass ) { var ret, hooks, notxml, nType = elem.nodeType; // don't get/set attributes on text, comment and attribute nodes if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { return; } if ( pass && jQuery.isFunction( jQuery.fn[ name ] ) ) { return jQuery( elem )[ name ]( value ); } // Fallback to prop when attributes are not supported if ( typeof elem.getAttribute === "undefined" ) { return jQuery.prop( elem, name, value ); } notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); // All attributes are lowercase // Grab necessary hook if one is defined if ( notxml ) { name = name.toLowerCase(); hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook ); } if ( value !== undefined ) { if ( value === null ) { jQuery.removeAttr( elem, name ); return; } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) { return ret; } else { elem.setAttribute( name, value + "" ); return value; } } else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) { return ret; } else { ret = elem.getAttribute( name ); // Non-existent attributes return null, we normalize to undefined return ret === null ? undefined : ret; } }
prop: function( elem, name, value ) { var ret, hooks, notxml, nType = elem.nodeType; // don't get/set properties on text, comment and attribute nodes if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { return; } notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); if ( notxml ) { // Fix name and attach hooks name = jQuery.propFix[ name ] || name; hooks = jQuery.propHooks[ name ]; } if ( value !== undefined ) { if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) { 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 kaedah prop, dua baris kod yang paling kritikal ialah return (elem[ name ] = value ) dan return elem[ name ]. Anda boleh memahaminya seperti ini: document.getElementById(el)[name] = nilai, iaitu ditukar kepada JS A sifat objek.
<input type="checkbox" id="test" abc="111" />
$(function(){ el = $("#test"); console.log(el.attr("style")); //undefined console.log(el.prop("style")); //CSSStyleDeclaration对象 console.log(document.getElementById("test").style); //CSSStyleDeclaration对象 });
el.prop("style") mengeluarkan objek CSSStyleDeclaration Untuk objek DOM, ia mempunyai atribut objek gaya asli, jadi objek gaya
ialah output
Bagi document.getElementById("test").style adalah sama seperti di atas
el.attr("abc","111") console.log(el.attr("abc")); //111 console.log(el.prop("abc")); //undefined
Mula-mula, gunakan kaedah attr untuk menambah atribut nod abc pada objek ini, dengan nilai 111. Anda dapat melihat bahawa struktur html juga telah berubah
el.prop("abc") mengeluarkan tidak ditentukan, kerana abc berada dalam nod atribut ini, jadi ia tidak boleh diperoleh melalui prop
el.prop("abc", "222"); console.log(el.attr("abc")); //111 console.log(el.prop("abc")); //222
Prinsipnya telah dijelaskan dengan jelas di atas, anda boleh memutuskan sendiri bila hendak menggunakannya.
Sebutkan bahawa apabila anda ingin mendapatkan atau menetapkan sifat seperti ditandai, dipilih, baca sahaja dan dilumpuhkan, adalah lebih baik menggunakan kaedah prop, seperti berikut:
<input type="checkbox" id="test" checked="checked" />
console.log(el.attr("checked")); //checked console.log(el.prop("checked")); //true console.log(el.attr("disabled")); //undefined console.log(el.prop("disabled")); //false
Jelas sekali, nilai boolean menjadikan pemprosesan berikut lebih munasabah daripada nilai rentetan.
Semua orang tahu bahawa sesetengah penyemak imbas hanya perlu menulis dilumpuhkan dan ditandakan, manakala yang lain perlu menulis disabled = "disabled", checked="checked", seperti semasa menggunakan attr("checked") untuk mendapatkan atribut checked of checkbox Nilai boleh diperolehi apabila ia dipilih Nilai "disemak" tetapi nilai yang diperoleh apabila ia tidak dipilih tidak ditentukan.
jq menyediakan kaedah baharu "prop" untuk mendapatkan atribut ini untuk menyelesaikan masalah ini, pada masa lalu, apabila kami menggunakan attr untuk mendapatkan atribut yang diperiksa, kami kembali "disemak" dan "Sekarang, apabila kami menggunakan prop kaedah untuk mendapatkan atribut, kami seragam mengembalikan benar dan salah.
Jadi, bila hendak menggunakan attr() dan bila hendak menggunakan prop()?
1. Tambahkan nama atribut dan atribut akan berkuat kuasa Anda harus menggunakan prop();
2. Terdapat dua atribut, benar dan salah, menggunakan prop();
3. Untuk orang lain, gunakan attr();
Semua orang harus memberi perhatian kepada perkara ini apabila menaik taraf jquery dalam projek!
Berikut ialah syor rasmi untuk penggunaan attr() dan prop():