jQuery

Da Wikipedia, l'enciclopedia libera.
jQuery
Logo
Sviluppatore John Resig
Ultima versione 1.12.4 (20 maggio 2016) e 2.2.4 (20 maggio 2016)
Sistema operativo Multipiattaforma
Linguaggio JavaScript
Genere Libreria software (non in lista)
Licenza GNU GPL, Licenza MIT[1]
(Licenza libera)
Sito web jquery.com
(EN)

« write less, do more. »

(IT)

« scrivi di meno, fai di più. »

(slogan)

jQuery è una libreria JavaScript per applicazioni web. Nasce con l'obiettivo di semplificare la selezione, la manipolazione, la gestione degli eventi e l'animazione di elementi DOM in pagine HTML, nonché implementare funzionalità AJAX.

È un software libero, distribuito sotto i termini della Licenza MIT.[1]

Sviluppo[modifica | modifica wikitesto]

Pubblicato per la prima volta nel gennaio 2006 da John Resig, è un progetto tuttora attivo e in evoluzione, gestito da un gruppo di sviluppatori guidato da Dave Methvin. Attualmente, anche Microsoft e Nokia forniscono di serie jQuery sulle proprie piattaforme[2]. Microsoft lo fornisce con le più recenti versioni di Visual Studio per semplificare lo sviluppo di pagine ASP.NET AJAX e ASP.NET MVC, mentre Nokia le ha integrate nel proprio widget di runtime web.

API[modifica | modifica wikitesto]

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 wikitesto]

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 elementi nativi (funzioni get() e index())
  3. I metodi per creare e utilizzare liste e code (di oggetti e funzioni)
  4. I metodi per estendere il framework mediante plugin (funzione extend() e fn.extend())
  5. I metodi per eseguire animazioni mediante le funzioni show(), hide() e animate()

Selettori[modifica | modifica wikitesto]

I selettori sono gli strumenti utilizzati per ottenere l'accesso agli elementi HTML della pagina, utilizzando la stessa sintassi dei selettori Cascading Style Sheet, ovvero:

  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 in modo gerarchico, mediante l'utilizzo di parole chiave come ancestor, sibling, prev e altre
  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 wikitesto]

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 wikitesto]

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 wikitesto]

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 wikitesto]

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 wikitesto]

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 wikitesto]

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

È possibile definire facilmente effetti personalizzati specificando la proprietà CSS da manipolare (per esempio: altezza, bordo e altro), come è pure possibile specificare la durata dell'effetto e una funzione di callback da eseguire dopo l'animazione.

AJAX[modifica | modifica wikitesto]

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

  1. Per caricare contenuti dinamicamente
    • Funzione di caricamento semplice
    • 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 gestibili in modo semplificato, per il completamento dei form di immissione, la gestione degli errori e l'invio dei dati.

Utilità[modifica | modifica wikitesto]

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

Caratteristiche[modifica | modifica wikitesto]

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. Grazie a questo, 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 molti plugin, tra i quali è necessario citare quello ufficiale, jQueryUI (user interface), che fornisce un'accattivante interfaccia grafica, includendo fogli di stile, finestre modali con ridimensionamento e traslazione, calendari e barre di scorrimento.

Note[modifica | modifica wikitesto]

  1. ^ a b (EN) License, su jQuery Foundation. URL consultato il 3 giugno 2015.
  2. ^ ScottGu's Blog - jQuery and Microsoft

Voci correlate[modifica | modifica wikitesto]

Altri progetti[modifica | modifica wikitesto]

Collegamenti esterni[modifica | modifica wikitesto]

Controllo di autorità GND: (DE7681087-2
informatica Portale Informatica: accedi alle voci di Wikipedia che trattano di informatica