Guida di riferimento a jQuery

La libreria jQuery è costituita da codice che viene eseguito non appena caricato e che:

Crea un oggetto jQuery che diventa un oggetto globale (una proprietà di window)
Crea una funzione globale jQuery che è il cuore della libreria
Crea un alias per entrambe che è il segno del dollaro

Modifica degli elementi DOM

Aggiunge ai metodi nativi degli elementi che compongono il DOM nuovi metodi che consentono di modificarli con maggiore facilità
Aggiunge metodi che consentono di scrivere codice più compatto.

Interattività ed espandibilità:

aggiunge nuovi eventi
rende più flessibile la gestione degli eventi
Semplifica la creazione di nuovi elementi da aggiungere al DOM
Consente di utilizzare le migliaia di plugin ricuperabili su Internet.

Qui di seguito le principali proprietà, i principali metodi ed eventi che jQuery aggiunge alla programmazione Javascript.

Eventi jQuery

Tutti i metodi accettano come parametro una funzione che viene eseguita in risposta dell'evento. Se invocati senza parametri provocano programmaticamente l'evento stesso

Metodo	Descrizione
`bind()`	Deprecato nella versione 3.0 di jQuery. Al suo posta va usato il metodo `on()`.
`blur()`	Associa un gestore eventi per l'evento blur (perdita del focus)
`change()`	Associa un gestore eventi per l'evento change
`click()`	Associa un gestore eventi per l'evento click
`dblclick()`	Associa un gestore eventi per l'evento doppio clic
`delegate()`	Deprecato nella versione 3.0. Al suo posta va usato il metodo `on()`.
`focus()`	Associa un gestore eventi per l'evento focus
`focusin()`	Associa un gestore eventi per l'evento focusin
`focusout()`	Associa un gestore eventi per l'evento focusout
`hover()`	Associa due gestori di eventi per l'evento di passaggio del mouse (il primo per l'entrata, il secondo per l'uscita)
`keydown()`	Associa un gestore eventi per l'evento keydown
`keypress()`	Associa un gestore eventi per l'evento keypress
`keyup()`	Associa un gestore eventi per l'evento keyup
`live()`	Rimosso nella versione 1.9.
`load()`	Rimosso nella versione 3.0. Associa un gestore eventi per l'evento load
`mousedown()`	Associa un gestore eventi per l'evento mousedown
`mouseenter()`	Associa un gestore eventi per di evento mouseenter
`mouseleave()`	Associa un gestore eventi per l'evento mouseleave
`mousemove()`	Associa un gestore eventi per l'evento mousemove
`mouseout()`	Associa un gestore eventi per l'evento mouseout
`mouseover()`	Associa un gestore eventi per l'evento mouseover
`mouseup()`	Associa un gestore eventi per l'evento mouseup
`off()`	Rimuove i gestori eventi associati con il metodo `on()`
`on()`	Associa un gestore di eventi (funzione) a uno o più eventi
`one()`	Come `on()` ma risponde all'evento solo una volta.
`ready()`	Si applica a `$(document)`. Specifica una funzione da eseguire quando il DOM è completamente caricato
`resize()`	Associa un gestore eventi per l'evento resize
`scroll()`	Associa un gestore eventi per l'evento scroll
`select()`	Associa un gestore eventi per l'evento select
`submit()`	Associa un gestore eventi per l'evento submit
`toggle()`	Rimosso dalla versione 1.9.
`trigger()`	Attiva tutti gli eventi associati agli elementi selezionati
`triggerHandler()`	Trigger di tutte le funzioni associate a un evento specificato per gli elementi selezionati
`unbind()`	Deprecato nella versione 3.0. Uso il `off()` metodo invece. Rimuove un gestore eventi aggiunto da elementi selezionati
`undelegate()`	Deprecato nella versione 3.0. Uso il `off()` metodo invece. Rimuove un gestore eventi per gli elementi selezionati, ora o in futuro
`unload()`	Rimosso nella versione 3.0. Associa un gestore eventi per l'evento unload

