Anche se la libreria più conosciuta e utilizzata fino a poco tempo fà era Prototype, c’è una nuova libreria chiamata jQuery, che include molte delle idee di Prototype e aggiunge molte altre nuove idee per derivare una libreria spettacolare: molto piccola, veloce, leggera e con migliaia di utenze.

Le applicazioni web sono sempre più complesse, giacché incorporano nuovi effetti visivi e interazioni dinamiche (Ajax, auto-completamento, drag & drop, elementi che appaiono/scompaiono, animazioni, ecc).
Allo stesso tempo, lo sviluppo di applicazioni web avanzate sta diventando sempre più complicato, dal momento che deve funzionare correttamente in almeno 5 diversi browser (Internet Explorer 6 e 7, Firefox, Opera e Safari) i tempi di sviluppo si riduce per la continua necessità di includere sviluppi dell’applicazione.
Per queste ragioni è indispensabile utilizzare librerie JavaScript per semplificare lo sviluppo e che consentono di creare applicazioni compatibili con tutti i browser.

[nextpage title=”Cos’è jQuery?”] Secondo i suoi creatori, jQuery è una “libreria JavaScript molto veloce e molto leggera che semplifica lo sviluppo di applicazioni web lato client.” In altre parole, jQuery include molte funzionalità per creare facilmente pagine web di applicazioni dinamiche complesse.

Nozioni di base
⤽
Per utilizzare jQuery, c’è solo bisogno di scaricare la libreria e vincolare, sulle nostre pagine, l’unico file JavaScript che la contiene:
Copia codice 

<script type="text/javascript" src="jquery.js"></script>
La libreria è scaricabile in due versioni: la versione decompressa occupa 61 KB, ed è la migliore scelta per sviluppare applicazioni. La versione compressa occupa solo 20 KB ed è la scelta ideale per il server di produzione, per ridurre al minimo il tempo di caricamento dell’applicazione.
Una delle istruzioni più utilizzate in applicazioni JavaScript è la seguente:
Copia codice 

window.onload = function() { ... }
La dichiarazione di sopra consente di eseguire il codice JavaScript quando la pagina è completamente caricata. Si tratta di una istruzione essenziale in applicazioni web complesse, perché ogni cambiamento di pagina o selezione di qualsiasi elemento richiede che l’albero del DOM della pagina sia completamente costruito, e quindi che sia disponibile il codice HTML nell’intera pagina. jQuery ha una dichiarazione molto simile che equivale a quanto sopra:
Copia codice 

$(document).ready( function() { ... } );
Il grande vantaggio della funzione di jQuery è che si può manipolare la pagina appena viene caricato il suo codice HTML (e quindi, appena ha costruito l’albero del DOM della pagina), mentre la funzione JavaScript attende che si carichi tutti gli elementi della pagina, incluse tutte le immagini. In questo modo, le applicazioni realizzate con jQuery sono in grado di rispondere molto più rapidamente rispetto alle tradizionali applicazioni JavaScript.
D’altra parte, la funzione getElementById() è probabilmente la più comunemente utilizzata nello sviluppo di applicazioni Web, permettendo selezionare il valore del suo attributo “id”. Inoltre, ci sono altre due funzioni correlate: getElementsByTagName() e getElementsByName(). jQuery include la funzione $() come alternativa più veloce e più completa per selezionare qualsiasi elemento della pagina:
Con JavaScript
⤽
Copia codice 

// Seleziona un elemento
document.getElementById("mioParragrafo");
// Selezionare tutti i liks
document.getElementsByTagName("a");
// Seleziona tutto quello di prima
?
// Seleziona mediante la classe CSS
?
Con jQuery
⤽
Copia codice 

// Seleziona un elemento
$("#mioParragrafo");
 // Seleziona tutti i liks
$("a");
// Seleziona tutto quello di prima
$("#mioParragrafo, a");
// Seleziona mediante la classe CSS
$(".miaClasse");
[nextpage title=”Selettori avanzati”] Uno dei componenti più impressionante di jQuery è la quella dei suoi selettori, che consentono di dimenticare il noioso document.getElementById() e il complesso codice JavaScript. jQuery utilizza il meglio di CSS1, CSS2, CSS3 e di XPath per selezionare facilmente qualsiasi elemento della pagina senza saturare il codice XHTML con gli attributi “id”. Esempi:

Le varie opzioni
Con jQuery
⤽
Copia codice 

// Seleziona tutti i paragrafi nella pagina
// che hanno almeno un link
$("p[a]");
// Seleziona tutti i "div" che non sono nascosti
$("div:visible");
// Seleziona tutti i radio options che sono state selezionate
$("input[@type=radio][@checked]");
// Seleziona più  elementi attraverso i suoi "id"
// e le sue "class" (restituisce un array)
$("p.importante, div#menu, span#introduccion p.especial a");
Inoltre, jQuery supporta molti dei selettori che definisce CSS, qualcosa che i browser attuali possono solo sognare di avere un giorno, come: :nth-child(n), :empty, :not, :disabled. Per i programmatori abituati a lavorare con XML, jQuery permette di usare anche l’XPath per la selezione di elementi, come per esempio:
Con XPath
⤽
Copia codice 

// Seleziona tutti i paragrafi nella pagina
$("/html/body//p");
// Seleziona tutti i links i cui
// attributi "rel" sia uguale a "nofollow"
$("//a[@ref='nofollow']");
jQuery è così avanzato che aggiunge anche i suoi propri selettori che non esistono in CSS o XPath e che possono facilitare notevolmente lo sviluppo di applicazioni:
Nel DOM
⤽
Copia codice 

