Lo sviluppo di moderne applicazioni web richiede un uso sempre maggiore di funzionalità lato client: chiamate remote via AJAX, accesso e modifica in tempo reale del contenuto della pagina, animazioni, controlli sempre più complessi ed evoluti, interfacce grafiche dinamiche ed accattivanti e così via. Non è dunque un caso che negli ultimi anni ci sia stato un fiorire di librerie e framework JavaScript per agevolare questo genere di programmazione. Tra le numerose alternative disponibili ricopre indubbiamente un ruolo di primissimo piano jQuery, il framework creato da John Resig nel 2006. Il successo di jQuery è determinato dalla combinazione di diversi fattori:

• è completo e leggero (meno di 20 KB per l'ultima versione attualmente disponibile, la 1.3.2);
• è semplice da utilizzare, ha una sintassi compatta e chiara ed è ben documentato;
• è fortemente estendibile (tramite "plugin") ed è possibile trovare svariati esempi di codice già pronti all'uso;
• è rilasciato sotto doppia licenza MIT e GPL (per maggiori informazioni sui termini di licenza, si può visistare la sezione apposita presente nel sito ufficiale di jQuery), quindi liberamente utilizzabile sia in progetti personali che commerciali;
• è stato scelto come framework client-side da Microsoft, Google, Amazon, IBM, Dell, Mozilla, Twitter, DotNetNuke, WordPress e tantissimi altri diventando quindi uno "standard de facto";
• in Visual Studio gode del supporto IntelliSense per l'autocompletamento del codice e la visualizzazione della documentazione, riducendo drasticamente i tempi di sviluppo;
• consente di scrivere codice indipendente dal browser (supporta ufficialmente Internet Explorer 6 o superiore, FireFox 2 o superiore, Safari 3 o superiore, Opera 9 o superiore e Chrome);
• semplifica l'accesso agli eventi della pagina consentendo così sia la riduzione della quantità di codice necessaria per gestire le interazioni dell'utente sia la separazione formale di contenuto (markup) e presentazione (stili, azioni, dinamismi, ecc.);
• supporta tutti i selettori CSS standard, da CSS 1 a CSS 3.

jQuery mette dunque a disposizione un'ampia serie di funzioni per semplificare drasticamente lo sviluppo lato client, permettendo di ottenere con facilità risultati eccellenti, come espresso anche dal motto della libreria: "write less, do more".

La documentazione ufficiale suddivide le API di jQuery in base al tipo di funzionalità, come mostrato nella figura seguente:

jQuery copre dunque praticamente tutto quello che tipicamente viene richiesto da un'applicazione Web: selezione e manipolazione degli elementi della pagina, modifica degli stili, accesso agli eventi, animazioni e chiamate AJAX.

In aggiunta a quanto fornito direttamente da jQuery, abbiamo a disposizione una serie aggiuntiva di controlli visuali (UI widgets) nota come jQuery User Interface per gestire comportamenti come drag&drop, ridimensionamento e ordinamento, controlli veri e propri (analogamente a quanto disponibile lato server in ASP.NET; abbiamo ad esempio i widget accordion, dialog, slider, datepicker, progressbar, ecc.) ed effetti avanzati come blind, bounce, clip, shake, ecc. Tutti i widget sono fortemente personalizzabili mediante la scelta di uno dei molti temi a disposizione o la definizione di uno stile ad hoc.

La natura a plugin di jQuery rende praticamente infinita la possibilità di ampliamento delle funzionalità: moltissime estensioni di ogni tipo sono a disposizione degli sviluppatori nella raccolta dei plugin ufficiali.

Installazione

Iniziare ad utilizzare jQuery è molto semplice: basta inserire la libreria nella pagina come script, specificando come valore dell'attributo src il percorso di una copia ospitata localmente (il download è disponibile dalla Home Page di jQuery o comunque dal progetto su Google Code):

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

oppure con un riferimento ad un servizio di content delivery come Microsoft Ajax CDN:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>

o ancora Google Ajax Libraries API:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

Richiamare jQuery nelle nostre pagine da uno dei suddetti servizi ha indubbi vantaggi, come ridurre il consumo di banda ed incrementare le performance, anche favorendo il caching degli script cross-domain (è probabile che un utente che visiti per la prima volta il nostro sito abbia già una copia locale della libreria, richiesta da un sito visitato in precedenza) ma, specie in particolari contesti, anche qualche svantaggio: si dipende dalla disponibilità di un servizio di terze parti (ma, parlando di Google e Microsoft, possiamo stare piuttosto tranquilli da questo punto di vista) oppure, se la pagina utilizza il protocollo HTTPS, gli script di altri domini non risultano certificati; infine bisogna comunque considerare che - almeno potenzialmente - i CDN sarebbero in grado di tracciare in diversi modi gli utenti del nostro sito e le loro abitudini.

Utilizzando come tool di sviluppo Visual Studio possiamo abilitare l'Intellisense per jQuery così da avere suggerimenti puntuali e autocompletamento del codice: è sufficiente effettuare il download della libreria per Visual Studio (che presenta i commenti in formato XML; il link all'ultima versione disponibile è disponibile sul sito ufficiale di jQuery) e referenziarla nella pagina:

<script src="js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

per ottenere quanto mostrato in figura:

Importante: al rilascio in produzione dell'applicazione sostituire il riferimento alla versione di jQuery per Visual Studio con la versione "minified" locale o fornita dal provider CDN scelto!

È possibile attivare il supporto Intellisense anche in file Javascript esterni inserendo il seguente commento XML per referenziare la libreria jQuery:

/// <reference path="jquery-1.3.2-vsdoc2.js" />

ottenendo il funzionamento desiderato:

Nota: si raccomanda l'installazione dell'aggiornamento KB946581 per Visual Studio 2008 e Visual Web Developer Express 2008.