jQuery

jQuery identifica un insieme di librerie software, scritte con il linguaggio JavaScript,
che consentono di scrivere codice efficiente per gestire in modo semplice
gli elementi delle pagine Web, la gestione degli eventi, le animazioni e le interazioni con l'utente.

Le librerie possono essere richiamate all'interno delle pagine HTML con il tag <script>
e l'attributo src, nella sezione <head> usando la sintassi per i file sterni .js contenenti codice JavaScript.
Per esempio:
<script src="www.dennis.com/jquery.js"></script>

Il selettore di jQuery e' lo strumento che consente di identificare
un elemento, un id o una classe all'interno del codice HTML e di applicare
ad essi i metodi del linguaggio jQuery. La sintassi e' simile a quella del CSS,
con l'aggiunta di regole specifiche di jQuery.
Il selettore viene utilizzato come argomento, racchiuso tra virgolette
oppure tra apici, della funzione $ di jQuery.
Esempi:
$("#titolo") selettore di un id di nome titolo
$(".definizione") selettore di una classe di nome definizione
$("p") tutti gli elementi di tag p di una pagina
$("input[name=prezzo") l'elemento di tipo input avente attributo name uguale a prezzo
$(":button") tutti gli elementi di tipo button

Tre selettori particolari
$("*") tutti gli elementi di una pagina HTML
$(this) l'elemento HTML corrente
$(document) l'intero documento HTML

Lo script di questa pagina gestisce gli eventi click sul titolo,
sui termini e sulle definizioni e utilizza i seguenti metodi:
- hide
- show
- addClass (applica uno stile CSS ad un elemento)
- removeClass (rimuove uno stile CSS ad un elemento)

Progetto 1.html

In questo progetto e' stato usato un foglio di stile esterno. In caso si voglia modificare
specifiche proprieta' di uno stile, puo' essere fatto direttamente all'interno
del codice jQuery con il metodo CSS ed eliminando la riga
con il riferimento al file CSS esterno.
Esempio: per applicare uno sfondo giallo si scrive la riga seguente:

$(".definizione").css("background", "yellow");

La pagina Web visualizza una galleria di immagini contenute nella sottocartella images.
I nomi dei file sono formati dalla parola img seguita da un numero progressivo: in questo modo
il passaggio da un'immagine a un'altra e' gestito con un indice i, che si incrementa o decrementa.
L'interfaccia comprende un tag img e due pulsanti (button) per andare avanti e indietro nella galleria.
In questo caso si andra' a usare il metodo attr di jQuery, che ha due argomenti:
il nome dell'attributo e il valore impostato per esso, separati da virgola. Esempio:

$("#foto").attr('src', "images/img" + i + ".jpg");

Lo script gestisce gli eventi click sui pulsanti indietro (id="back") e avanti (id="next").

Progetto 2.html

L'uso degli effetti e' una delle caratteristiche piu' importanti
del linguaggio jQuery, perche' produce interfacce efficaci e dinamiche.
Selettori, eventi ed effetti sono gli aspetti principali delle API
(Application Programming Interface) di jQuery.
Altri esempi di metodi per gli effetti sono:

animate	Esegue un'animazione personalizzata su un elemento HTML
fadeIn, fadeOut	Applica una dissolvenza verso l'opaco (In) e verso il trasparente (Out)
slideDown, slideUp	Apre un elemento con un movimento verso il basso (Down) o lo chiude verso l'alto (Up)
toggle	Mostra un elemento se e' nascosto, e viceversa, lo nasconde se e' visualizzato

La pagina Web contiene un titolo, l'immagine di 3 bottiglie con i nomi di vini
diversi (id="vini") e una mappa con le zone della regione Toscana (id="regione").
Quando l'utente passa con il mouse sopra l'immagine di una bottiglia, provoca
l'evento mouseover e visualizza un'etichetta, con la descrizione del vino,
e con un effetto di dissolvenza lenta: fadeIn('slow').
Allontanando il mouse dall'immagine della bottiglia, si provoca l'evento mouseout
e l'etichetta viene chiusa con un effetto di dissolvenza veloce: fadeout('fast').
Infine, l'effetto applicato all'immagine della Toscana e' di tipo toggle: un clic
ingrandisce l'immagine, un secondo clic la rimpicciolisce.

Progetto 3.html

Librerie jQuery