JQuery/Introduzione

Per cominciare

La libreria jQuery è immagazzinata in un singolo file JavaScript, che contiene tutti i metodi jQuery, e che può essere scaricata dal sito jquery.com in due formati:

development: non compresso, da 252Kb, utilizzabile in fase di sviluppo
production: compresso, da 32Kb, da utilizzare online, che garantisce una notevole leggerezza per il server.

Non è necessaria nessuna installazione, è sufficiente includere il file "jquery-versione.js" direttamente nella pagina web in questo modo:

<script src="jquery-versione.js"></script>

avendo cura di inserire il codice all’interno della sezione <head>.

In alternativa è possibile, senza scaricare il package, includere un riferimento alla libreria disponibile in remoto sul sito ufficiale del progetto:

<script src="http://code.jquery.com/jquery-latest.js"></script>

Oppure richiamare, sempre da remoto, la libreria ospitata sui server di Google:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery.min.js"></script>

o di Microsoft:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

Il vantaggio di richiamare da remoto la libreria è che l’utente potrebbe già aver scaricato il file in questione nella cache del browser e per questo gli verrebbe evitato di doverlo riscaricare con conseguente diminuzione del tempo di caricamento della pagina.

Le basi di jQuery

I comandi jQuery si basano sull’assunto che il documento HTML contiene oggetti che possono essere richiamati attraverso i loro id o classi, esattamente come in CSS.

La sintassi di base è $(selector).action()

il simbolo del dollaro è un alias per jQuery
il selettore, tra parentesi tonde, serve a selezionare elementi HTML
l’action è l’azione che si vuole applicare all’elemento selezionato

Essendo $ un alias, sarebbe possibile usare anche la sintassi jQuery(), ma per brevità si usa $().

È buona pratica di programmazione far eseguire il codice jQuery dopo che la pagina sia stata caricata. Per questo ci viene in aiuto la funzione $(document).ready(function())

$(document).ready(function(){
   // qui vanno i metodi jQuery...
});

che è un listener di eventi che viene richiamato quando il DOM è pronto. Questo permette anche di inserire il codice Javascript (quindi anche jQuery) prima del tag body, nella sezione head. E’ possibile usare anche questa sintassi ultracompatta:

$(function(){
   // metodi jQuery...
});

Alternativamente si può usare il metodo $(window).load(): la differenza sta nel fatto che questo viene richiamato quando tutti gli elementi (anche quelli grafici) sono stati già richiamati, e non solo il document. Infatti i browser basati su webkit (Chrome e Safari) “sanno” la dimensione di un’immagine solo dopo che questa è stata caricata.

Per rendere più facile la manutenzione del codice, è consigliabile creare un file separato con estensione .js dove mettere tutti i metodi jQuery, e richiamarlo nella sezione head di ogni pagina che ne fa uso in questo modo:

<script src="my_jquery_functions.js">