Corsi on-line

Selettori in jQuery, sveliamo il mistero

Spesso, quando mi viene chiesto qualche chiarimento su jQuery, noto che il concetto di “selettore” non è sempre pienamente compreso; vediamo quindi approfondire l’argomento; diciamo subito che un selettore è un elemento che ci permette di recuperare un valore selezionato, per esempio, attroverso un form.

Vediamo un semplice esempio e cominciamo con il mostrare un semplice menù di selezione:

<select id="lettere" >
    <option value="1">a</option>
    <option value="2">b</option>
    <option value="3">c</option>
</select>

Osservate con attenzione la presenza di un id (“lettere”), esso è indispensabile in quanto permette al selettore di raccogliere l’input corretto; passiamo ora al selettore:

var catturaLettera = $("#lettere option:selected").val();
alert(catturaLettera);

Il selettore, omonimo all’id della select, è composto in questo caso nel modo seguente:

  • il cancelletto (#): esso  indica che andrà selezionato un elemento che abbia come id “lettere”;
  • gli elementi  “#lettere” e “option” separati da uno spazio: indicano che si desidera recuperare tutti i tag derivati (“figli”) dell’elemento “#lettere”;
  • :selected:  (pseudo classe) definisce l’option da intercettare, in questo caso quella selezionata tramite il menù;
  • val(): metodo jQuery che restituisce il valore selezionato.

Seguendo questa semplici regole sintattiche, sarà possibile realizzare qualsiasi tipo di selettore.

Post correlati
I più letti del mese
Tematiche