Appunti JQuery

JQuery: una panoramica

jQuery è una delle librerie più popolari e ampiamente utilizzate. jQuery rende facile trovare gli elementi di un documento e quindi manipolarli aggiungendo contenuto, modificando attributi HTML e proprietà CSS, definendo gestori di eventi ed eseguendo animazioni. Dispone inoltre di utilità Ajax per effettuare richieste HTTP in modo dinamico e funzioni di utilità generiche per lavorare con oggetti e array.

Caratteristiche di jQuery

Come suggerisce il nome, la libreria jQuery è focalizzata sulle query. Una query tipica utilizza un selettore CSS per identificare un insieme di elementi del documento e quindi restituisce un oggetto che rappresenta quegli elementi. Questo oggetto restituito fornisce molti metodi utili per operare sugli elementi corrispondenti come gruppo. Quando possibile, questi metodi restituiscono l'oggetto su cui sono invocati, consentendo l'utilizzo di un succinto idioma di concatenamento di metodi.

Queste caratteristiche sono al centro della potenza e dell'utilità di jQuery:

• Una sintassi espressiva (selettori CSS) per fare riferimento agli elementi nel documento
• Un metodo di query efficiente per trovare l'insieme di elementi del documento che corrispondono a un selettore CSS
• Un utile insieme di metodi per manipolare gli elementi selezionati
• Potenti tecniche di programmazione funzionale per operare su insiemi di elementi come un gruppo, piuttosto che uno alla volta
• Un idioma succinto (metodo concatenato) per esprimere sequenze di operazioni

Inizio con jQuery

Questo libro inizia con un'introduzione a jQuery che mostra come eseguire semplici query e lavorare con i risultati. I capitoli che seguono spiegano:

• Come impostare gli attributi HTML; stili e classi CSS; valori del modulo HTML; e contenuto dell'elemento, geometria e dati
• Come modificare la struttura di un documento inserendo, sostituendo, avvolgendo ed eliminando elementi
• Come utilizzare il modello di eventi cross-browser di jQuery
• Come produrre effetti visivi animati con jQuery
• Utilità Ajax di jQuery per effettuare richieste HTTP con script
• Le funzioni di utilità di jQuery
• La sintassi completa dei selettori di jQuery e come utilizzare i metodi di selezione avanzati di jQuery
• Come estendere jQuery utilizzando e scrivendo plugin
• La libreria dell'interfaccia utente jQuery

La fine di questo libro è un rapido riferimento a tutti i metodi e le funzioni di jQuery.

Nozioni di base su jQuery

La libreria jQuery definisce una singola funzione globale denominata. Questa funzione è usata così frequentemente che la libreria jQuery() definisce anche il simbolo globale $ come scorciatoia per essa. Questa singola funzione globale con due nomi è la funzione di query centrale per jQuery. Ecco, ad esempio, come chiediamo l'insieme di tutti i tag <div> in un documento:

var div = $("div");

Il valore restituito da questa funzione rappresenta un insieme di zero o più elementi DOM ed è noto come oggetto jQuery. Nota che jQuery() è una funzione di fabbrica piuttosto che un costruttore: restituisce un oggetto appena creato, ma non viene utilizzato con la parola chiave new. Gli oggetti jQuery definiscono molti metodi per operare sugli insiemi di elementi che rappresentano e la maggior parte di questo libro è dedicata alla spiegazione di tali metodi. Di seguito, ad esempio, c'è il codice che trova, evidenzia e visualizza rapidamente tutti i tag <p> nascosti che hanno una classe "more":

$("p.more").css("background-color","gray").show("fast");

Il metodo css() opera sull'oggetto jQuery restituito da $() e restituisce lo stesso oggetto in modo che il metodo show() possa essere invocato successivamente in una "catena di metodi" compatta. Questo idioma di concatenamento di metodi è comune nella programmazione jQuery.

Come altro esempio, il codice seguente trova tutti gli elementi nel documento che hanno la classe CSS "hide" e registra un gestore di eventi su ciascuno di essi. Quel gestore di eventi viene richiamato quando l'utente fa clic sull'elemento, facendolo "scivolare verso l'alto" lentamente e scomparendo:

$(".hide").click(function() { 
    $(this).slideUp("slow"); 
});

Modi di richiamare jQuery()

Ci sono quattro modi diversi per richiamare la funzione jQuery().

Il primo e più comune modo per invocare $( on) è passargli un selettore CSS (una stringa). Quando viene chiamato in questo modo, restituisce l'insieme di elementi del documento corrente che corrispondono al selettore. jQuery supporta la maggior parte della sintassi del selettore CSS3, oltre ad alcune estensioni proprie. I dettagli completi della sintassi del selettore jQuery sono in "Selettori jQuery" a pagina 89. Se si passa un elemento o un oggetto jQuery come secondo argomento a $(), restituisce solo i discendenti corrispondenti dell'elemento (o degli elementi) specificato. Questo secondo valore di argomento facoltativo definisce il punto (o i punti) di partenza per la query ed è spesso chiamato contesto.

Il secondo modo per invocare $() è passargli un oggetto Element, Document o Window. Chiamato in questo modo, avvolge semplicemente l'elemento, il documento o la finestra in un oggetto jQuery e restituisce tale oggetto, consentendo di utilizzare i metodi jQuery per manipolare l'elemento anziché utilizzare metodi DOM non elaborati. È comune vedere i programmi jQuery chiamare $(document) o $(this), per esempio. Gli oggetti jQuery possono rappresentare più di un elemento in un documento e puoi anche passare un array di elementi a $(). In questo caso, l'oggetto jQuery restituito rappresenta l'insieme di elementi nell'array.

Il terzo modo per invocare $() è passargli una stringa di testo HTML. Quando lo fai, jQuery crea l'elemento (o gli elementi) HTML descritto da quel testo e poi restituisce un oggetto jQuery che rappresenta quegli elementi. jQuery non inserisce automaticamente gli elementi appena creati nel documento, ma i metodi jQuery descritti nel Capitolo 3 ti permettono di inserirli facilmente dove vuoi. Nota che non puoi passare testo semplice quando invochi $() in questo modo, o jQuery penserà che stai passando un selettore CSS. Per questo stile di invocazione, la stringa che passi a $() deve includere almeno un tag HTML con parentesi angolari.

Quando viene invocato in questo terzo modo, $() accetta un secondo argomento opzionale. È possibile passare un oggetto Document per specificare il documento a cui associare gli elementi. (Se stai creando elementi da inserire in un <iframe>, ad esempio, dovrai specificare esplicitamente l'oggetto Document di quel frame.) Oppure puoi passare un secondo argomento che specifica i nomi e i valori di attributi da impostare sugli elementi appena creati come oggetto:

var img = $("", // Crea un nuovo tag 
    { 
        src: url, // Con questo attributo src
        alt: desc // E questo attributo alt
    }
);

Infine, il quarto modo per invocare $() è passargli una funzione. Se lo fai, la funzione che passi verrà eseguita quando...