Impara da zero la libreria che ha reso facile JavaScript: selettori, eventi, effetti, manipolazione del DOM e AJAX. Con editor live per provare ogni esempio sul momento.
Cos'è jQuery
jQuery è una libreria JavaScript velocissima e leggera che semplifica enormemente la manipolazione delle pagine HTML, la gestione degli eventi, le animazioni e le chiamate AJAX. Il suo motto è: "scrivi meno, fai di più".
Perché imparare jQuery
✍️ Conciso: una riga di jQuery sostituisce molte righe di JavaScript puro
🌍 Compatibile: nasconde le differenze tra i browser
🎬 Animazioni facili: effetti di fade, slide e animate pronti all'uso
📚 Diffusissimo: ancora presente in moltissimi siti e temi (es. WordPress)
Il primo effetto jQuery
📘 Premi ▶ Provalo tu: l'editor è già collegato a jQuery, quindi vedi subito il risultato e puoi modificarlo dal vivo. Conoscere le basi di JavaScript aiuta molto.
Introduzione a jQuery
jQuery è stato creato nel 2006 per risolvere un problema reale: scrivere JavaScript che funzionasse in modo identico su tutti i browser era complicato. jQuery offre una sintassi unica e semplice che funziona ovunque.
Cosa puoi fare con jQuery
Selezionare e manipolare elementi HTML
Cambiare CSS e contenuti al volo
Gestire eventi (click, hover, tastiera...)
Creare animazioni ed effetti
Caricare dati dal server con AJAX
💡 Oggi i framework moderni come React hanno preso il posto di jQuery nei progetti nuovi, ma jQuery resta utile e diffusissimo: saperlo leggere e usare è ancora una competenza preziosa.
Iniziare con jQuery
Per usare jQuery basta includere la libreria dal CDN. Si mette nell'<head> o appena prima di </body>.
Il codice jQuery va eseguito quando la pagina è pronta. Si usa $(document).ready() oppure la sua forma breve $(function(){ ... }).
Document ready
📘 Nell'editor il CDN di jQuery è già incluso: scrivi solo il contenuto della pagina e il tuo script.
La sintassi di jQuery
La sintassi base di jQuery è: $(selettore).azione()
$ — indica jQuery
selettore — trova gli elementi HTML (come in CSS)
azione() — cosa fare su quegli elementi
La formula $(selettore).azione()
I selettori
I selettori servono a "trovare" gli elementi HTML da manipolare. Usano la stessa sintassi del CSS: per tag, per #id e per .classe.
Selezionare in vari modi
📘 Selettori utili: $("*") tutti gli elementi, $("p:first") il primo paragrafo, $("li:even") gli elementi pari di una lista.
Gli eventi
Gli eventi sono le azioni dell'utente: click, passaggio del mouse, pressione di un tasto. jQuery permette di reagire a ciascuno con un metodo dedicato.
Metodo
Reagisce a
click()
Clic del mouse
dblclick()
Doppio clic
hover()
Mouse sopra/fuori
keypress()
Tasto premuto
Reagire a click e hover
Nascondere e mostrare
I metodi hide(), show() e toggle() nascondono e mostrano gli elementi. Accettano una durata in millisecondi per animare la transizione.
hide, show e toggle
Le dissolvenze (fade)
Gli effetti fade fanno apparire e scomparire gli elementi con una dissolvenza: fadeIn(), fadeOut(), fadeToggle() e fadeTo().
fadeIn, fadeOut, fadeToggle
Gli scorrimenti (slide)
Gli effetti slide mostrano/nascondono un elemento facendolo scorrere: slideDown(), slideUp() e slideToggle().
slideToggle: un pannello a fisarmonica
Le animazioni (animate)
Il metodo animate() crea animazioni personalizzate modificando gradualmente le proprietà CSS numeriche.
Muovere e ridimensionare un box
📘 animate() funziona solo con proprietà numeriche (left, width, opacity...). Per le animazioni l'elemento di solito deve avere position: relative o absolute.
Fermare le animazioni
Il metodo stop() interrompe un'animazione in corso prima che finisca: utile, ad esempio, per i menu a scomparsa quando l'utente clicca rapidamente.
Fermare uno slide a metà
Le funzioni callback
Una callback è una funzione eseguita quando l'animazione è finita. Serve per evitare che le azioni successive partano troppo presto.
Eseguire codice a fine animazione
Il concatenamento (chaining)
Il chaining permette di concatenare più azioni sullo stesso elemento in un'unica riga: jQuery le esegue una dopo l'altra.
Più effetti in catena
💡 Il chaining rende il codice più compatto e leggibile, ed è più efficiente perché jQuery cerca l'elemento una sola volta.
Leggere contenuti (get)
jQuery legge i contenuti con text() (solo testo), html() (con i tag) e val() (valore dei campi di form).
text(), html() e val()
Impostare contenuti (set)
Gli stessi metodi text(), html() e val(), se ricevono un argomento, impostano il contenuto invece di leggerlo.
Modificare testo, html e valore
Aggiungere elementi
Per aggiungere nuovi elementi: append() (alla fine), prepend() (all'inizio), after() e before() (fuori dall'elemento).
append e prepend
Rimuovere elementi
remove() elimina l'elemento (e tutto il suo contenuto); empty() svuota l'elemento ma lo lascia.
remove() ed empty()
Le classi CSS
jQuery gestisce le classi con addClass(), removeClass() e toggleClass(): il modo migliore per cambiare aspetto a un elemento.
Aggiungere e togliere una classe
Il metodo css()
Il metodo css() legge e imposta direttamente le proprietà CSS di un elemento.
Leggere e impostare il CSS
Le dimensioni
jQuery legge e imposta le dimensioni con width(), height(), innerWidth() (con il padding) e outerWidth() (con bordo).
Misurare un elemento
Navigare nel DOM
Il traversing ("attraversamento") significa muoversi nell'albero degli elementi HTML partendo da un elemento per raggiungerne altri: genitori, figli, fratelli.
📘 L'HTML è un albero: ogni elemento ha un genitore (parent), eventuali figli (children) e fratelli (siblings). jQuery offre metodi per spostarsi in ogni direzione.
Trovare il genitore
Gli antenati (ancestors)
Gli antenati sono gli elementi "sopra": parent() (il genitore diretto), parents() (tutti gli antenati) e closest() (il primo antenato che corrisponde).
parent e closest
I discendenti (descendants)
I discendenti sono gli elementi "sotto": children() (i figli diretti) e find() (tutti i discendenti che corrispondono).
children e find
I fratelli (siblings)
I fratelli condividono lo stesso genitore: siblings() (tutti), next() (il successivo) e prev() (il precedente).
Evidenziare i fratelli
Il filtraggio (filtering)
Il filtraggio restringe una selezione: first(), last(), eq(n) (l'elemento all'indice n) e filter().
first, last ed eq
Introduzione ad AJAX
AJAX (Asynchronous JavaScript And XML) permette di caricare dati dal server senza ricaricare la pagina. jQuery rende AJAX semplicissimo con metodi come load(), $.get() e $.post().
A cosa serve
Aggiornare una parte della pagina senza ricaricarla tutta
Caricare contenuti su richiesta (es. "carica altri")
Inviare dati di un form in background
Comunicare con le API di un server
📘 Gli esempi AJAX hanno bisogno di un vero server per funzionare: qui vedrai il codice corretto da usare nei tuoi progetti reali, ma l'anteprima non può contattare server esterni.
Il metodo load()
Il metodo load() carica il contenuto di un file o di una URL dentro un elemento della pagina.
Caricare un file in un div (codice)
I metodi get e post
$.get() richiede dati al server (per leggere); $.post() invia dati al server (per scrivere, es. un form).
$.get e $.post (codice)
💡 Regola pratica: GET per ottenere dati, POST per inviarli. È la stessa logica dei metodi HTTP che userai con qualsiasi API.
Il metodo noConflict()
Il simbolo $ è usato anche da altre librerie. $.noConflict() libera il $ per evitare conflitti, permettendoti di usare jQuery per esteso o un alias personalizzato.
Evitare conflitti sul $
I filtri
I filtri selezionano elementi in base a criteri precisi usando pseudo-selettori come :first, :last, :even, :odd e :contains().
Filtri su una tabella
Certificazione jQuery
Una certificazione su jQuery attesta la tua padronanza della manipolazione del DOM, degli eventi e delle animazioni: utile per ruoli di sviluppo front-end e per la manutenzione dei moltissimi siti che usano ancora jQuery.
Certificazione
Ente
Note
jQuery Certificate
W3Schools
Base, ottima per il CV
Front End Certificate
W3Schools / freeCodeCamp
jQuery insieme a HTML/CSS/JS
Il tuo portfolio
—
Progetti pubblicati valgono piu' di ogni badge
Come prepararsi
🎯 Padroneggia selettori, eventi ed effetti
🧩 Sai manipolare l'HTML (get/set, add/remove, classi)
Ogni esempio del corso ha il pulsante ▶ Provalo tu: apre un editor con anteprima dal vivo già collegato a jQuery. Scrivi a sinistra, vedi il risultato a destra in tempo reale.
Sperimenta liberamente
Dove esercitarti ancora
💻 Il tuo editor + il CDN jQuery (vedi Per iniziare)
Crea un bottone che nasconde un paragrafo con un effetto fade
Cambia il colore di tutti i paragrafi al click
Aggiungi una voce a una lista con append()
Usa toggleClass per evidenziare un elemento
Livello intermedio
Crea un pannello a fisarmonica con slideToggle()
Anima un box facendolo spostare e ingrandire
Evidenzia i fratelli di un elemento al click
Leggi il valore di un campo input e mostralo in un paragrafo
Livello avanzato
Costruisci una lista "to-do": aggiungi voci da un input e rimuovile al click
Crea una galleria di immagini con effetti fade tra una e l'altra
Usa il chaining per concatenare almeno 4 effetti
Colora alternativamente le righe di una tabella con :even e :odd
🎯 Sfida
Realizza una mini FAQ interattiva: un elenco di domande che, al click, mostrano/nascondono la risposta con uno slideToggle(), e cambiano stile alla domanda attiva con toggleClass(). È un componente che troverai in moltissimi siti reali.
💡 Il modo migliore di imparare jQuery è ricreare piccoli componenti reali: menu a tendina, gallerie, FAQ, slider. Ogni esempio del corso è un buon punto di partenza.
Domande da colloquio
jQuery compare ancora in molti colloqui front-end, specie per la manutenzione di siti esistenti. Le domande più frequenti:
🔹 Cos'è jQuery e quali vantaggi offre rispetto a JavaScript puro?
🔹 Cosa fa $(document).ready() e perché si usa?
🔹 Differenza tra text(), html() e val()
🔹 Come si aggiungono e rimuovono elementi dal DOM?
🔹 Cos'è il chaining e quali vantaggi ha?
🔹 Differenza tra $.get() e $.post()
🔹 A cosa serve noConflict()?
🔹 jQuery è ancora consigliato per i progetti nuovi? Perché?
💡 Risposta matura da dare al colloquio: jQuery è ottimo per progetti esistenti e siti semplici, ma per applicazioni nuove e complesse si preferiscono framework come React o Vue. Dimostrare di sapere quando usarlo fa la differenza.
Quiz jQuery
Verifica le tue conoscenze. Le risposte sono in fondo.
Qual è la sintassi base di jQuery?
Cosa fa $(document).ready()?
Come si seleziona un elemento per id?
Quale metodo nasconde un elemento con dissolvenza?
Quale metodo aggiunge contenuto alla fine di un elemento?
Differenza tra remove() ed empty()?
Cosa fa toggleClass()?
Cos'è il chaining?
Quale metodo carica contenuto da una URL dentro un elemento?
A cosa serve noConflict()?
📘 Risposte: 1) $(selettore).azione(). 2) Esegue il codice quando la pagina è pronta. 3) Con $("#id"). 4) fadeOut(). 5) append(). 6) remove elimina l'elemento, empty ne svuota solo il contenuto. 7) Aggiunge la classe se manca, la toglie se c'è. 8) Concatenare più azioni sullo stesso elemento in una riga. 9) load(). 10) A liberare il simbolo $ per evitare conflitti con altre librerie.
Conclusione — E ora?
Hai completato il corso jQuery! Ora sai selezionare e manipolare elementi, gestire eventi, creare animazioni, modificare l'HTML al volo, navigare nel DOM e caricare dati con AJAX.
I tuoi prossimi passi
⚛️ Framework moderni: dopo jQuery, scopri React per le applicazioni complesse di oggi
🧠 Rinforza JavaScript: il corso JavaScript ti fa capire cosa fa jQuery "sotto il cofano"
Costruisci una pagina interattiva completa con jQuery: una galleria di immagini con effetti fade, un menu di navigazione a fisarmonica, una sezione FAQ con slideToggle e una lista "to-do" dove aggiungere e rimuovere voci. Pubblicala su GitHub Pages: sarà una dimostrazione concreta delle tue competenze front-end.
