Breve guida a jQuery

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

1. Introduzione a jQuery

jQuery è un framework realizzato in Javascript per la programmazione di script lato client proprio attraverso il linguaggio con cui è stato realizzato. Grazie a jQuery è possibile realizzare, attraverso pochissime righe di codice, script altrimenti molto complessi che consentono di creare effetti su testo, immagini, controlli di varia natura e di interagire in modo semplice e diretto con i CSS, con AJAX e cosi via.

E' possibile scaricare jQuery gratuitamente dal suo sito ufficiale nell'ultima versione. Una volta scaricato il file jquery.js è possibile richiamarlo all'interno delle proprie pagine Web attraverso il seguente codice:

<script type="text/javascript" src="jquery.js"></script>
Diversamente è possibile richiamare l'ultima versione da remoto direttamente dal sito ufficiale:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Questa breve guida a jQuery non si pone lo scopo di essere esaustiva e di contemplare tutto lo scibile di questo splendido framework, ma di introdurre il lettore al suo utilizzo.

Buona lettura!

2. Pro e contro di jQuery

jQuery non ha intenzione di sostituire Javascript: il suo scopo è quello di semplificare la vita dei javascripters, consentendo di scrivere meno codice e, al contempo, ottenere risultati elevati difficilmente ottenibili programmando "a mano" i propri script.

E' solo una mia considerazione, ma presto jQuery potrebbe diventare uno standard al punto tale da essere integrato direttamente nei browser come "linguaggio nativo": non ci sarà più bisogno di richiamare il file .js scaricandolo o da remoto, ma al momento non è cosi e c'è da tener presente che ogni pagina che richiama jQuery, oltre alle sue splendide funzionalità richiama anche il peso della libreria che, nel momento in cui scrivo, è di 70 Kb.

Usare jQuery per una semplice animazione in un sito che prevede molto traffico è una cattiva scelta. A ciascuno la sua.

3. Fare scripting con jQuery

La sintassi jQuery prevede sempre l'utilizzo della funzione jQuery(), sostituibile utilizzando il simbolo del dollaro, quindi:
$()
E' perfettamente cross-browser, ma ha una particolarità: gli script che vanno eseguiti vanno eseguiti al caricamento della pagina vanno inseriti dopo il codice HTML con cui jQuery stesso deve interagire:
<script type="text/javascript" src="jquery.js"></script>

<div>Codice HTML con cui jQuery deve interagire...</div>

<script type="text/javascript">
// Qui lo script...
</script>
Oppure è necessario utilizzare l'evento load() oppure ready() come nel seguente esempio che colora un testo in rosso:
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#testo").css("color", "#FF0000");
});
</script>

<div id="testo">W jQuery!</div>
La differenza tra load e ready consiste nel fatto che la prima esegue lo script al completo caricamento della pagina, mentre la seconda lo esegue a prescindere dal caricamento e torna quindi molto più utile e frequentemente utilizzata.

4. Selettori jQuery

Nel precedente paragrafo abbiamo notato che abbiamo fatto accesso al layer con ID "testo" attraverso la sintassi:
$("#testo")
che sostituisce a tutti gli effetti la sintassi del DOM:
document.getElementById("testo")
E' possibile accedere anche ad una classe:
$("div.testo")
oppure a tutte le occorrenze di uno stesso tag:
$("div")
Nel caso di tag nidificati, come per i CSS, possiamo accedervi specificando la sequenza degli elementi. Immaginiamo di avere uno "span" all'interno di un "div" e di voler agire solo sullo "span":
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("div span").css("color", "#FF0000");
});
</script>

<div><span>W jQuery</span> :-)</div>
Solo il testo "W jQuery" sarà rosso, mentre il sorriso del colore di default assegnato al "div".

5. Eventi jQuery

Nei precedenti esempi abbiamo esaminato l'evento relativo agli script eseguibili al caricamento della pagina (ready() e load()). Tuttavia, in jQuery esistono diversi altri eventi.

Esaminiamo i principali:
  • ready - caricamento anche parziale della pagina.
  • load - caricamento completo della pagina.
  • click - click su di un elemento.
  • mouseover - passaggio del mouse di un elemento.
  • mouseout - uscita del mouse da un elemento.
  • error - gestione di un eventuale errore.
  • scroll - scrolling della pagina.
  • resize - ridimensionamento della pagina.
  • focus - focus su di un elemento di un form.
  • submit - invio di un form.
Facciamo un esempio che contempla l'evento relativo al click su di un elemento:
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#testo").click(function(){
        alert("Ciao!");
    });
});
</script>

<div id="testo">Clicca qui...</div>
Cliccando sul testo "Clicca qui..." apparirà un alert.

6. jQuery e HTML

