jQuery

Da Wikipedia, l'enciclopedia libera.
JQuery
Logo di JQuery
Sviluppatore John Resig
Ultima versione 1.9.1 (4 febbraio 2013)
Sistema operativo Multipiattaforma
Linguaggio JavaScript
Genere Libreria software (non in lista)
Licenza GNU GPL, Licenza MIT[1]
(Licenza libera)
Sito web http://jquery.com/
(EN)
« write less, do more. »
(IT)
« scrivi di meno, fai di più. »
(slogan)

jQuery è una libreria di funzioni (framework) Javascript, cross-browser per le applicazioni web, che si propone come obiettivo quello di semplificare la programmazione lato client delle pagine HTML.

Pubblicato, per la prima volta il 22 agosto 2005 da John Resig, ha raggiunto la versione 1 (stabile) il 26 agosto dell'anno successivo.

Tramite l'uso della libreria jQuery è possibile, con poche righe di codice, effettuare svariate operazioni, come ad esempio ottenere l'altezza di un elemento, o farlo scomparire con effetto dissolvenza.

Anche la gestione degli eventi è completamente standardizzata, automatica; stessa cosa per quanto riguarda l'utilizzo di AJAX, in quanto sono presenti alcune funzioni molto utili e veloci che si occupano di istanziare i giusti oggetti ed effettuare la connessione e l'invio dei dati.

API[modifica | modifica sorgente]

Il framework fornisce metodi e funzioni per gestire al meglio aspetti grafici e strutturali come posizione di elementi, effetto di click su immagini, manipolazione del Document Object Model e altro ancora, mantenendo la compatibilità tra browser diversi e standardizzando gli oggetti messi a disposizione dall'interprete javascript del browser.

Core[modifica | modifica sorgente]

Il core di jQuery fornisce:

  1. I costruttori per l'utilizzo della libreria stessa
    • Per ottenere elementi tramite un selettore (vedere sotto)
    • Per ottenere un elemento referenziandolo come parametro
    • Per creare ex novo un elemento partendo da codice HTML grezzo
  2. I metodi e le proprietà per accedere agli elementi contenuti in un oggetto jQuery
    • Per conoscere il numero di elementi (funzione size() oppure proprietà length)
    • Per iterare ogni elemento (funzione each())
    • Per conoscere il selettore utilizzato o l'elemento DOM referenziato (proprietà selector o context)
    • Per ottenere e manipolare il/gli elementi nativi (funzioni get() e index())
  3. I metodi per creare e utilizzare liste e code (di oggetti o anche funzioni)
  4. I metodi per estendere il framework mediante plugin (funzione extend() e fn.extend())
  5. I metodi per eseguire della animazioni tramite le funzioni show(),hide() e animate()

Selettori[modifica | modifica sorgente]

