Primi passi con jQuery

jQuery è una potente libreria JavaScript che negli ultimi anni ha raggiunto un'elevatissima popolarità. Il segreto del suo successo sta nel fatto che jQuery rende semplice ciò che semplice non è, secondo il motto "fai di più, scrivi meno codice". In questo articolo spiegheremo come muovere i primi passi con jQuery, fornendo di fatto un'introduzione a questa libreria.

Installare jQuery

jQuery viene fornita in due formati: un formato compresso e minimizzato, più leggero e quindi più veloce da scaricare nel browser, il cui file prende il nome di jquery-versione.min.js e un formato per lo studio del sorgente non compresso nè minimizzato, e quindi più pesante dal nome jquery-versione.js, dove per versione si intende il numero di versione di jQuery.

Possiamo sia scegliere di scaricare tali file dal sito di jQuery oppure di usare un sistema CDN che contenga il file che ci interessa. Al momento il sistema CDN più popolare è quello di Google. Per inserire l'ultima versione di jQuery, possiamo usare questo snippet:

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

Quando inseriamo jQuery dobbiamo fare in modo che la libreria venga prima dei nostri script nel sorgente, in questo modo:

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

Se non seguiamo quest'ordine, il browser restituirà degli errori JavaScript, in quanto jQuery verrebbe caricato dopo.

I selettori e la scorciatoia $

jQuery usa i selettori CSS, sia ufficiali che proprietari, per selezionare gli elementi nell'albero del documento. Per esempio in una struttura HTML come questa:

<ul id="test">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

possiamo usare la catena di selettori di jQuery per esempio per operare sul primo elemento della lista. In jQuery, una catena di selettori inizia sempre con la scorciatoia $:

var A = $('#test li:first-child').text();
alert(A); // visualizza la stringa 'A'

Il codice precedente è suddiviso in tre parti:

1. l'alias/scorciatoia $ (riferimento a jQuery)
2. la catena di selettori ((#test li:first-child))
3. un metodo che opera sull'elemento selezionato, in questo caso text(), che restituisce il nodo di testo dell'elemento.

La catena di selettori e metodi è virtualmente infinita. Per esempio, se avessimo voluto selezionare prima la prima voce di lista e aggiungervi una classe CSS e quindi la seconda voce con una seconda classe, avremmo scritto:

$('#test li:first-child').addClass('test1').next().addClass('test2');

Ossia:

1. seleziona la prima voce ($('#test li:first-child'))
2. aggiungi la classe CSS test1 (addClass('test1'))
3. spostati all'elemento successivo (next())
4. aggiungi la classe CSS test2 (addClass('test2'))

Come si può vedere, una conoscenza di base di HTML e CSS è sufficiente per cominciare ad usare jQuery.

Il documento è pronto?

JavaScript ha bisogno che tutto il documento sia caricato nella sua completezza per poter cominciare ad operare. Capita spesso infatti che un'immagine o un video blocchino l'esecuzione dei nostri script perchè la struttura del DOM non è ancora completa. jQuery risolve brillantemente il problema usando l'evento ready() associato all'oggetto document:

$(document).ready(function() {
   // esecuzione del codice della pagina
});

In questo caso il nostro codice verrà eseguito quando effettivamente il documento è caricato, evitandoci problemi con i nostri script.

Altre caratteristiche di jQuery

Con jQuery si può inoltre:

1. gestire completamente gli eventi JavaScript
2. gestire completamente AJAX
3. creare animazioni, effetti visivi e altro ancora
4. gestire la programmazione orientata agli oggetti
5. lavorare in modo avanzato con gli array

e molto altro...

Riferimenti

Oltre al sito ufficiale di jQuery, potete trovare molti riferimenti nella nostra Guida jQuery.