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.
Le jQuery sono un insieme di librerie scritte in linguaggio JavaScript.
L’utilizzo della libreria consente di scrivere codice più efficiente e conciso e di gestire con più facilità ad esempio le animazioni di una pagina web, la gestione degli eventi, la modalità di invio dei dati attraverso un form, ecc…
Potete vedere la documentazione completa seguendo questo link: w3school.
Includere le librerie jQuery
E’ necessario includere le librerie jQuery all’interno di una pagina web per poterle utilizzare.
Si possono includere ad esempio scaricando le librerie e salvandole in una cartella ad esempio di nome js. Dopo si inserisce il collegamento al file con il tag di inclusione.
Per scaricarla si può andare su questo sito web: code.jquery.com.
Si può scegliere la versione minified o uncompressed. Chiaramente la versione uncompressed è di più facile lettura, ma la minified è ottimizzata per un caricamento molto più veloce.
Ovviamente, se volete fare modifiche, utilizzate la versione uncompressed, esistono poi dei tool online per minimizzare il codice creato.
Dunque scaricate la versione delle librerie jQuery che preferite e dopo inserite questo tag di inclusione.
In questo link ho inserito l’ultima versione minified disponibile ad oggi.
Queste librerie sono compatibili con tutti i browser, infatti solo le versioni più vecchie non le supportano.
Quale metodo preferire dei due? Sicuramente l’inclusione con l’URL in quanto se l’utente ha già visitato una pagina web (anche di un altro sito web) il browser l’ha memorizzata nella cache e quindi non deve eseguire nuovamente il download. E in ogni caso comunque il download sarebbe più veloce.
Utilizzo dei selettori
Cosa cambia con quanto abbiamo studiato con il JavaScript puro?
Cambiano un bel po’ di cose. Iniziamo da come vengono utilizzati i selettori.
Il selettore infatti viene utilizzato come argomento racchiuso tra virgolette o apici della funzione $ di jQuery.
Quindi si utilizza la funzione $ che è un’abbreviazione (cioè un alias) di jQuery.
Facciamo subito degli esempi di utilizzo delle jQuery
Il selettore di un id (ad esempio un id=”nome”) si utilizza in questo modo $(“#nome”).
Quindi ad esempio $(“#nome”) è equivalente a jQuery(“#nome”).
Mentre il selettore di un classe (ad esempio classe=”mail”) si utilizza indicando $(“.mail”). Notate che la differenza tra id e classe sta nei simboli cancelletto ( # ) e punto ( . ) .
Con $(“h1”) indichiamo il selettore di un tag, in questo caso tutti i tag h1 della pagina web.
Invece con $(“h1.titolo”) indichiamo il selettore di un tag con una determinata classe. In questo caso quindi non indichiamo tutti i tag h1, ma solo quelli che hanno la classe titolo.
Con $(“.button”) indichiamo ad esempio tutti gli elementi di tipo button.
Se vogliamo indicare i selettori di tutti i campi di input, utilizziamo $(“:input”). Mentre, se vogliamo restringere la selezione dei campi input, con ad esempio con l’attributo name uguale a cognome, posso indicare: $(“input[name=cognome]”).
Per un elenco completo potete visitare il sito del w3school .
Cosa manca rispetto al JavaScript puro?
Sicuramente se avete seguito i precedenti tutorial noterete che non abbiamo utilizzato il metodo getElementById.
Utilizzando questo metodo infatti avrei dovuto scrivere document.getElementById(‘nome’) anziché $(“#nome”).
Ecco dunque perché le jQuery come abbiamo detto sopra si definiscono più concise e più immediate da utilizzare nello sviluppo delle nostre applicazioni web.
Attenzione, se non avete seguito gli esempi precedenti utilizzando il metodo getElementById, non vi preoccupate perché vi permetterò di imparare ad utilizzare le jQuery anche senza conoscere questi argomenti. Però nei tutorial farò comunque dei riferimenti per permettere, a chi ha già utilizzato JavaScript puro, di fare dei paragoni.
Commenti recenti