I selettori sono gli strumenti utilizzati per ottenere o puntare gli elementi HTML della pagina, utilizzando la stessa sintassi dei selettori Cascading Style Sheet.

  1. Per selezionare un elemento in base al suo id (#immagine_24)
  2. Per selezionare uno o più elementi in base alla classe (.thumb oppure div.modale oppure .class1.subclass)
  3. Per selezionare gerarchicamente (mediante l'utilizzo di parole chiave come ancestor, sibling, prev, etc)
  4. Per selezionare in base a pseudo-classi (:first, :last, :not, etc)
  5. Per selezionare in base ad attributi o contenuti (:contain, :has, :hidden, [type="text"], etc)

Attributi[modifica | modifica sorgente]

Gli attributi sono ottenuti o modificati in maniera diversa a seconda del browser; jQuery aiuta lo sviluppatore offrendo un'unica funzione di frontend valida sia come getter (ottenere un valore), sia come setter (impostare un valore), a seconda che sia specificato o no un parametro:

  1. Metodo per gli attributi generici (attr())
  2. Metodi per le classi
    • Per conoscere se un elemento appartiene ad una specifica classe (hasClass())
    • Per impostare o rimuovere una classe (addClass(), removeClass() e lo switch toggleClass())
  3. Metodi per il contenuto
    • Per il codice HTML, come la proprietà innerHTML (html())
    • Per il contenuto testuale (text())
    • Per il valore, solitamente per i campi di un form, che siano campi testuali, campi multiriga, liste dropdown o checkbox (val())

DOM Traversing[modifica | modifica sorgente]

Per risalire a elementi padre, figli, per i nodi foglia o per elementi successivi, il framework propone numerosi metodi e funzioni per attraversare e scorrere il DOM del documento.

Manipolazione[modifica | modifica sorgente]

La manipolazione del DOM è semplificata da numerosi metodi:

  1. Per aggiungere e rimuovere elementi alla pagina, o in una posizione specifica
  2. Per sostituire elementi, o per circondarli con del nuovo contenuto
  3. Per eliminare tutti gli elementi contenuti in un certo nodo, o per copiarli

CSS[modifica | modifica sorgente]

Per controllare lo stile degli elementi, in maniera semplificata e standardizzata. Sono forniti i metodi:

  1. Per cambiare, rimuovere o aggiungere proprietà grafiche di tutti gli elementi selezionati
  2. Per ottenere e sostituire velocemente proprietà solitamente difficili da manipolare
    • Lo scroll di pagina o di un elemento
    • Le dimensioni (height() e width())
    • Le dimensioni interne (escludendo quindi il margine)
    • L'offset rispetto ai bordi

Eventi[modifica | modifica sorgente]

Il framework riconosce gli oggetti di tipo event e provvede a modificare le loro proprietà rendendoli uniformi, semplificando la loro gestione, la loro propagazione, e fornendo un'utile modalità per impedire al browser di continuare l'esecuzione (ad esempio sulla onclick di un link). L'assegnazione di eventi quali click, load, mouseover è gestita in maniera efficace e non invadente.

Effetti[modifica | modifica sorgente]

Gli effetti messi a disposizione dal framework, servono a manipolare la visibilità degli elementi selezionati. È possibile mostrarli o nasconderli con vari effetti, tra i quali:

  1. Effetto fading, la dissolvenza in entrata o uscita
  2. Effetto sliding, l'effetto scivolata
  3. Nascondimento o visualizzazione piatta, istantanea

È possibile definire facilmente effetti personalizzati specificando la proprietà css da manipolare (può essere l'altezza, il bordo, o altro), come è pure possibile specificare la durata dell'effetto e una funzione di callback da eseguire dopo l'animazione.

AJAX[modifica | modifica sorgente]

La gestione delle chiamate asincrone è davvero semplificata, e sono fornite le funzioni:

  1. Per caricare contenuti dinamicamente
    • Funzione di caricamento piatto
    • Funzione di caricamento di codice HTML con inserimento automatico
  2. Per eseguire richieste asincrone
    • Con metodo GET
    • Con metodo POST
  3. Per l'interazione con javascript
    • Funzione per caricare un oggetto JSON
    • Funzione per caricare un file javascript remoto ed eseguirlo automaticamente

Anche gli eventi AJAX sono comodamente gestiti, per il completamento, gli errori e l'invio.

Utilità[modifica | modifica sorgente]

Il framework fornisce anche scorciatoie per gestire vettori, per la trim di stringhe e per il riconoscimento di browser e oggetti/funzioni.

Caratteristiche[modifica | modifica sorgente]

L'oggetto principale, di nome jQuery, è genericamente utilizzato tramite il suo alias, il carattere $, per mantenere uniformità con la libreria Prototype.

// Tutti i link
var l1 = jQuery("a");
var l2 = $("a");
 
// l1 e l2 sono oggetti diversi
// ma il loro contenuto è identico

I selettori, in jQuery, utilizzano la sintassi dei selettori css; sono quindi concatenabili e molto precisi nel ritornare gli elementi voluti.

// Ritorna tutte le immagini di classe class1 e/o class3
$("img.class1,img.class3");

Concatenazione del codice (chainability); quasi ogni funzione, ritorna lo stesso oggetto jQuery dalla quale è stata chiamata. Le righe di codice si riducono sensibilmente.

var links = $("a");
 
links.css( "color", "red" );
links.bind( "click", myFunctionPointer );
links.show( "1000" );
links.css( "width", "150px" );

Può essere riscritta come segue

$("a")
	.css({ color : "red", width : "150px" })
	.bind( "click", myFunctionPointer )
	.show( "1000" );

La libreria è compatibile con altri framework quali Prototype, MooTools, o YUI, e può essere pertanto utilizzata assieme ad esse.

Inoltre, sono disponibili moltissimi plugin, tra i quali è necessario citare quello ufficiale, jQueryUI (user interface): esso provvede a fornire una accattivante interfaccia grafica, includendo fogli di stile, finestre modali con resizing e moving, calendari e scrollbar.

Note[modifica | modifica sorgente]

  1. ^ Licenze di jQuery

Voci correlate[modifica | modifica sorgente]

Altri progetti[modifica | modifica sorgente]

Collegamenti esterni[modifica | modifica sorgente]