// Seleziona tutti gli elementi pari di una lista
// (":odd" seleziona i dispari)
$("ul#menu li:even"):
// Seleziona i primi 4 paragrafi della pagina
$("p:lt(4)");
// Seleziona tutti i links contenenti il testo "clicca qui"
$("a:contains('clicca qui')")
Eventi
⤽
Oltre a l’evento ready() visto sopra, jQuery ha diverse funzioni legate alla gestione degli eventi. Il metodo bind(), per esempio, può associare un numero illimitato di eventi ad un singolo elemento:
Il metodo bind()
⤽
Copia codice 

// Facendo clic su un paragrafo della pagina,
// mostra un alert() con il suo contenuto
$("p").bind("click", function() {
   alert( $(this).text() );
});
Il modello di eventi jQuery è molto completo, dato che ogni evento ha due possibilità: se non si passa nessuna funzione, viene eseguito l’evento dell’elemento, se si passa una funzione, questa funzione sarà associata all’evento dell’elemento:
Asocia funzione all'evento
⤽
Copia codice 

// Esegue l'evento "onclick" su ogni paragrafo della pagina
$("p").click();
// Asocia una funzione all'evento "onclick"
// su ogni paragrafo della pagina
$("p").click(function() {
   alert( $(this).text() );
});
jQuery ha tante funzioni come eventi standard di JavaScript. Il nome di ogni funzione è lo stesso dell’evento senza il solito prefisso “on”: focus(), blur(), keyup(), mouseover(), mouseup(), resize(), submit(), ecc.
Inoltre, jQuery aggiunge un evento che non esiste in JavaScript ed è veramente utile per molte applicazioni: toggle(). A questo metodo vengono passate due funzioni, le cui esecuzioni si alternano in funzione delle volte che si fa clic sull’elemento.
La prima volta che si fa clic sull’elemento (e tutte le volte dispari), si esegue la prima funzione e la seconda volta che si clicca sull’elemento (e tutte le volte pari) esegue la seconda funzione:
Il metodo toggle()
⤽
Copia codice 

$("p").toggle(function(){
   alert("Mi sono appena attivato");
},function(){
   alert("Mi sono disattivato");
});
[nextpage title=”Interazioni Ajax”] Ora che la maggior parte delle applicazioni web necessita integrare interazioni Ajax, jQuery permette di includerle senza alcuna difficoltà. I seguenti esempi mostrano come sia facile eseguire alcune interazioni comuni in Ajax:
Interazioni comuni in Ajax
Copia codice 

// Carica il contenuto di una pagina HTML in un elemento
$("div#notizie").load("notizie.html");
// Scarica uno script dal server e lo esegue
$.getScript("/percorso/fino/a/mioScript.js");
// Richiesta GET al server con parametri e funzione di risposta
// La richiesta POST es la stessa, cambiando $.get per $.post
$.get("/percorso/fino/allo/scriptDelServer.php",
   {idProdotto: "AX00342", quantita: "3"},
   function(data){
     alert("Si è  aggiunto al carrello: " + data);
   }
);
Inoltre, jQuery include molte altre funzioni per costruire sofisticate richieste Ajax e notificare all’utente l’inizio/l’esecuzione/finalizzazione nelle richieste Ajax.

Effetti visivi
⤽
Tutte le applicazioni web moderne incorporando piccoli effetti visivi e animazioni che, se utilizzati correttamente, migliorano l’interazione con l’applicazione e la sua usabilità. jQuery fornisce una serie di effetti visivi, usati dai progettisti web, dove si possono controllare la durata di ogni effetto attraverso le sue opzioni:
Opzioni di durata di ogni effetto
Copia codice 

$("p").hide();        // Nasconde un elemento
$("p").show();        // Mostra un elemento
$("p").toggle();      // Se era nascosto, lo mostra;
                      // se era visibile, lo nasconde
$("p").show("slow");  // Mostra l'elemento con una
                      // animazione leggera
$("p").slideToggle("fast"); // Dispiega/nasconde l'elemento
                            // con un'animazione veloce
$("p").fadeOut();     // L'elemento sparisce
                      // con una fusione leggera
Altre utilità
⤽
jQuery include molte altre funzioni per facilitare lo sviluppo di applicazioni web, tra i quali:

Copia codice 

// Ottiene il valore della proprietà "color" del CSS
// del primo paragrafo della pagina
$("p").css("color");
// Imposta il valore della proprietà "color" del CSS
$("p").css("color","red");
// Imposta diverse proprietà del CSS su un elemento
$("p").css({color:"red",background:"blue",font-weight:"bold"});
// Nasconde tutti gli elementi in un form
$(mioForm.elements).hide();
// Restituisce "true" se il browser è  una qualche
// versione di Internet Explorer
$.browser.msie
// Restituisce "true" se il browser è  una qualche
// versione di Safari
$.browser.safari
// Ottiene o imposta il valore del elemento "innerHTML"
$("#contenuti").html();
$("#contenuti").html("<h1>Contenuti</h1>Caricando...");
// Aggiunge la classe CSS a tutti gli elementi
// o le rimuove se già era impostato
$("p").toggleClass("selezionato");

Questo articolo mostra solo una frazione delle possibilità dell’eccellente libreria jQuery. Con jQuery, è possibile fare molto di più e molto meglio scrivendo meno codice JavaScript e anche di avere la garanzia assoluta che le applicazioni funzionano altrettanto bene su qualsiasi browser.

Letture di riferimento
La maggior parte delle informazioni e esempi in questo articolo sono state prese dall’eccellente documentazione di jQuery in lingua inglese. Un buon modo per studiare le API (acronimo di Application Programming Interface) di jQuery è quello di accedere alla guida visiva.