Gestione delle classi, del contenuto e dei campi dei form

Gestire le classi

Uno dei problemi maggiori legati alla manipolazione degli attributi riguarda le classi ed in particolare la possibiltà di associarne più d'una ad un elemento con la conseguente necessità di poterle eliminare singolarmente senza toccare le altre. A questo problema rispondo alcuni metodi specifici jQuery:

• .hasClass(): metodo di controllo, ritorna true se l'elemento ha uan specifica classe
• .addClass(): aggiungi una classe agli elementi
• .removeClass(): rimuove una classe agli elementi
• .toggleClass(): aggiunge una classe se già non presente, altrimenti la toglie

Per tutti questi metodi è possibile indicare, oltre ad una singola classe, anche due o più classi separate da una spazio ("miaClasse1 miaClasse2"). Inoltre .toggleClass() permette anche di indicare un secondo parametro (true o false) per definire se aggiungere o togliere una classe:

$("#menu li").toggleClass("miaClasse",true); //aggiungi sempre la classe

Manipolare il contenuto

jQuery mette a disposizione due metodi specifici per manipolare il contenuto degli elementi. Anzitutto .text() permette di trovare o impostare il testo contenuto in un elemento, mentre .html() gestisce anche il codice HTML. Ecco un esempio che ne spiega le differenze:

<p>testo del <strong>paragrafo</strong></p>
  $("p").text(); // "testo del paragrafo"
$("p").html(); // "testo del <strong>paragrafo</strong>"

Ambedue i metodi restituiscono una stringa contenente il testo o l'HTML di tutti gli elementi nella collezione. Inoltre .text() può essere usato anche per estrarre il contenuto dai nodi di un file XML.

Come per .attr(), questi metodi possono anche essere utilizzati per impostare il testo o il contenuto html degli elementi nella collezione:

$("p").text("Nuovo testo");
$("p").html("Nuovo testo con <strong>HTML</strong>");

Gestione dei form

Un gruppo a sé state di metodi per gli attributi riguarda la gestione dei campi nei form. Come nei casi precedenti attraverso .val() sarete in grado di ottenere ed impostare i valore inseriti dall'utente, sia per quanto riguarda i campi di testo (text, password, textarea), sia per i campi select che per i campi radio e checkbox. In particolare i campi select con attributo multiple restituiranno un array di valori, mentre i gruppi di checkbox restituiranno solo il primo valore selezionato come si può vedere in questa pagina di esempio.

In modo analogo, per impostare i campi di un form basterà passare a .val() una stringa oppure un array di stringhe nel caso di valori multipli per radio checkbox e select (esempio).