jQuery

Le jQuery sono un insieme di librerie scritte in linguaggio JavaScript.

Queste consentono di scrivere codice più efficiente e conciso e di gestire con più facilità le animazioni di una pagina web, la gestione degli eventi, la modalità di invio 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 preferitte 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 pò 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 (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 # e.

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 notate che 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 metodogetElementById, 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

Indice tutorial jQuery

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in 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

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *