Facciamo un passo indietro e, prima di addentrarci nel dettaglio di metodi e variabili, preferisco dedicare un articolo ai selettori, cuore di jQuery, cui solo all’inizio ho dedicato poche righe.
Come ampiamente sottolineato, il cuore di jQuery é l’oggetto $ cui occorre passare, come stringa, il selettore dell’elemento (o degli elementi) da ricercare nel documento.
Ecco che :
$(“.myClass”) indica tutti gli elementi con attributo class pari a “myClass”
Ma, come in un qualsiasi foglio di stile, potrete indicare anche più di un selettore per individuare più elementi :
$(“.myClass, #myId, ul#menu li”) indica tutti gli elementi con attributo class “myClass”, quelli con id pari a “myId” e anche tutti gli elementi lista del menu “menu”
Ma questo non esprime tutto il potenziale jQuery che, oltre al modo appena mostrato per utilizzare anche più selettori contemporaneamente, possiede filtri speciali per snellire il codice e darci una mano nel lavoro.
Selettori di Base
Si tratta, in sostanza, di quanto appena visto, cioè l’uso di selettori semplici sfruttando le combinazioni di tag, classi e id :
$(“a”) indica tutti i link nel documento
$(“a.external”) indica soltanto i link con classe “external”
$(“p”) indica tutti i paragrafi nel documento
$(“p.myClass”) indica soltanto gli elementi <p> il cui valore di classe sia “myClass”
Oppure combinandoli insieme :
$(“a.external”,”p.myClass”)
Selettori Gerarchici
Un’altra possibilità molto interessante e sicuramente sfruttabile sta nel fatto di poter usare selettori gerarchici, ovvero poter ricercare elementi solo dentro altri elementi e non nel totale del documento. Tra i selettori gerarchici vediamo i più utili.
Un selettore gerarchico generico é del tipo : $(“.myClass a”) che sta ad indicare tutti gli elementi-link all’interno dell’elemento con class pari a “myClass”.
Un selettore gerarchico del tipo padre > figlio, invece, é del tipo : $(“ul > li”) che indica solo gli elementi di tipo lista che discendono dal tag ul
Altro selettore interessante é precedente + seguente, dove sono indicati tutti gli elementi che precedono direttamente uno specifico elemento: $(“label + input”) che indica tutti i tag input preceduti da un tag label
Infine, esiste precedente ~ adiacente, che seleziona tutti gli elementi direttamente adiacenti ad un elemento : $(“#myId ~ p”);
Selezionare per Attributi
Prima di passare, ma lo vedremo nella prossima lezioncina, ai filtri per selettori, esiste un’altra modalità per utilizzare i selettori, ovvero selezionare per attributi.
Prendiamo come riferimento il tag a dedicato ai link e prendiamo, ad esempio, l’attributo target che tra i suoi possibili valori può avere _blank, _parent, _self e _top
Qualora volessimo agire solo sui link che si aprono in una finestra diversa dall’originale, il nostro selettore per jQuery sarà del tipo : $(“a[target='_blank']“)
oppure $(“a[target !='_blank']“) nel caso opposto.
Logicamente potremo agire su qualsiasi attributo del tag a (href, title ecc) o di qualsiasi altro tag (label, input ecc) e combinare anche varie selezioni per attributi in un’unica chiamata.
