Introduzione a jQuery e come semplifica JavaScript

Quando inizi a scrivere codice in JavaScript, una delle prime sensazioni che potresti provare è quella di essere circondato da tante righe, tante funzioni, e a volte anche troppi punti e virgola. Ti trovi a scrivere e riscrivere cose simili, come accedere a un elemento HTML o rispondere a un clic su un bottone, e inizi a chiederti: “Non c’è un modo più semplice per farlo?”

La risposta è sì, e per tanti anni quella risposta è stata jQuery.

jQuery: una piccola rivoluzione nella semplicità

jQuery è una libreria JavaScript che nasce con un obiettivo ben preciso: rendere più semplice la scrittura del codice. Quando è stata rilasciata nel 2006 da John Resig, ha fatto subito colpo sugli sviluppatori web di tutto il mondo. L’idea era chiara: creare un’interfaccia più leggera e accessibile per interagire con il DOM, cioè con gli elementi HTML, ridurre la verbosità del codice e, non da meno, assicurare la compatibilità tra browser.

Il motto della libreria – “Write less, do more” – riassume perfettamente tutto ciò che jQuery ti permette di fare: scrivere meno codice per ottenere gli stessi (se non migliori) risultati. In un’epoca in cui scrivere JavaScript per far funzionare un sito su Internet Explorer e Firefox era quasi una doppia impresa, jQuery è stato il ponte tra questi due mondi.

Una sintassi che parla chiaro

Iniziare a usare jQuery non è complicato. Basta includere la libreria nel tuo file HTML (puoi usare un CDN, ad esempio da Google o jQuery stesso), e sei subito operativo.

Ecco un classico esempio per nascondere un paragrafo al clic di un bottone:

Con JavaScript puro:

document.getElementById("btn").addEventListener("click", function() {
   document.getElementById("paragrafo").style.display = "none";
});

Con jQuery:

$("#btn").click(function() {
   $("#paragrafo").hide();
});

Due righe contro cinque. Ma non è solo una questione di quantità: è la leggibilità che cambia. Quello che stai facendo è chiarissimo a colpo d’occhio.
Il simbolo $ è il cuore (ops… la struttura portante) di jQuery. Si usa per selezionare elementi, proprio come faresti con un selettore CSS. E da lì puoi concatenare azioni, una dopo l’altra, in modo fluido.

Accesso e manipolazione del DOM

Una delle operazioni più comuni nello sviluppo web è interagire con gli elementi HTML: cambiarne il contenuto, modificare il CSS, spostarli, aggiungerli o rimuoverli. jQuery rende tutte queste operazioni molto più semplici.

Ad esempio, per cambiare il testo di un elemento:

$("#titolo").text("Nuovo titolo");

Oppure per aggiungere una classe CSS:

$(".blocco").addClass("evidenziato");

Con poche parole riesci a ottenere effetti che, in JavaScript puro, richiederebbero molte righe, controlli, condizioni e gestione delle eccezioni.

Eventi e animazioni: una questione di fluidità

Un altro punto forte di jQuery è la gestione degli eventi. Ascoltare clic, hover, input, e via dicendo, diventa una questione di un paio di righe.

Per esempio:

$("input").focus(function() {
   $(this).css("background-color", "#ffcccc");
});

Qui, ogni volta che un input riceve il focus, cambia colore. È semplice, diretto, e funziona su tutti i browser principali senza ulteriori verifiche.

E le animazioni? Non servono complicate chiamate a requestAnimationFrame o plugin esterni. Vuoi fare uno slide-up? Basta scrivere:

$("#box").slideUp();

Vuoi che riappaia lentamente?

$("#box").fadeIn("slow");

Una cosa importante è che jQuery si occupa anche del “dietro le quinte”: non devi preoccuparti di fare calcoli o gestire frame. Fa tutto lui.

jQuery e AJAX: caricamenti asincroni a portata di click

Un altro ambito dove jQuery ha dato un’enorme spinta è l’utilizzo delle chiamate AJAX. Caricare contenuti da un altro file o da un server senza ricaricare la pagina era un tempo una procedura complessa. Con jQuery, è diventata quasi banale.

