Anteprima
Se conosci già JavaScript e vuoi lavorare in modo più rapido ed efficace, jQuery è la libreria che fa al caso tuo. Con un compilatore jQuery online puoi scrivere il tuo codice e vedere subito i risultati nella pagina, senza dover configurare nulla e senza perdere tempo in setup. L'editor jQuery di Biadets è gratuito, immediato e pronto all'uso fin dal primo secondo.
In questa pagina trovi tutto quello che devi sapere su questo strumento: come funziona, cosa puoi farci e perché jQuery, nonostante gli anni, resta ancora oggi una delle librerie più diffuse e utili per chi lavora sul web.
jQuery è una libreria JavaScript nata nel 2006 con un obiettivo preciso: semplificare le operazioni più comuni che gli sviluppatori si trovano a fare ogni giorno sul web. Selezionare elementi della pagina, gestire eventi, creare animazioni, fare richieste al server, manipolare il DOM: tutto quello che in JavaScript puro richiede più righe di codice, con jQuery si condensa spesso in una sola.
Il suo motto storico, "write less, do more", descrive bene la filosofia. Non è un linguaggio alternativo a JavaScript, ma un livello sopra di esso: usa la stessa logica, la stessa sintassi di base, ma offre strumenti più concisi e un'API uniforme che funziona in modo coerente su tutti i browser.
Negli ultimi anni il JavaScript moderno ha recuperato terreno e alcune cose che un tempo erano esclusive di jQuery oggi si possono fare anche nativamente. Ma jQuery resta presente su una quota enorme di siti web esistenti, è richiesto in molti contesti lavorativi ed è ancora oggi un punto di riferimento per chi lavora con WordPress, con template HTML e con progetti legacy. Impararlo ha un senso concreto e pratico.
L'interfaccia è quella familiare dell'editor di Biadets: a sinistra il codice, a destra l'anteprima della pagina aggiornata in tempo reale. In cima trovi le tab del progetto, tra cui la tab dedicata allo script, dove puoi scrivere tutto il codice jQuery che vuoi. Le modifiche si riflettono immediatamente nella pagina, così puoi sperimentare, correggere e affinare senza interruzioni nel flusso di lavoro.
In basso è presente la Console, utilissima per fare debug e per vedere l'output di qualsiasi istruzione. Puoi usarla esattamente come faresti con gli strumenti per sviluppatori del browser, ma senza dover uscire dall'editor.
Non devi preoccuparti di includere la libreria jQuery nel progetto: è già disponibile e pronta all'uso. Ti basta scrivere il codice jQuery e vederlo funzionare.
Il codice jQuery ruota attorno a un elemento centrale: la funzione $. È il punto di ingresso di praticamente tutto quello che si fa con questa libreria. Si passa alla funzione un selettore CSS, e jQuery restituisce tutti gli elementi della pagina che corrispondono a quel selettore, su cui poi si possono chiamare metodi e operazioni.
$("p").hide();Questa riga seleziona tutti i paragrafi della pagina e li nasconde. In JavaScript puro avrebbe richiesto qualche riga in più. La lezione sulla sintassi di jQuery spiega nel dettaglio come funziona questa struttura e come leggere e scrivere codice jQuery in modo corretto.
Quasi tutto il codice jQuery si scrive all'interno di una funzione speciale che aspetta che la pagina sia completamente caricata prima di eseguirsi:
$(document).ready(function() {
// Il tuo codice jQuery qui
});Oppure nella sua forma abbreviata, che troverai spesso nei progetti reali:
$(function() {
// Il tuo codice jQuery qui
});Questo garantisce che jQuery non tenti di manipolare elementi HTML prima che siano disponibili nella pagina, evitando errori che altrimenti sarebbero difficili da diagnosticare.
Uno dei punti di forza di jQuery è la potenza dei suoi selettori. Funzionano esattamente come i selettori CSS, il che significa che se sai già come si scrive un selettore in un foglio di stile, sai già come usarlo in jQuery. Puoi selezionare elementi per tag, per classe, per ID, per attributo, per posizione nel documento e con decine di altri criteri.
$("h1") // Tutti i titoli h1
$(".card") // Tutti gli elementi con classe "card"
$("#intestazione") // L'elemento con id "intestazione"
$("input[type='text']") // Tutti gli input di tipo testoLa flessibilità dei selettori è uno dei motivi per cui jQuery ha avuto un successo così duraturo. In poche parole puoi puntare con precisione chirurgica a qualsiasi elemento della pagina. La lezione dedicata ai selettori degli elementi esplora tutte le opzioni disponibili con esempi pratici.
Una volta selezionato un elemento, puoi fare quasi tutto con esso. Leggerne il testo, modificarlo, cambiarne gli attributi, aggiornarne lo stile: jQuery offre metodi specifici per ciascuna di queste operazioni, tutti con una sintassi compatta e leggibile.
Per leggere o cambiare il testo visibile di un elemento si usa .text(), mentre per leggere o modificare il contenuto HTML si usa .html():
$("#titolo").text("Nuovo titolo della pagina");
$(".box").html("<strong>Contenuto aggiornato</strong>");Per gli attributi esiste il metodo .attr(), che permette sia di leggere il valore attuale che di impostarne uno nuovo. La lezione su come recuperare il contenuto degli elementi e quella su come recuperare e modificare gli attributi coprono questi argomenti in modo completo.
Puoi anche lavorare sullo stile direttamente dal codice jQuery, usando il metodo .css():
$("p").css("color", "#3a86ff");La lezione sullo stile degli elementi approfondisce come usare questo metodo in modo efficace, anche per leggere i valori CSS correnti di un elemento.
jQuery eccelle nella gestione delle animazioni e degli effetti visivi. Con pochi metodi puoi ottenere risultati che in JavaScript puro richiederebbero molto più lavoro.
I metodi più semplici sono .show() e .hide(), che mostrano e nascondono elementi. In alternativa, .toggle() alterna tra i due stati: se l'elemento è visibile lo nasconde, se è nascosto lo mostra. Questi tre metodi accettano anche un parametro opzionale che specifica la velocità dell'animazione, rendendo la transizione graduale invece che immediata.
$("#menu").toggle(300); // Alterna visibilità con animazione di 300msPer effetti più elaborati, jQuery offre metodi specifici. Le slide fanno comparire o scomparire gli elementi con un movimento verticale. La dissolvenza fa apparire o sparire gli elementi con un cambio graduale di opacità. Entrambi gli effetti si ottengono con una riga di codice jQuery e danno immediatamente un aspetto professionale alle interazioni della pagina.
Se hai bisogno di qualcosa di più personalizzato, il metodo .animate() ti permette di animare qualsiasi proprietà CSS numerica con pieno controllo su durata, progressione e comportamento:
$(".box").animate({
opacity: 0.5,
marginLeft: "50px"
}, 600);La lezione su come animare gli elementi spiega tutte le opzioni disponibili, mentre quella su come fermare le animazioni è utile per gestire i casi in cui più animazioni si sovrappongono. Puoi anche ritardare l'esecuzione di un'azione con il metodo .delay(), per creare sequenze temporizzate senza dover usare setTimeout.
jQuery semplifica notevolmente tutte le operazioni di modifica del DOM: aggiungere nuovi elementi, rimuoverli, spostarli, clonarli o sostituirli diventa questione di poche istruzioni intuitive.
Puoi creare nuovi elementi HTML passando del codice HTML direttamente alla funzione $, e poi inserirli nella pagina con metodi come .append(), .prepend(), .before() e .after(). Ognuno di questi inserisce il nuovo elemento in una posizione diversa rispetto all'elemento selezionato.
$("#lista").append("<li>Nuovo elemento</li>");Per eliminare elementi esistono .remove(), che rimuove l'elemento dalla pagina in modo definitivo, e .empty(), che svuota il contenuto dell'elemento lasciando però il suo contenitore al suo posto. Puoi anche sostituire elementi con .replaceWith() o clonarli con .clone() per duplicarli in un altro punto della pagina.
La gestione degli eventi è uno degli ambiti in cui jQuery brilla di più. Il metodo principale è .on(), che permette di associare una funzione a qualsiasi evento su qualsiasi elemento:
$("#pulsante").on("click", function() {
$("#messaggio").text("Hai cliccato!");
});Esistono poi metodi abbreviati per gli eventi più comuni: .click(), .keyup(), .mouseover(), .submit() e molti altri. Il corso dedica lezioni separate agli eventi in generale, agli eventi del browser, agli eventi della tastiera, agli eventi del mouse e agli eventi dei form, così da coprire ogni scenario in modo preciso.
Particolarmente utile è il metodo .hover(), che accetta due funzioni: la prima viene eseguita quando il mouse entra sull'elemento, la seconda quando ne esce. È un modo molto pulito per gestire gli stati interattivi senza sporcare il codice con condizioni ridondanti.
Una delle funzionalità più potenti di jQuery è la gestione delle richieste Ajax, cioè la possibilità di comunicare con un server in background, senza che l'utente veda la pagina ricaricarsi. Questo è il meccanismo alla base di qualsiasi applicazione web moderna che aggiorna i propri contenuti in modo dinamico.
jQuery semplifica enormemente questa operazione rispetto al JavaScript puro. Il metodo più semplice è .load(), che carica contenuto HTML da un URL esterno e lo inserisce direttamente in un elemento della pagina. Per operazioni più elaborate si usano .get() e .post(), che corrispondono ai due metodi HTTP più comuni per inviare e ricevere dati.
$.get("dati.php", function(risposta) {
$("#risultato").html(risposta);
});Per il massimo controllo sulle richieste esiste il metodo .ajax(), che accetta un oggetto di configurazione e permette di specificare tipo di richiesta, intestazioni, gestione degli errori e molto altro. Il corso copre questo argomento in tre lezioni: l'introduzione ad Ajax e il metodo .load(), i metodi .get() e .post() e infine il metodo .ajax() per le richieste più avanzate.
Come tutti gli strumenti di Biadets, l'editor jQuery non ha alcun costo. Nessun account da creare, nessun abbonamento, nessuna funzionalità bloccata dietro un paywall. Puoi usarlo liberamente per studiare, sperimentare, costruire prototipi o testare frammenti di codice jQuery nel momento in cui ne hai bisogno.
La semplicità dello strumento è parte del suo valore: non devi preoccuparti di installare jQuery, di gestire dipendenze o di configurare un ambiente di sviluppo locale. Ti concentri sul codice, e l'editor pensa al resto.
Se vuoi costruire una conoscenza solida e strutturata di questa libreria, il corso jQuery di Biadets parte dall'introduzione a jQuery e all'installazione per arrivare passo dopo passo alle richieste Ajax, coprendo in mezzo tutto quello che ti serve per usare jQuery in progetti reali.
Ogni lezione è pensata per essere pratica: gli esempi di codice jQuery sono concisi, leggibili e pronti da provare direttamente nell'editor. Leggi come funziona un metodo, scrivilo nel compilatore, modificane i parametri e osserva cosa cambia nella pagina. È questo ciclo continuo tra teoria e sperimentazione che trasforma la conoscenza in competenza.
Che tu stia imparando jQuery per la prima volta o che tu voglia ripassare un argomento specifico, l'editor e il corso di Biadets sono lì per supportarti, gratuitamente e senza interruzioni.