jQuery

Da Wikipedia, l'enciclopedia libera.
jQuery
Logo
SviluppatoreJohn Resig
Ultima versione3.2.1 (20 marzo 2017)
Sistema operativoMultipiattaforma
LinguaggioJavaScript
GenereLibreria software (non in lista)
LicenzaGNU GPL, Licenza MIT[1]
(licenza libera)
Sito web
(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.

Le sue caratteristiche permettono agli sviluppatori JavaScript di astrarre le interazioni a basso livello tra interazione e animazione dei contenuti delle pagine. L'approccio di tipo modulare di jQuery consente la creazione semplificata di applicazioni web e versatili contenuti dinamici.

È un software libero, distribuito sotto i termini della Licenza MIT.[1] Al 2018, jQuery risulta la libreria JavaScript più utilizzata su Internet.[2][3]

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.[4][5]

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:

  • 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
  • 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())
  • I metodi per creare e utilizzare liste e code (di oggetti e funzioni)
  • I metodi per estendere il framework mediante plugin (funzione extend() e fn.extend())
  • 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:

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

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:

  • Metodo per gli attributi generici (attr())
  • 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())
  • 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:

  • Per aggiungere e rimuovere elementi alla pagina, o in una posizione specifica
  • Per sostituire elementi, o per circondarli con del nuovo contenuto
  • 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:

  • Per cambiare, rimuovere o aggiungere proprietà grafiche di tutti gli elementi selezionati
  • 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:

  • Effetto fading, la dissolvenza in entrata o uscita
  • Effetto sliding, l'effetto scivolata
  • 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:

  • Per caricare contenuti dinamicamente
    • Funzione di caricamento semplice
    • Funzione di caricamento di codice HTML con inserimento automatico
  • Per eseguire richieste asincrone (con metodo GET/POST)
  • 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 restituire gli elementi voluti.

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

Concatenazione del codice (chainability); quasi ogni funzione, restituisce 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.css( 'width', '150px' );
links.show( 1000 );
links.click( function () {
	alert( 'clicked!' );
} );

Può essere riscritta come segue

$("a").css( { color: 'red', width: '150px' } )
      .show( '1000' )
      .click( function () {
      	alert( 'clicked!' );
      } );

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

jQuery vanta una discreta varietà di plugin che ne estendono le funzionalità.[6] Fra i plugin ufficiali vi è JQuery UI (user interface per jQuery), nato per semplificare ed uniformare la gestione di un'interfaccia grafica composta da temi, widget, animazioni, transizioni, ecc.

Alternative[modifica | modifica wikitesto]

Diversi articoli hanno fatto notare come, sebbene jQuery fosse una libreria indispensabile per svolgere determinati compiti con JavaScript, con le versioni più recenti di JavaScript e dei browser, le funzionalità di jQuery sono diventate funzionalità standard di JavaScript.[7]

Esiste a tal proposito un sito internet che permette di visualizzare come usare JavaScript per sostituire ogni singola funzionalità di jQuery.[8]

Nel corso degli anni è nato Vanilla JS, un finto framework JavaScript, il cui scopo è promuovere l'uso di JavaScript senza framework.[9]

Note[modifica | modifica wikitesto]

  1. ^ a b (EN) License, su jQuery Foundation. URL consultato il 3 giugno 2015.
  2. ^ (EN) Usage of JavaScript libraries for websites, su w3techs.com. URL consultato il 30 gennaio 2018.
  3. ^ (EN) Libscore, su libscore.com. URL consultato il 30 gennaio 2018.
  4. ^ (EN) John Resig (admin), su Blog di jQuery. URL consultato il 30 gennaio 2018.
  5. ^ (EN) Dave Methvin, su Blog di jQuery. URL consultato il 30 gennaio 2018.
  6. ^ (EN) Archivio di plugin per jQuery, su npmjs.com. URL consultato il 30 gennaio 2018.
  7. ^ (EN) (Now More Than Ever) You Might Not Need jQuery, su css-tricks.com, 12 luglio 2017. URL consultato il 30 gennaio 2018.
  8. ^ (EN) You might not need jquery, su youmightnotneedjquery.com. URL consultato il 30 gennaio 2018.
  9. ^ (EN) Vanilla JS, su vanilla-js.com. URL consultato il 30 gennaio 2018.
    «The Vanilla JS team takes pride in the fact that it is the most lightweight framework available anywhere».

Voci correlate[modifica | modifica wikitesto]

Altri progetti[modifica | modifica wikitesto]

Collegamenti esterni[modifica | modifica wikitesto]

Controllo di autoritàGND (DE7681087-2