Per esempio, caricare un contenuto da un file contenuto.html dentro un div:

$("#contenuto").load("contenuto.html");

Oppure fare una chiamata GET e gestire la risposta:

$.get("dati.json", function(data) {
  console.log(data);
});

Oppure una POST:

$.post("login.php", { utente: "Mario", password: "1234" }, function(risposta) {
   alert("Risposta ricevuta: " + risposta);
});

La comodità è che jQuery si occupa anche della gestione del formato (HTML, JSON, script), dei fallback in caso di errore e di eventuali callback al termine della richiesta.

jQuery oggi: è ancora utile?

Questa è una domanda che circola spesso. Nel 2025, con la diffusione di framework moderni come React, Vue e Angular, si potrebbe pensare che jQuery non abbia più molto da dire.

Ma la realtà è un po’ più sfumata.

jQuery resta una scelta sensata per:

• progetti leggeri, dove usare un framework sarebbe esagerato;
• siti esistenti che hanno già tante funzionalità basate su jQuery;
• chi sta imparando JavaScript e vuole un ponte pratico per iniziare a lavorare con codice reale.

Non è un caso se tanti CMS (WordPress in primis) lo usano ancora. Non tanto per abitudine, ma perché per molte operazioni offre ancora oggi una soluzione compatta e compatibile.

In più, con la versione 3.x, jQuery ha migliorato ulteriormente la gestione degli eventi, la sicurezza e la modularità. E grazie a CDN e versioni slim, può essere caricato velocemente senza pesare troppo sulla performance della pagina.

Piccolo progetto pratico con jQuery

Per farti capire meglio come si può usare jQuery in un caso concreto, ecco un piccolo esempio di todo list interattiva:

$("#aggiungi").click(function() {
   var task = $("#nuovo-task").val();
   if (task !== "") {
      $("#lista").append("" + task + " X");
      $("#nuovo-task").val("");
   }
});

$(document).on("click", ".rimuovi", function() {
   $(this).parent().remove();
});

In questo codice:

• quando clicchi su “Aggiungi”, viene letto il contenuto dell’input e aggiunto alla lista;
• ogni task ha un bottone “X” per rimuoverlo;
• l’evento on (“click”, “.rimuovi”, …) è legato al documento perché gli elementi vengono creati dinamicamente.

In meno di 10 righe hai una lista completamente dinamica, senza dover scrivere tutto il codice a mano in vanilla JavaScript.

Conclusione

Questa introduzione a jQuery non vuole essere una lezione enciclopedica, ma un punto di partenza chiaro e utile per capire dove questa libreria può fare la differenza. In un mondo che cambia rapidamente, dove nascono e muoiono framework ogni anno, jQuery continua a essere un alleato affidabile per piccoli progetti, prototipi rapidi e per chi vuole imparare a domare il DOM senza complicarsi troppo la vita.

Non sostituisce le moderne architetture di sviluppo, ma può ancora svolgere un ruolo prezioso per chi vuole imparare JavaScript in modo graduale, costruendo passo dopo passo la consapevolezza di ciò che succede sotto il cofano.

E per iniziare a divertirsi con il codice, a volte serve proprio questo: qualcosa che ti permetta di sperimentare, creare e vedere subito il risultato. In questo, jQuery resta un compagno perfetto.

I nostri corsi : https://www.develop4fun.it/premium-corsi-online-in-abbonamento

▼ SEGUICI SU ▼
» Facebook per il Web e corsi online: https://www.facebook.com/developforfun
» Facebook di D4F Games: https://www.facebook.com/d4fgames
» Instagram per il Web e corsi online: https://www.instagram.com/develop4fun
» Instagram di D4F Games: https://www.instagram.com/d4f_games
» Twitter per il Web e corsi online: https://twitter.com/Develop4fun
» Twitter di D4F Games: https://twitter.com/D4fGames

VISITA IL NOSTRO SITO WEB: https://www.develop4fun.it
ISCRIVITI SUBITO AL NOSTRO CANALE: https://www.youtube.com/channel/UCZ4dhshzpVbbRPVuL9TNH4Q