Guida jQuery
In qualità di autore della nuova versione di questa guida ritengo doveroso e corretto ringraziare l'Ing. Giovanni Belelli per la stesura della prima release di questa trattazione che è stata molto utile ed apprezzata da migliaia di visitatori. La nuova versione di questa guida è stata quasi completamente riscritta rispetto alla precedente, tuttavia alcuni stralci ed alcuni esempi sono stati mantenuti ove tutt'oggi attuali e corretti. Buona lettura.
Introduzione
Negli ultimi anni, con l'avvento del web 2.0, con la crescete necessità di avere all'interno delle proprie pagine web effetti grafici spettacolari (senza dover necessariamente ricorrere a Flash) e soprattutto con il diffondersi delle tecniche di sviluppo legate ad AJAX, sono nate nuove soluzioni di scripting che sfruttano la potenza di Javascript per far fronte a tali necessità. In questi anni, quindi, abbiamo assistito alla nascita di diversi framework Javascript finalizzati a rendere più rapida e semplice l'avvità di sviluppo di interfacce utente (UI) ed applicativi lato client sempre più potenti e spettacolari. Tra questi framework un postio di primissimo piano spetta di diritto a jQuery, potente libreria Javascript che sarà oggetto di questa nostra guida.
Cos'è un framework?
Per chi non lo sapesse, un framework non è altro che un insieme di metodi e proprietà grazie ai quali lo sviluppatore può creare applicativi in grado di compiere operazioni complesse in modo più semplice e scrivendo meno codice rispetto a quanto farebbe se decidesse di utilizzare la sintassi nativa offerta da linguaggio (nel nostro caso Javascript). Tutto questo diviene possibile grazie ad una serie di operazioni pre-costituite e ad una serie di "scorciatoie" che consentono di ridurre notevolmente la quantità di codice che dovrà essere scritta dal programmatore col duplice beneficio di agevolare processi di sviluppo molto più semplici e rapidi. jQuery, ovviamente, consente di fare tutto questo e molto altro! Grazie a jQuery, infatti, potremo creare con una certa facilità delle Rich Internet Application (RIA), ossia applicazioni web caratterizzate da un elevato grado di interattività e velocità.
jQuery: cenni storici
La prima versione del framework jQuery risale al 2006 ed è frutto del lavoro dello svluppatore John Resign. Questo framework nasce, originariamente, nella scia di Prototype, uno dei primi framework per lo sviluppo di applicazioni RIA. Rispetto a quest'ultimo, tuttavia, jQuery risulta molto più semplice e flessibile, fattori che hanno contribuito all'enorme successo di questo framework che in breve tempo è diventato il più utilizzato e diffuso tra i webmaster di tutto il mondo.
Caratteristiche di jQuery
Tra i punti di forza di jQuery è necessario segnalare la sua elevata compatibilità con praticamente tutti i browser in circolazione (jQuery è completamente cross-browser!) e la sua capacità di lavorare in simultanea con altre librerie senza creare conflitti. Il motto di jQuery è "write less, do more" che, come si intuisce, sottolinea in modo molto diretto sia la semplicità che la potenza di questo framework.
Le funzionalità integrate nella libreria, che andremo a vedere in questa guida, vanno dalla manipolazione dei CSS alla selezione di elementi del DOM, dalla personalizzazione degli eventi generati dall'utente alla creazione di chiamate AJAX, senza tralasciare i sopracitati effetti grafici. Un altro aspetto importante per gli utilizzatori di jQuery è la possibilità di utilizzare i numerosi plugin messi a disposizione da una vastissima comunità di sviluppatori e scaricabili all'indirizzo plugins.jquery.com o attraverso pagine web personali o servizi di condivisione come Github (basta fare qualche ricerca su Google per intuire quale sia la mole di materiale disponibile in Rete). Anche qui su Mr.Webmaster è presente un archivio di plugin per jQuery raggiungibile attraverso questo link.
Il framework, è bene precisarlo, è in continuo sviluppo e vengono rilasciati aggiornamenti con una certa frequenza al fine di rendere il codice sempre più veloce e di mantenere il passo con i nuovi motori javascript che vengono integrati all'interno delle nuove versioni dei browser: nel momento in cui questa guida viene aggiornata, jQuery è disponibile in due versioni: la 1.11.2 (cross browser) e la 2.1.3 (non compatibile con le vecchie versioni di Internet Explorer).
Il primo passo con jQuery
La prima cosa da fare è scaricare l'ultima versione del framework dal sito ufficiale. Una volta scaricata la libreria sarà necessario includerla all'interno della nostra pagina web tra i tag <head> e </head>:
<script src="jquery.js"></script>
In alternativa è possibile, senza scaricare il package, includere un riferimento alla libreria hostata in remoto sul sito ufficiale del progetto:
<script src="http://code.jquery.com/jquery-latest.js"></script>
oppure linkare quella hostata da googlecode (per maggiori info clicca qui):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Il gioco è fatto! Da questo momento potremo utilizzare jQuery e tutte le opportunità che essa ci offre.La funzione jQuery()
La funzione principale utilizzata in jQuery è, neanche a dirlo, jQuery(). Per non smentire quanto enunciato dal motto stesso del framework riguardo alla sinteticità delle funzioni, è presente un suo alias: $() (il simbolo del dollaro è stato scelto per mantenere una certa uniformità con il framework Prototype).
Le due funzioni si equivalgono e per semplicità d'ora in poi nei...
Evitare conflitti tra jQuery e altre librerie
Nella creazione del nostro portale web potrebbe essere necessario utilizzare diverse librerie, magari perchè una offre dei vantaggi che l'altra non offre o più semplicemente perchè troviamo un plugin ben fatto che utilizza quella libreria piuttosto che un'altra.
Non sempre l'utilizzo contemporaneo di più librerie (o framework) differenti è ammesso, in quanto potrebbero andare in conflitto tra di loro e...
jQuery: selettori di base, gerarchici e per attributi
Uno dei punti di forza di jQuery, come già detto nella seconda lezione di questa guida, è il motore di selezione basato su Sizzle (un motore per i selettori CSS utilizzato anche da altri framework). Questo motore è molto importante perchè permette di selezionare in maniera molto rapida ed efficiente gli elementi all'interno del documento, così da applicarvi proprietà,...
I filtri di selezione di jQuery
Dopo aver parlato dei selettori di jQuery, passiamo a vedere come "raffinare" le selezioni utilizzando dei filtri che ci vengono messi a disposizione dal framework e grazie ai quali possiamo identificare elementi della pagina in modo estremamente preciso. I filtri che sto per presentarvi devono essere combinati con i selettori visti nella lezione precedente. I filtri sono combinati coi...
Muoversi all’interno del DOM con jQuery
jQuery mette a disposizione numerosi metodi per muoversi all'interno di un documento effettuando ricerche all'interno di un elemento oppure sfruttando legami di tipo padre-figlio e così via. Abbiamo già visto come sia possibile fare qualcosa del genere mediante alcuni filtri di selezione, in questa lezione vedremo, invece, alcuni metodi specifici offerti dalla libreria.
Sulla base di quanto appreso sino a...
Metodi jQuery per filtrare la selezione degli elementi
Nella precedente lezione abbiamo visto come "andare a spasso" per il DOM al fine di selezionare elementi genitori, fratelli o figli. In questa lezione vedremo una serie di filtri di selezione attraverso i quali è possibile ridurre il numero di elementi individuati sulla base di una serie di criteri.
.filter()
Grazie al metoto .filer() è possibile, appunto, filtrare una selezione specificando...
Il metodo .each() di jQuery
Un metodo particolare di jQuery inerente all'interazione col DOM è sicuramente .each(). Questo metodo, a differenza di quelli visti sin'ora, non ha come scopo la selezione di un elemento o di un set di elementi, ma assolve ad una funzione differente in quanto assolve un ruolo da protagonista all'interno della possibile struttura di controllo di uno script.
Il metodo...
Manipolare gli elementi del DOM con jQuery
Nelle lezioni precedenti della nostra guida a jQuery abbiamo visto come si selezionano gli elementi del DOM in base a differenti criteri di ricerca. Ora, finalmente, passiamo a vedere cosa fare con questi elementi una volta selezionati.
Il questa lezione affronteremo l'argomento della manipolazione del DOM, ovvero l'inserimento di nuovi elementi in determinati punti del documento, la modifica di quelli...
Manipolare l’aspetto e la posizione degli elementi con jQuery
Nella precedente lezione abbiamo visto come manipolare il DOM alterando gli elementi già presenti nella pagina, eliminandoli o aggiungendone di nuovi. In questa lezione vedremo come lavorare sull'aspetto visivo degli elementi della pagina attraverso la manipolazione delle proprietà CSS.
Esistono diversi metodi grazie ai quali è possibile modificare l'aspetto di uno o più elementi della pagina e per questioni espositive...
Gestire gli eventi in jQuery
Sviluppando applicazioni con jQuery è possibile avviare determinate azioni o lanciare dei metodi al generarsi di un determinato evento. Gli eventi possibili sono, ovviamente, gli stessi che siamo soliti utilizzare con Javascript (onclick, onmouseover, onload, ecc.) più alcuni che sono resi disponibili dalla stessa libreria al fine di potenziare le possibilità offerte nativamente dal linguaggio.
Al fine di scatenare un'azione...
I metodi .load() e .ready() di jQuery
All'interno della famiglia degli eventi (di cui abbiamo parlato nella precedente lezione) un ruolo di particolare importanza è ricoperto da .load() e .ready(). Questi due metodi, infatti, sono molto utilizzati da chi scrive applicazioni in jQuery, in quanto permettono di sfruttare due "momenti importanti" legati al caricamento della pagina.
Il metodo .load() consente di eseguire un dato codice solo al...
La event delegation in jQuery
In una delle precedenti lezioni abbiamo visto come i metodi .on() e .off() siano diventati, a partire dalla versione 1.7 di jQuery, i protagonisti assoluti nella gestione degli eventi. Questi metodi, infatti, non solo hanno sostituito .bind() e .unbind(), ma hanno altresì rimpiazzato metodi del calibro di .live(), .delegate() e .die().
Per dirla in altri termini (forse più comprensibili ai...
jQuery Ajax: gestire chiamate asincrone
In questa lezione passeremo in rassegna uno degli aspetti più importanti di questo framework, vedremo cioè come utilizzare jQuery per implementare chiamate asincrone mediante la tecnologia Ajax, ma per prima cosa credo sia opportuno spiegare cos'è una chiamata asincorona (o "chiamata Ajax").
Cos'è Ajax (e a cosa serve)
Si definisce asincrona una chiamata ad una risorsa esterna che non interferisce con...
Scorciatoie Ajax: i metodi .get(), .post() e .load() di jQuery
Nella lezione precedente abbiamo visto come utilizzare il metodo .ajax() per effettuare delle chiamate asincrone. Oltre a questo metodo, jQuery fornisce anche alcune scorciatoie che permettono di realizzare una chiamata Ajax in maniera ancora più semplice. Le scorciatoie che vederemo in questa lezione non permettono di raggiungere il livello di personalizzazione del metodo .ajax(), ma sono comunque estremamente utili,...
jQuery Ajax: eventi locali e globali
In questa lezione soffermeremo la nostra attenzione sui diversi eventi legati alle chiamate Ajax. Per prima cosa possiamo dire che tali eventi possono essere divisi in due famiglie:
eventi locali
eventi globali
Vediamoli speratamente.
Eventi locali
Questi eventi riguardano la singola chiamata Ajax e possono essere impostati all'interno della stessa, essendo dei possibili parametri del metodo .ajax(). Ad ognuno di questi eventi è possibile...
Effetti jQuery: mostrare/nascondere un elemento con .hide(), .show() e .toggle()
Studiare un aspetto grafico piacevole è uno delle primarie esigenze di ogni web designer che si rispetti. Nella fase di progettazione del layout di un sito web si cerca sempre, quindi, di realizzare un "contenitore" che, oltre ad essere funzionale ed usabile, sia anche piacevole alla vista, magari aggiungendo delle animazioni o degli effetti in grado di migliorare la...
Effetti jQuery: sliding e fading
Particolarmente piacevoli alla vista, e sempre in grado di "stupire" l'utente, sono gli effetti di sliding e fading. Entrambe queste tipologie di effetti grafici possono essere facilmente realizzate con jQuery grazie ad una serie di metodi che vi illustrerò in questa lezione.
Effetti sliding
Gli effetti di tipo slide generano un'animazione di discesa o risalita per mostrare o nascondere un elemento...
Effetti jQuery: creare animazioni col metodo .animate()
Per concludere il nostro breve escursus tra gli effetti di jQuery vediamo come realizzare delle vere e proprie animazioni per dar vita a degli effetti totalmente personalizzati. Grazie al metodo .animate(), infatti, è possibile agire sulle singole proprietà CSS dell'elemento avendo, di fatto, una assoluta libertà creativa nel realizzare gli effetti di cui realmente abbiamo bisogno.
Esistono due diverse implementazioni...