Dalla versione 1.6 di jQuery è stata aggiunta la funzione “prop()” e in questo articolo scopriamo assieme che differenze ci sono con la funzione “attr()”.
Di jQuery ne abbiamo parlato veramente tante volte e di quanto sia fantastico da usare.
Se non lo sapessi, dalla versione 1.6 oltre alla funzione “attr()” è stata aggiunta la funzione “prop()”.
Per farti un esempio, se volessi sapere come è composto l’attributo style di un elemento HTML dovresti fare così:
var stile= $('#IDElemento').attr('style');
//Oppure
$('#IDElemento').prop('style');
Ovviamente uno si potrebbe chiedere: che differenze ci sono tra questi due metodi in jQuery?
Sembra che facciano la stessa cosa!
Ciao mi chiamo Lorenzo Neri e sono un informatico: realizzo contenuti per aiutare le persone a padroneggiare l’arte del nuovo millennio, ovvero l’informatica!
Stando a quello che sono le direttive del team di jQuery, parrebbe che abbiano “ritirato” la funzione “attr()”, ma le cose non stanno del tutto così e di fatto ti invito ad approfondire la lettura qui se fossi curioso.
Andiamo oltre.
In linea generale, stando a quello che ho scritto prima, è preferibile usare “prop()” anzichè “attr()”. Se tu sostituissi tutte le chiamate “attr()” con “prop()” non vedresti cambiamenti: di fatto tutto funzionerebbe come ha sempre funzionanto. A meno che tu non debba risolvere qualche bug 😀
Come funzionano le proprietà
In linea generale con questa novità in jQuery, le proprietà vengono gestite in modo molto più semplice.
Per intenderci, “checked” viene sempre gestito come booleano, ma l’attributo “style” viene gestito come un vero e proprio oggetto JavaScript, cosa che con “attr” avveniva con le stringhe e c’è poco controllo quando si deve debuggare.
Specie se fai degli errori di scrittura stile “hidnen” anzichè “hidden”.
Facciamo degli esempi per capire davvero le differenze tra i due metodi in jQuery.
Abbiamo due checkbox con i seguenti valori:
<input id="contr" type="checkbox" checked>
<input id="contr" type="checkbox" checked="checked">
E ci chiediamo: come possiamo verificare con jQuery se la checkbox è in stato “checked” quindi effettivamente cliccata?
Queste sono le varie strade con il metodo “attr()”:
if ($('#contr').attr("checked") === true){
//checked
}
if ($('#contr').attr("checked") == "checked"){
//checked
}
if ($('#contr').is(":checked")){
//checked
}
Capisci anche tu che quando scrivi le stringhe potresti fare diversi errori di scrittura.
Tra l’altro questo sistema eredita quello di JavaScript vanilla del 1995:
if (document.getElementById('contr').checked){
//checked
}
Ma ora, vediamo come fare tutto questo con il metodo “prop()”:
$('#contr').prop("checked",false);
Di concreto, dobbiamo ancora scrivere sotto forma di stringa la parola “checked”, ma se viene scritta sbagliata viene generato un errore a console e tu te ne accorgi!
.propr() vs. .attr() le differenze tra i due metodi in jQuery: conclusioni
In base a come ti trovi più comodo per abitudine, puoi usare quello che vuoi, ma come abbiamo visto fino ad ora, è meglio usare quello più recente 😀
