Perbezaan antara atribut attr dan prop dalam JS dan pengenalan kepada contoh pemilihan keutamaan

Perbezaan antara atribut attr dan prop dalam JS dan pengenalan kepada contoh pemilihan keutamaan_Pengetahuan asas

WBOY

Lepaskan： 2016-05-16 16:42:51

asal

1335 orang telah melayarinya

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 ) &#63; 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 &#63; 
undefined : 
ret; 
} 
}

Salin selepas log masuk

kod kaedah prop (jQuery versi 1.8.3)

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 ]; 
} 
} 
}

Salin selepas log masuk

Dalam kaedah attr, dua baris kod yang paling kritikal ialah elem.setAttribute(nama, nilai "") dan ret = elem.getAttribute(nama) Jelas sekali bahawa operasi kaedah DOM API setAttribute dan getAttribute digunakan .

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.

Sekarang kita memahami prinsipnya, mari kita lihat contoh:

<input type="checkbox" id="test" abc="111" />

Salin selepas log masuk

$(function(){ 
el = $("#test"); 
console.log(el.attr("style")); //undefined 
console.log(el.prop("style")); //CSSStyleDeclaration对象 
console.log(document.getElementById("test").style); //CSSStyleDeclaration对象 
});

Salin selepas log masuk

el.attr("style") mengeluarkan tidak ditentukan, kerana attr ialah nilai nod atribut objek ini yang diperolehi. Jelas sekali tiada nod atribut sedemikian pada masa ini, jadi ia secara semula jadi mengeluarkan tidak ditentukan

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

Baca terus:

el.attr("abc","111") 
console.log(el.attr("abc")); //111 
console.log(el.prop("abc")); //undefined

Salin selepas log masuk

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

Hasil keluaran el.attr("abc") ialah 111, iaitu normal

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

Salin selepas log masuk

Kami kemudian menggunakan kaedah prop untuk menetapkan atribut abc untuk objek ini, dengan nilai 222. Anda dapat melihat bahawa struktur html tidak berubah. Keputusan output tidak dijelaskan.

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" />

Salin selepas log masuk

console.log(el.attr("checked")); //checked 
console.log(el.prop("checked")); //true 
console.log(el.attr("disabled")); //undefined 
console.log(el.prop("disabled")); //false

Salin selepas log masuk

Jelas sekali, nilai boolean menjadikan pemprosesan berikut lebih munasabah daripada nilai rentetan.

PS, jika anda taksub dengan prestasi JS, jelas prestasi prop adalah lebih tinggi, kerana attr perlu mengakses nod atribut DOM, dan mengakses DOM adalah yang paling memakan masa. Situasi ini terpakai kepada situasi semua-pilihan berbilang pilihan dan pilihan songsang.

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():