5 – attr , prop , filter

Prendendo la form della lezione precedente, vado ad aggiungere alla lista ordinata 2 salse in più , modificando il value di salsa in salsaPiccante. Infine ho aggiunto bottone per selezionare tutte le salse, per i golosoni.

<ol>
    <li>
        <input type="checkbox" value="peperoni" name="extra">
        pepperoni <a href="#"> dimmi di più</a>
    </li>
    <li>
        <input type="checkbox" value="salsaPiccante" name="extra">
        salsa piccante <a href="#"> dimmi di più</a>
    </li>
    <li>
        <input type="checkbox" value="patatine" name="extra">
        patatine fritte <a href="#"> dimmi di più</a>
    </li>
    <li>
        <input type="checkbox" value="salsaOlive" name="extra">
        salsa alle olive <a href="#"> dimmi di più</a>
    </li>
    <li>
        <input type="checkbox" value="salsaKetchup" name="extra">
        salsa kechup <a href="#"> dimmi di più</a>
    </li>
    <input type="button" onclick="tutteLeSalse()" value="Voglio tutte le salse!!"/>
</ol>

Jquery mette a disposizione  due metodi: attr() (attributi) e prop() (proprietà) per la modifica.

Seppur molto simili i due metodi e con risultato nella maggior parte dei casi identico, è bene conoscerne la differenza. Gli attributi definiscono le caratteristiche di un elemento html, alcuni rimangono fissi (pensare alla action di una form, non cambia punterà alla pagina php decisa dallo sviluppatore) alcuni cambiano (pensare al check di un checkbox che l’utente flagga, sicuramente cambia). Cambia però la proprietà ad esso assegnata, non il valore dell’attributo nel codice html. Per esempio assegniamo un id all’h3 del form :

<h3 id="titolo">

Questo h3 ha come attributo id = titolo . Quando il browser interpreta il codice html e crea il DOM, creerà WINDOW – DOCUMENT – FORM – H3 il quale avrà la proprietà = titolo. Ogni attributo, quando letto dal browser, si trasforma nel suo corrispondente del DOM detto proprietà. Mentre nell’html avremo l’attributo id, ispezionando la pagina dal browser, avremo la property id. L’attributo fal browser è immutabile la proprietà no. Infatti se aggiungiamo un name all’h3

<h3 id="titolo" name="test">

ora con jQuery vado a cambiare il name e lo stampo

$('#titolo').attr('name', 'nuovoValore');
alert($('#titolo').attr('name') );

Ho cambiato la proprietà del name non l’attributo infatti nell’html l’attributo è sempre

name="test"

Nonostante abbia usato attr() , dalla versione jQuery 1.6.1 in avanti, il processo dell’interprete, mi permette di cambiare in automatico la proprietà. Questa sottile differenza, seppur nella maggior parte dei casi non crea problemi, è maggiormente visibili quando ho a che fare con un risultato booleano tipo un checkbox:

<input id="check" checked="checked" type="checkbox" value="peperoni" name="extra">

Ho assegnato id = check e checked = checked, che equivale a true. Inoltre cambio la libreria jQuery con una versione precedente alla 1.6.1

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.9/jquery.min.js">
</script>

Ora vado ad agganciare l’id check con jQuery e cambio l’attributo in false

$('#check').attr('checked' , false);

Come si può notare il comando non funziona perché con una vecchia versione di jQuery l’attributo non veniva cambiato in proprietà, per cui avrei dovuto usare il metodo prop()

$('#check').prop('checked' , false);

Possono esserci ancora versioni non aggiornabili di jQuery, magari per politiche aziendali, di conseguenza è importante capirne la differenza tra atrr() e prop(), come indicato dalla documentazione ufficiale di jQuery, anche perché questo adeguamento automatico potrebbe in futuro non essere più supportato, specialmente con quelle proprietà che restituiscono un valore bool (autofocus, autoplay, checked, controls, defer, hidden….), quindi è consigliato usare prop(), mentre nelle altre è maggiormente corretto usare attr().

Un caso particolare di metodo è quello per l’attributo value che si concretizza con il metodo val() .

Tornando alla nostra funzione tutteLeSalse() selezioniamo i checkbox

$("input[type='checkbox']").prop('checked',true);

Seleziono i tag input di tipo checkbox e cambio la proprietà in checked. Un modo più abbreviato per selezionare i checkbox e ottenere la stessa cosa è il seguente:

$(':checkbox').prop('checked',true);

a questo punto però ho bisogno di selezionare col bottone tutti i checkbox che contengono salsa, per fare ciò userò un filtro con filter() :

$("input[type='checkbox']").filter("[value^='salsa']").prop('checked',true);

seleziona gli input di tipo checkbox e filtrami quelli dove il value incomincia con ( ^= ) salsa. E questa è con la forma abbreviata del selettore

$(':checkbox').filter("[value^='salsa']").prop('checked',true);

Il metodo filter() può essere usato in percussione più volte, ovvero posso applicare più filtri.