jQuery: l'oggetto event

Quando un evento colpisce un oggetto, viene richiamato la funzione che gestice quell'evento. Alla funzione viene passato un parametro che è un oggetto di tipo Event che contiene informazioni sull'evento stesso.

Metodo / proprietà	Descrizione
`event.currentTarget`	Nella fase di bubbling (propagazione dell'evento agli elementi parent) indica l'elemento bersaglio dell'evento.
`event.data`	Può contentre dati facoltativi passati a un metodo di gestione dell'evento
`event.delegateTarget`	Restituisce l'elemento a cui era associato il gestore di eventi attualmente chiamato.
`event.isDefaultPrevented()`	Restituisce se l'azione di default dell'evento è stata bloccata da una precedente chimata a `preventDefault()`
`event.isImmediatePropagationStopped()`	Restituisce se stopImmediatePropagation è stato chiamato per l'evento
`event.isPropagationStopped()`	Restituisce se stopPropagation è stato chiamato per l'evento
`event.namespace`	Restituisce che lo spazio dei nomi specificato quando l'evento è stato attivato
`event.pageX`	Restituisce la posizione del mouse rispetto al bordo sinistro del documento
`event.pageY`	Restituisce la posizione del mouse rispetto al bordo superiore del documento
`event.preventDefault()`	Blocca l'azione predefinita dell'evento
`event.relatedTarget`	Nella gestione dell'evento hover restituisce l'elemento in cui il mouse è entrato o da cui il mouse è uscito.
`event.result`	Contiene il valore ultimo/precedente restituito da un gestore di eventi attivato dall'evento specificato
`event.stopImmediatePropagation()`	Impedisce la chiamata di altri gestori di eventi per quell'evento
`event.stopPropagation()`	Impedisce che l'evento si propagighi e raggiunga i parents del target dell'evento.
`event.target`	Restituisce quale elemento DOM ha generato l'evento
`event.timeStamp`	Restituisce il numero di millisecondi trascorsi 1° gennaio 1970, quando viene attivato l'evento
`event.type`	Restituisce il tipo di evento è stato attivato
`event.which`	Restituisce quale pulsante del mouse o tasto di tastiera è stato premuto per l'evento

Metodi HTML e CSS

I metodi in questo gruppo si comportano sia come metodi setter che impostano, cioè, un valore, che come metodi getter che restituiscono, cioè, un valore. Quando agiscono come setter svolgono la loro azione su tutti gli elementi contenuti nell'oggetto jQuery a cui sono applicati e restituiscono l'oggetto stesso come risulta modificato dal metodo. Quando agiscono come getter recuperano il valore cercato dal primo elemento del set di elementi che compone l'oggetto jQuery.

Metodo.	Descrizione
`addClass()`	Aggiunge una o più classi agli elementi selezionati
`after()`	Inserisce un contenuto dopo gli elementi selezionati
`append()`	Inserisce uno o più contenuti come elementi figli alla fine degli elementi selezionati
`appendTo()`	Inserisce gli elementi selezionati come ultimi figli di un elemento HTML
`attr()`	Imposta o restituisce il valore di un attributo degli elementi selezionati
`before()`	Inserisce il contenuto prima di elementi selezionati
`clone()`	Crea una copia degli elementi selezionati
`css()`	Imposta o restituisce una o più proprietà di stile per gli elementi selezionati
`detach()`	Rimuove selezionati elementi (mantiene dati ed eventi)
`empty()`	Rimuove tutti i nodi figli (elementi e nodi di testo) dagli elementi selezionati
`hasClass()`	Controlla se uno qualsiasi degli elementi selezionati ha la classe specificata
`height()`	Imposta o restituisce l'altezza in pixel degli elementi selezionati
`html()`	Imposta o restituisce il contenuto degli elementi selezionati
`innerHeight()`	Restituisce l'altezza di un elemento (include il padding ma non il margin)
`innerWidth()`	Restituisce la larghezza di un elemento (include il padding ma non il margin)
`insertAfter()`	Inserisce elementi HTML dopo gli elementi selezionati
`insertBefore()`	Inserisce gli elementi HTML prima gli elementi selezionati
`offset()`	Imposta o restituisce le coordinate di offset per gli elementi selezionati (rispetto al documento)
`offsetParent()`	Restituisce il primo elemento padre posizionato
`outerHeight()`	Restituisce l'altezza di un elemento (include padding e border)
`outerWidth()`	Restituisce la larghezza di un elemento (include padding e border)
`position()`	Restituisce la posizione (relative all'elemento padre) di un elemento
`prepend()`	Inserisce il contenuto all'inizio degli elementi selezionati
`prependTo()`	Consente di inserire elementi HTML all'inizio degli elementi selezionati
`prop()`	Imposta o restituisce valori di proprietà degli elementi selezionati
`remove()`	Rimuove gli elementi selezionati da proprio parent e dal documento
`removeAttr()`	Rimuove uno o più attributi dagli elementi selezionati
`removeClass()`	Rimuove una o più classi dagli elementi selezionati
`removeProp()`	Rimuove una proprietà impostata dal metodo prop()
`replaceAll()`	Sostituisce gli elementi selezionati con nuovi elementi HTML
`replaceWith()`	Sostituisce gli elementi con nuovi contenuti selezionati
`scrollLeft()`	Imposta o restituisce la posizione della barra di scorrimento orizzontale degli elementi selezionati
`scrollTop()`	Imposta o restituisce la posizione della barra di scorrimento verticale degli elementi selezionati
`text()`	Imposta o restituisce il contenuto di testo degli elementi selezionati
`toggleClass()`	Attiva/disattiva l'aggiunta/rimozione di una o più classi da elementi selezionati
`unwrap()`	Rimuove l'elemento padre degli elementi selezionati
`val()`	Imposta o restituisce l'attributo value degli elementi selezionati (per gli elementi form)
`width()`	Imposta o restituisce la larghezza degli elementi selezionati
`wrap()`	Esegue il wrapping di elementi HTML intorno ogni elemento selezionato
`wrapAll()`	Esegue il wrapping di elementi HTML intorno a tutti gli elementi selezionati
`wrapInner()`	Esegue il wrapping di elementi HTML intorno al contenuto di ogni elemento selezionato

Modifica del set di elementi e ricerca

I metodi in questo gruppo servono ad aggiungere o ad elimeinare elementi da un set, oppure a scorreli tutti per modificarli. In linea di massima restituiscono il set di elemente modificato.

Metodo.	Descrizione
`add()`	Aggiunge elementi all'insieme di elementi corrispondenti
`children()`	Restituisce tutti figli dell'elemento selezionato
`closest()`	Restituisce il primo antenato dell'elemento selezionato
`contents()`	Restituisce la collezione dei diretti discendenti (children, figli) dell'elemento selezionato (compresi i nodi di testo e commento)
`each()`	Esegue una funzione per ognuno degli elementi contenuti nel set
`eq()`	Restituisce un elemento del set con uno specifico di indice (0 il primo, 1 il secondi, e così via)
`filter()`	Aggiunge un filtro basato su un selettore. La selezione vien limitata al set di elemente a cui il metodo è applicato.
`find()`	Esegue una ricerca masata su un selettore tra gli elementi discendenti dell'elemento selezionato. Restituisce il set di elementi così individuato.
`first()`	Restituisce il primo elemento del set. Equivale a `eq(0)`.
`has()`	Restituisce tutti gli elementi che hanno uno o più elementi all'interno del loro
`is()`	Verifica se nel set di elementi è compreso il selettore passato come parametro. Restituisce true se almeno uno di questi elementi corrisponde agli argomenti specificati
`last()`	Restituisce l'ultimo elemento degli elementi selezionati.
`map()`	Elabora ogni elemento nel set abbinati tramite una funzione e restituisce un nuovo set.
`next()`	Restituisce l'elemento di pari livello (sibling) immediatamente successivo all'elemento selezionato.
`nextAll()`	Restituisce tutti gli elementi di pari livello successivi dell'elemento selezionato
`nextUntil()`	Restituisce tutti gli elementi di pari livello successivi tra due argomenti specificati
`not()`	Rimuovere gli elementi dall'insieme di elementi corrispondenti
`offsetParent()`	Restituisce il primo elemento parent posizionato (`position: absolute` o `position: fixed` o `position: relative`)
`parent()`	Restituisce l'elemento padre diretto dell'elemento selezionato
`parents()`	Restituisce tutti gli elementi del predecessore dell'elemento selezionato
`parentsUntil()`	Restituisce tutti gli elementi predecessore tra due argomenti specificati
`prev()`	Restituisce l'elemento di pari livello precedente dell'elemento selezionato
`prevAll()`	Restituisce tutti i precedenti fratello elementi dell'elemento selezionato
`prevUntil()`	Restituisce gli elementi di pari livello tutti i precedenti tra due argomenti specificati
`siblings()`	Restituisce tutti gli elementi di pari livello dell'elemento selezionato
`slice()`	Riduce l'insieme di elementi abbinati a un sottoinsieme specificato da un intervallo di indici

Selettori jQuery

Selettore	Esempio	Seleziona
`*`	`$("*")`	Tutti gli elementi
`#id`	`$("#lastname")`	L'elemento con id = "cognome"
`.class`	`$(".intro")`	Tutti gli elementi con class = "intro"
`.class,.class`	`$(".intro,.demo")`	Tutti gli elementi con la classe "intro" e tutti gli elementi con classe "demo"
`element`	`$("p")`	Tutti gli elementi `<p>`
`el1,el2,el3`	`$("h1,div,p")`	Tutti i `<h1>`, `<div>` e `<p>` elementi

`:first`	`$("p:first")`	Il primo elemento `<p>`
`:last`	`$("p:last")`	L'ultimo elemento `<p>`
`:even`	`$("tr:even")`	Tutte le righe ( `<tr>` ) pari di una tabella
`:odd`	`$("tr:odd")`	Tutti gli elementi `<tr>` dispari

`:first-child`	`$("p:first-child")`	Tutti gli elementi `<p>` che sono il primo figlio del loro parent
`:first-of-type`	`$("p:first-of-type")`	Tutti gli elementi `<p>` che sono il primo elemento di tipo `<p>` del loro parent
`:last-child`	`$("p:last-child")`	Tutti gli elementi `<p>` che sono l'ultimo figlio del loro parent
`:last-of-type`	`$("p:last-of-type")`	Tutti gli elementi `<p>` che sono l'ultimo elemento `<p>` del loro parent
`:nth-child(n)`	`$("p:nth-child(2)`")	Tutti gli elementi `<p>` che sono il 2 ° figlio del loro parent
`:nth-last-child(n)`	`$("p:nth-last-child(2)`")	Tutti gli elementi `<p>` che sono il 2 ° figlio del loro parent, contando dall'ultimo figlio
`:nth-of-type(n)`	`$("p:nth-of-type(2)`")	Tutti gli elementi `<p>` che sono il 2 ° figlio di tipo `<p>` del loro parent
`:nth-last-of-type(n)`	`$("p:nth-last-of-type(2)`")	Tutti gli elementi `<p>` che sono il 2 ° figlio di tipo `<p>` del loro parent, contando dall'ultimo figlio
`:only-child`	`$("p:only-child")`	Tutti gli elementi `<p>` che sono l'unico figlio del loro parent
`:only-of-type`	`$("p:only-of-type")`	Tutti gli elementi `<p>` che sono l'unico figlio, di tipo `<p>`, del loro parent

`parent > child`	`$("div > p")`	Tutti gli elementi `<p>` che sono discendenti diretti (figli) di un elemento `<div>`
`parent descendant`	`$("div p")`	Tutti gli elementi `<p>` che sono discendenti di un elemento `<div>`
`element + next`	`$("div + p")`	L'elemento `<p>` che sono accanto a ogni elementi `<div>`
`element ~ siblings`	`$("div ~ p")`	Tutti gli elementi `<p>` di pari livello di un elemento `<div>`

`:eq(index)`	`$("ul li:eq(3)`")	Il quarto elemento in un elenco (l'indice inizia da 0)
`:gt(no)`	`$("ul li:gt(3)`")	Gli elementi con un indice maggiore di 3 (ci0è dal quinto in poi)
`:lt(no)`	`$("ul li:lt(3)`")	Gli elementi con un indice inferiore a 3 (cioè fino la terzo).
`:not(selector)`	`$("input:not(:empty)`")	Tutti elementi `<input>` che non sono vuoti

`:header`	`$(":header")`	Tutti i titoli `<h1>`, `<h2>`...
`:animated`	`$(":animated")`	Tutti gli elementi animati
`:focus`	`$(":focus")`	L'elemento che ha il focus
`:contains(text)`	`$(":contains('Hello')`")	Tutti gli elementi che contengono il testo "Hello"
`:has(selector)`	`$("div:has(p)`")	Tutti gli elementi `<div>` che hanno come discendente al meno un elemento `<p>`
`:empty`	`$(":empty")`	Tutti gli elementi che sono vuoti
`:parent`	`$(":parent")`	Tutti gli elementi che sono un genitore di un altro elemento
`:hidden`	`$("p:hidden")`	Tutti gli elementi `<p>` nascosti
`:visible`	`$("table:visible")`	Tutte le tabelle visibili
`:root`	`$(":root")`	Elemento radice del documento
`:lang(language)`	`$("p:lang(de)`")	Tutti gli elementi `<p>` con un valore di attributo lang che inizia con "de"

`[attribute]`	`$("[href]")`	Tutti gli elementi con un attributo href
`[attribute=value]`	`$("[href='default.htm']")`	Tutti gli elementi con un valore dell'attributo href uguale a "default. htm"
`[attribute!=value]`	`$("[href!='default.htm']")`	Tutti gli elementi con un valore dell'attributo href non è uguale a "default. htm"
`[attribute$=value]`	`$("[href$='.jpg']")`	Tutti gli elementi con un valore dell'attributo href che termina con ". jpg"
`[attribute\|=value]`	`$("[title\|='Tomorrow']")`	Tutti gli elementi con un valore di attributo title uguale a 'Domani', o a partire da 'Domani' seguita da un trattino
`[attribute^=value]`	`$("[title^='Tom']")`	Tutti gli elementi con un valore di attributo title che inizia con "Tom"
`[attribute~=value]`	`$("[title~='hello']")`	Tutti gli elementi con un valore di attributo title contenente la specifica parola "hello"
`[attribute*=value]`	`$("[title*='hello']")`	Tutti gli elementi con un valore di attributo title contenente la parola "hello"

`:input`	`$(":input")`	Tutti gli elementi `<input>`
`:text`	`$(":text")`	Tutti elementi `<input>` con type = "testo"
`:password`	`$(":password")`	Tutti elementi `<input>` con type = "password"
`:radio`	`$(":radio")`	Tutti elementi `<input>` con type = "radio"
`:checkbox`	`$(":checkbox")`	Tutti elementi `<input>` con type = "checkbox"
`:submit`	`$(":submit")`	Tutti elementi `<input>` con type = "submit"
`:reset`	`$(":reset")`	Tutti elementi `<input>` con type = "reset"
`:button`	`$(":button")`	Tutti elementi `<input>` con type = "button"
`:image`	`$(":image")`	Tutti elementi `<input>` con type = "immagine"
`:file`	`$(":file")`	Tutti elementi `<input>` con type = "file"
`:enabled`	`$(":enabled")`	Tutti gli elementi `<input>` che non hanno l'attributo `disabled` attivo
`:disabled`	`$(":disabled")`	Tutti gli elementi `<input>` che hanno l'attributo `disabled` attivo
`:selected`	`$(":selected")`	Tutti elementi `<input>` selezionati
`:checked`	`$(":checked")`	Tutti elementi `<input>` con type = "checkbox" selezionati