JQuery/Introduzione
Per cominciare
[modifica | modifica sorgente]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
[modifica | modifica sorgente]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">