jQuery consente di agire dinamicamente sul codice HTML di una pagina attraverso diverse interessanti funzioni, prima tra tutte html() la cui sintassi è la seguente:
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#testo").html("W jQuery!");
});
</script>

<div id="testo"></div>
sostituibile con la funzione text() che, in più, oltre ad impostare un valore può anche restituirlo:
$("#testo").text("W jQuery!");
Abbiamo poi la funzione append() che, come il suo nome lascia ad intendere, aggiunge del testo ad un testo già esistente:
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#testo").append(" ora e per sempre :-)");
});
</script>

<div id="testo">W jQuery</div>
La funzione prepend(), invece, inserisce del testo prima del testo già presente nel layer HTML. La funzione remove() rimuove un elemento, mentre clone() copia l'elemento e lo ripropone.

7. jQuery e CSS

Nei precedenti esempi abbiamo introdotto la funzione css() che, come il suo nome lascia ad intendere, consente di lavorare con i fogli di stile in modo diretto.

La sua sintassi, già esaminata in modo pratico, è la seguente:
$(selettore).css(comando CSS, valore);
Ad esempio, come già visto:
$("#testo").css("color", "#FF0000");
colora un testo, mentre: $("#testo").css("background", "#FF0000"); colora uno sfondo, e cosi via.

jQuery mette a disposizione tra l'altro alcune funzioni stilistiche predefinite, le cui principali sono le seguenti:
  • hide - nasconde un elemento.
  • position - posiziona un elemento.
  • width - imposta o restituisce la larghezza di un elemento.
  • height - imposta o restituisce l'altezza di un elemento.
  • scrollTop - gestisce lo scroll di un elemento verso l'alto.
  • scrollLeft - gestisce lo scroll di un elemento verso sinistra.
Facciamo un esempio più complesso che imposti alcuni stili di un layer e ne gestisca lo scroll:
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#testo").css("overflow", "auto");
    $("#testo").width(300);
    $("#testo").height(200);
    $("#scorri").click(function(){
        $("#testo").scrollTop(150);
    });
});
</script>

<div id="scorri"><b>Scorri cliccando qui...</b></div>
<div id="testo">
W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>
W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>
W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>
W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>
W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>W jQuery!<br>
</div>
Il box scorrerà fino a 150 pixel.

8. jQuery e AJAX

jQuery mette a disposizione un comodo sistema per l'interazione con AJAX attraverso la funzione ajax() la cui sintassi è semplicissima:
$.ajax({
    // Qui il codice...
});
All'interno possiamo usare le seguenti proprietà:
  • type - specifica il metodo di invio della richiesta ed accetta i valori "get" o "post".
  • url - accetta il percorso ed il nome del file lato server che esegue uno script (ASP, PHP, ASP.NET, etc...).
  • data - accoda dei dati allo script.
  • dataType - specifica il tipo di dati trattato, ad esempio "text".
Abbiamo poi gli eventi success ed error che gestiscono, rispettivamente, le operazioni da eseguire in caso di successo o di errore della chiamata.

Approfondiremo l'argomento con degli esempi pratici nella sezione AJAX del sito.

9. Effetti jQuery

Come anticipato, jQuery consente di gestire degli effetti che possono essere impostati su testi, immagini o altri elementi. I principali effetti sono i seguenti:
  • fadeIn - effetto dissolvenza in apparizione.
  • fadeOut - effetto dissolvenza in scomparsa.
  • slideDown - apparizione con effetto slide dal basso.
  • slideUp - scomparsa con effetto slide dall'alto.
Facciamo un esempio di testo a comparsa con effetto dissolvenza:
<script type="text/javascript">
$(document).ready(function(){
    $("#testo").hide();
    $("#testo").fadeIn();
});
</script>

<div id="testo">W jQuery!</div>
Concludiamo dunque con un esempio di scomparsa di un testo con effetto slide, integrando del codice Javascript "tradizionale" con jQuery:
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
function Scompari()
{
    $("#testo").slideUp();
}
$(document).ready(function(){
    window.setTimeout("Scompari()", 3000);
});
</script>

<div id="testo">W jQuery!</div>
L'esempio mostra infatti come far scomparire un testo con una temporizzazione.

TAGS - jquery
I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (105.570)

:: Le espressioni regolari in Javascript (84.488)

:: Gestione delle stringhe in Javascript (73.450)

:: Stampare una pagina col Dhtml (42.491)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (38.658)

:: Menu orizzontale dinamico in Dhtml (36.791)

:: Gli Array in Javascript (35.520)

:: Temporizzazioni Javascript (30.941)

:: Istruzion condizionali in Javascript: if e switch (28.429)

:: DOM: rendere cross-browser il comando innerHTML (27.877)

IN EVIDENZA
DOWNLOAD