In questo breve tutorial parleremo di jQuery selectors, ovvero dei selettori nelle jQuery.
Abbiamo già visto nella lezione precedente come si utilizzano i selettori, ma non abbiamo citato i tre selettori particolari:
$(document) è il selettore che indica l’intero documento HTML.
$(this) è il selettore che indica l’elemento HTML corrente.
$(“*”) è il selettore che indica tutti gli elementi di una pagina HTML. Infatti * sta ad indicare all.
Altri jQuery selectors
Citiamo altri selettori che solitamente vengono utilizzati più spesso.
$(“p:first”) è utile perché in una pagina web ci possono essere tanti elementi con il tag p. Allora, se ad esempio volessimo selezionare il primo paragrafo, dovremmo indicare il termine first separato tal tag p dai due punti ( : ).
Chiaramente questo è possibile anche con tantissimi altri tag, proviamo ad esempio con gli elenchi puntati e numerati.
Quindi con $(“ul li:first”) indichiamo la prima voce dell’elenco puntato.
Allo stesso modo si può utilizzare last per indicare l’ultimo elemento dell’elenco puntato.
Invece, ad esempio $(“ul li:first-child”) indica la prima voce di tutti gli elementi li. Quindi se ho più liste posso selezionare tutti i primi elementi di ciascun elenco.
Così come first-child indica il primo elemento, allo stesso modo last-child indica l’ultimo elemento.
Continuiamo ancora a parlare di jQuery selectors.
Se vogliamo selezionare tutti i tag h1, h2,…,h6 possiamo utilizzare $(“:header”).
Ma se dalla selezione volessimo escludere ad esempio tutti i tag h2 allora dovremmo indicare $(“:header:not(h2)”).
Se ancora, ad esempio, volessimo selezionare tutti i tag div che all’interno hanno dei paragrafi dovremmo utilizzare $(“div:has(p)”).
Insomma ci sono tantissimi selettori, se volete potete consultare un elenco delle jQuery selectors al seguente link: w3school.
Non vi preoccupare, queste due lezioni sono state un pò teoriche, ma già dalla prossima vedremo tanti esempi pratici, per cui sarà molto semplice utilizzare le jQuery selectors.
