.propr() vs. .attr() le differenze tra i due metodi in jQuery

di Lorenzo Neri
0 commento 124 visualizzazioni

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!

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 😀

Potrebbero interessarti

Lascia un commento

Questo sito potrebbe fare uso di cookie e siccome l'UE mi obbliga a fartelo presente, eccoti il classico banner dove puoi decidere come gestirli. Accetta Leggi di più