Jquery è una libreria javascript molto potente che ci permette di estendere le potenzialità e funzionalità delle nostre pagine web con animazioni ed effetti vari.
Su Internet si possono trovare un infinità di tutorial a riguardo, ma che io sappia, non c’è molto in Italiano; dunque vorrei provare a condividerne la mia conoscenza con te, con una sorta di “guida al jquery“, basata su semplici esempi pratici piuttosto che concetti teorici.
Preparazione
Senza indugiare oltre, vai su http://jquery.com/ e scarica l’ultima versione di jquery (al momento è la 1.3.2).
Quindi sposta il file jquery-1.3.2.min.js appena scaricato nella cartella dove andremo a fare i nostri primi esperimenti; nella stessa cartella aggiungi anche un file HTML vuoto.
Tutto quello che devi fare adesso per utilizzare la libreria, è includerla nella sezione <head> del codice HTML in questo modo.
<head> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> </head>
Notare che se avessi spostato il file jquery-1.3.2.min.js in una sottocartella avresti dovuto scrivere:
<script type="text/javascript" src="NOMECARTELLA/jquery-1.3.2.min.js"></script>
Adesso puoi cominciare a scrivere il tuo primo semplice script per vedere se tutto funziona.
Test di funzionamento
Di seguito all’inclusione di jQuery, aggiungi un altro tag <script> e scrivi al suo interno il primo (fondamentale) codice jquery.
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// fai qualcosa quando la pagina è stata caricata
});
</script>
</head>
Quando si scrive un codice jquery, è importante cominciare con la scritta $(document).ready(function() { per indicare che tutto ciò che è scritto dopo la parentesi graffa (e prima della chiusura }); ), verrà eseguito solo quando la pagina sarà completamente caricata.
Spostati momentaneamente nel <body> per aggiungere un link da usare come pulsante per azionare lo script.
<a href="#" id="prova">Funziona?</a>
Visto che dobbiamo solamente testare il funzionamento della libreria, facciamo qualcosa di molto semplice.
$(document).ready(function() {
$("#prova").click(function() {
alert("Certo che funziona!");
return false;
});
});
Ecco la spiegazione a grandi linee del codice. Quando viene fatto click su $(“#prova”), cioè, l’elemento con ID “prova“, esegue una funzione che mostra un messaggio di alert che dice: Certo che funziona!
Nota: il comando return false; non è indispensabile ai fini della funzione, serve solo ad evitare che cliccando, l’utente venga realmente reindirizzato alla pagina indicata nel href del link (in questo caso # farebbe scrollare improvvisamente la pagina verso l’alto).
Se appare l’alert significa che jquery funziona correttamente!
Anche se per ora il codice scritto non ti risulta molto chiaro, con qualche altro esempio e un minimo di pratica, capirai quanto jQuery sia effettivamente semplice.
Mostra e nascondi elementi
Per ora sei riuscito a far apparire un messaggio di alert, che come effetto non è poi un granchè, proviamo dunque con qualcosa di più interessante 
.
Per prima cosa c’è bisogno degli elementi HTML da manipolare.
<a href="#" id="prova2">Fatti vedere!</a> <span class="hide" style="display: none">Eccomi.</span>
Un link con ID prova2 e uno span con classe hide che però ho nascosto con style=”display: none” (avrei potuto fare lo stesso da un file css esterno).
Vogliamo fare in modo che cliccando sul link “Fatti vedere!”, appaia lo span con la scritta Eccomi.
Vediamo il codice jquery. Ricordati che deve essere incluso nel solito $(document).ready(function() {.
$(document).ready(function() {
//... altro codice
$("#prova2").click(function() {
//scrivi qui cosa succede dopo il click
});
});
Come prima, ho usato l’evento .click sul link per far partire la funzione. Ma hai fatto caso che lo span che dobbiamo far apparire ha una classe anziché un ID? Come li distinguo in jquery? Semplicissimo, esattamente come nel CSS: “#” sta per ID e “.” sta per classe. Quindi $(“.hide”) rappresenterà l’elemento (o gli elementi) con classe “hide”.
$("#prova2").click(function() {
$(".hide").fadeIn();
return false;
});
Per far apparire un elemento che è inizialmente nascosto, ci sono molti modi in jquery, io ho voluto usare il .fadeIn(). Se vuoi puoi provare anche con .show() che mostra l’elemento immediatamente, senza alcuna “transizione”.
Parametri
Come ultima cosa per oggi vediamo di passare qualche parametro al fadeIn() per allungarne la durata dell’effetto. I parametri di una funzione vanno inseriti nelle parentesi tonde quando questa viene chiamata.
$(".hide").fadeIn( PARAMETRI DELLA FUNZIONE );
Ovviamente, ogni funzione supporta solo un certo tipo di parametri che andranno scritti con una certa formattazione, con attenzione a virgole, virgolette, parentesi graffe, ect.
In questo caso, però, vogliamo solo impostare il tempo di durata dell’effetto fadeIn, che essendo un parametro numerico (espresso in millisecondi), basterà scriverlo nelle parentesi senza ulteriore formattazione.
$("#prova3").click(function() {
$(".hide2").fadeIn(3000);
return false;
});
Proviamo con 3000, cioè 3 secondi.
Fine (per ora)
Questa era la prima “lezione” di jquery, spero sia stata di tuo gradimento, perché ho intenzione di farne altre. Se hai bisogno di chiarimenti o vuoi fare qualche critica, un commento è ben gradito. Stay tuned! 
Sottoscrivi il nostro Feed
2 Commenti
11:42
Ciao, trovo interessante questo progetto, non conosco nulla di javascript ma cercherò di seguire i tuoi articoli, sperando di arrivare alla fine e aver capito un po jquery.
Ti aggiungo ai preferiti, buon lavoro
Matteo
23:35
Grazie a te per la fiducia.
Vedrò di fare del mio meglio per risultare il più comprensibile possibile, comunque vai tranquillo che jQuery è davvero semplice se conosci un po’ di HTML e CSS.