jQuery 1.6 introduce il metodo prop() per gli elementi del set di jQuery. Questo metodo accetta come argomento il nome della proprietà da leggere (getter). Può anche essere usato per impostare una proprietà, nel qual caso può anche accettare un oggetto letterale contenente i nomi e i valori delle proprietà da impostare (setter). Vediamolo in dettaglio.
prop() come getter
Il metodo .prop() restituisce il valore della proprietà solo per il primo elemento nel set di jQuery. Restituisce undefined se il valore della proprietà non è stato impostato o se il set non ha elementi. Per ottenere il valore di ciascun elemento si può usare un ciclo .each() o il metodo .map().
La documentazione ufficiale di jQuery spiega il perchè dell'introduzione di questo metodo spiegando la differenza tra attributi e proprietà:
The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the
.attr()method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the.prop()method provides a way to explicitly retrieve property values, while.attr()retrieves attributes.
Ora quindi .prop() gestisce le proprietà e .attr() gli attributi. Per esempio, considerando il caso di una checkbox con l'attributo checked impostato avremo:
elem.checked |
true (Booleano) Cambia con lo stato della checkbox |
|---|---|
$(elem).prop("checked") |
true (Booleano) Cambia con lo stato della checkbox |
elem.getAttribute("checked") |
"checked" (Stringa) Stato iniziale della checkbox che non cambia |
$(elem).attr("checked")(1.6) |
"checked" (Stringa) Stato iniziale della checkbox che non cambia |
$(elem).attr("checked")(1.6.1+) |
"checked" (Stringa) Cambia con lo stato della checkbox |
$(elem).attr("checked")(prima della 1.6) |
true (Booleano) Modificato con lo stato della checkbox |
Secondo le specifiche dei form, l'attributo checked è un attributo booleano, il che significa che la proprietà corrispondente è true quando l'attributo è presente ed ha un valore. Il modo migliore per stabilire se una checkbox è selezionata basandosi sul valore della sua proprietà è uno dei seguenti:
if ( elem.checked )if ( $(elem).prop("checked") )if ( $(elem).is(":checked") )
La documentazione di jQuery precisa:
If using jQuery 1.6, the code
if ( $(elem).attr("checked") )will retrieve the actual content attribute, which does not change as the checkbox is checked and unchecked. It is meant only to store the default or initial value of the checked property. To maintain backwards compatability, the.attr()method in jQuery 1.6.1+ will retrieve and update the property for you so no code for boolean attributes is required to be changed to.prop(). Nevertheless, the preferred way to retrieve a checked value is with one of the options listed above.
Ossia il metodo consigliato per questo tipo di proprietà (checked) è .prop().
prop() come setter
Il metodo .prop() può anche essere usato per impostare una o più proprietà di un elemento. I modi sono i seguenti:
Singola proprietà
$('input').prop('checked', true);
Molteplici proprietà
$('input').prop({
disabled: false,
checked: true
});
Valore calcolato tramite funzione di callback
$("input[type='checkbox']").prop('checked', function( i, val ) {
return !val;
});
val, il valore della proprietà dell'elemento, viene in questo caso impostato sul valore booleano opposto.