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.
<script src="js/jquery.min.js" type="text/javascript"></script>Oppure un altro metodo ancora più semplice è quello di includere direttamente il percorso:
<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>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.
E allora alla prossima lezione.
Alcuni link utili
Rimuovere attributi agli elementi del DOM con JavaScript
Creare attributi agli elementi
Creare elementi nel dom con javascript
Come creare una galleria di immagini con javascript
Utilizzare gli array in javascript
Come creare una calcolatrice con javascript
Validare un form con javascript
Saper utilizzare il metodo getElementById
Alcuni esempi con javascript alert