1. Introduzione a jQuery

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, tra cui uno dei più importanti è sicuramente jQuery.

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.

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 dallo sviluppatore.

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-browsser!)
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à fornite, che andremo a vedere in questa guida, vanno V 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 è l'opportununità di utilizzare i numerosi plugin
messi a disposizione dalla comunità e scaricabili all'indirizzo plugins.jquery.com.

Il framework è in continuo aggiornamento, di passo in passo con i nuovi motori javascript dei browser.

Il primo passo

Per prima cosa scaricare l'ultima versione del framework dal sito ufficiale. Una volta scaricata la libreria sarà necessario includerla all'interno della nostra pagina web:

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

In alternativa è possibile, senza scaricare il package, includere un riferimento alla libreria hostata in remoto sui siti preposti.

2. 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 nostri esempi utilizzeremo sempre $(),
piuttosto che l'espressione estesa.

Vediamo un esempio dello stesso codice:

var a = jQuery("a");
//seleziono tutti i link tramite la funzione jQuery()
  
var b = $("a");
// seleziono tutti i link tramite la funzione $()

Selezionare un elemento della pagina mediante ID

Come dicevamo jQuery permette di ridurre sensibilmente il codice scritto.
Una delle necessità più frequenti per i programmatori Javascript consiste nel recuperare un elemento all'interno del DOM tramite identificatore ID.
Vediamo come avverrebbe questo con Javascript e confrontiamolo con jQuery:

document.getElementById("id_ele");
//selezione elemento con id=id_ele
  
$("#id_ele");
//stessa cosa con jQuery

Come vedete il codice che si è dovuto scrivere si è ridotto sensibilmente.

Concatenare il codice

Un altro punto a favore di questo framework è la possibilità di concatenare codice
(cd. esecuzione a catena),
funzionalità permessa dal fatto che quasi tutte i metodi utilizzati da jQuery ritornano l'oggetto dal quale sono stati chiamati.

Oltre che alla riduzione di righe scritte, questo comporta anche una migliore lettura del codice scritto, cosa di non poca rilevanza se chi legge non è chi ha scritto il sorgente.

La concatenazione può essere effettuata mediante il punto (.) e mettendo il punto e virgola (;) solamente al metodo finale.

Facciamo un esempio: proviamo a selezionare un link tramite il suo ID ed effettuiamo un po' di operazioni concatenando diversi metodi.

  
$("a#id_link").css("color","red").bind("click", evento_click).show("1200");

Che dire? jQuery è molto più sintetico e fa risparmiare parecchio codice e tempo.

Aggiungere elementi al DOM

Un'altra interessante funzionalità offerta da jQuery è quella di poter aggiungere con facilità degli elementi al DOM.
Come parametro alla funzione $() viene passato del codice HTML, con tag espressi sia in forma aperta che in forma chiusa. Come al solito vediamo un esempio chiarificatore:

var blocco_da_inserire=$("<div><p>Mr Webmaster</p></div>");

Per aggiungere l'elemento appena creato alla nostra pagina sarà sufficiente "appenderlo" nel punto desiderato:

blocco_da_inserire.appendTo("#contenitore");

3. Evitare conflitti con altre librerie

Nella creazione del nostro sito 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.


Con jQuery il problema nasce soprattutto dal fatto che molte librerie utilizzano il simbolo del dollaro come funzione o come variabile. Per questo motivo jQuery mette a disposizione la funzione noConflict() la quale esclude l'utilizzo del dollaro per jQuery "liberandolo" per altre librerie. In sostanza jQuery "rinuncia" al suo alias $().


Il sistema che viene utilizzato è quello di non utilizzare $() come alias, ma di scrivere sempre jQuery(). Vediamo un esempio:

<script>
jQuery.noConflict();
// Usa jQuery con jQuery(...)
jQuery(document).ready(function(){ 
  jQuery("#foto").show("slow");      
});       
</script>

Assicurarsi che la pagina sia pronta

Un elemento può essere manipolato solo quando è già stato caricato nel DOM.

Normalmente, non c'è bisogno di attendere che tutta la pagina sia completamente caricata
(per esempio che tutte le immagini siano state caricate),
a volte basta solamente che sia pronto il DOM.

A questo proposito jQuery utilizza Il metodo ready()
un evento incorporato che esegue l'operazione appena possibile
senza attendere che tutta la pagina sia stata caricata.

Per utilizzare questo metodo esistono più sintassi tra loro equivalenti
La più utilizzata, anche se la meno prolissa, è la seguente:

  
$(document).ready(function() {

$("p.class1").css("background-color","yellow");
alert('DOM caricato'); 
// funzioni jQuery sicuramente eseguite

 });