jQuery

framework JavaScript

jQuery è una libreria JavaScript per applicazioni web, distribuita come software libero, distribuito sotto i termini della Licenza MIT.[1]. Nasce con l'obiettivo di semplificare la selezione, la manipolazione, la gestione degli eventi e l'animazione di elementi DOM in pagine HTML, nonché semplificare l'uso di funzionalità AJAX, la gestione degli eventi e la manipolazione dei CSS.

jQuery
software
Logo
Logo
GenereLibreria software (non in lista)
SviluppatoreJohn Resig
Data prima versionegennaio 2006
Ultima versione3.7.1 (28 agosto 2023)
Sistema operativoMultipiattaforma
LinguaggioJavaScript
LicenzaGNU GPL, Licenza MIT[1]
(licenza libera)
Sito webjquery.com
(EN)

«write less, do more.»

(IT)

«scrivi di meno, fai di più.»

Le sue caratteristiche permettono agli sviluppatori JavaScript di astrarre le interazioni a basso livello con i contenuti delle pagine HTML. L'approccio di tipo modulare di jQuery consente la creazione semplificata di applicazioni web e contenuti dinamici versatili. Nel 2020, jQuery risulta la libreria JavaScript più utilizzata in Internet, ovvero è presente nel 74,4% dei primi 10 milioni di siti Internet più popolari secondo W3Techs[2].

Sviluppo

modifica

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[3].

La selezione degli oggetti DOM è basata sul motore chiamato Sizzle, un progetto Open Source derivato da jQuery[4].

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.

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

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

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

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

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

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

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 bidimensionali

modifica
 
Esempio di slider JQuery

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.

Effetti tridimensionali

modifica

Con JQuery si possono creare visite virtuali[5] e alcuni effetti che simulano il web 3D[6].

 
Galleria JQuery con effetto 3D

La gestione delle chiamate asincrone (AJAX) è 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

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

Caratteristiche

modifica

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 metodo restituisce lo stesso oggetto jQuery dal quale è stata chiamato. Grazie a questo, il codice è molto più leggibile.

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à.[7] 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.

Versioni

modifica
Versione Versione iniziale Ultimo aggiornamento Dimensioni ridotte (KB) Note aggiuntive
1.0 26 agosto 2006 Prima versione stabile
1.1 14 gennaio 2007
1.2 10 settembre 2007 1.2.6 54.5
1.3 14 gennaio 2009 1.3.2 55.9 Sizzle Selector Engine introdotto nel core
1.4 14 gennaio 2010 1.4.4 76.7
1.5 31 gennaio 2011 1.5.2 83.9 Gestione della richiamata differita, riscrittura del modulo ajax
1.6 3 maggio 2011 1.6.4 89.5 Significativi miglioramenti delle prestazioni per le funzioni attr () e val ()
1.7 3 novembre 2011 1.7.2 (21 marzo 2012) 92.6 Nuove API per eventi: .on () e .off (), mentre le vecchie API sono ancora supportate.
1.8 9 agosto 2012 1.8.3 (13 novembre 2012) 91.4 Sizzle Selector Engine riscritto, animazioni migliorate e flessibilità $ (html, props).
1.9 15 gennaio 2013 1.9.1 (4 febbraio 2013) 90.5 Rimozione di interfacce deprecate e pulizia del codice
1.10 24 maggio 2013 1.10.2 (3 luglio 2013) 90.9 Correzioni di bug incorporate e differenze segnalate dai cicli beta 1.9 e 2.0
1.11 24 gennaio 2014 1.11.3 (28 aprile 2015) 93.7
1.12 8 gennaio 2016 1.12.4 (20 maggio 2016) 94.9
2.0 18 aprile 2013 2.0.3 (3 luglio 2013) 81.7 Eliminato il supporto di IE 6–8 per i miglioramenti delle prestazioni e la riduzione delle dimensioni dei file
2.1 24 gennaio 2014 2.1.4 (28 aprile 2015) 82.4
2.2 8 gennaio 2016 2.2.4 (20 maggio 2016) 83.6
3.0 9 giugno 2016[8] 3.0.0 (9 giugno 2016) 84.3 Promesse/A + supporto per Deferreds, $ .ajax e $ .when, .data () compatibile con HTML5
3.1 7 luglio 2016 3.1.1 (23 settembre 2016) 84.7 jQuery.readyException aggiunta, gli errori del gestore pronto ora non vengono silenziati
3.2 16 marzo 2017[9] 3.2.1 (20 marzo 2017) 84.6 Aggiunto supporto per il recupero dei contenuti degli elementi<template>e deprecazione di alcuni vecchi metodi.
3.3 19 gennaio 2018[10] 3.3.1 (20 gennaio 2018[11]) 84.9 Deprecazione di vecchie funzioni, le funzioni che accettano le classi ora le supportano anche in formato array.
3.4 10 aprile 2019[12] 3.4.1 (1 maggio 2019[13]) 86.1 Miglioramenti delle prestazioni noncee supporto nomodule, correzioni per elementi radio, una correzione minore per la sicurezza.
3.5 10 aprile 2020[14] 3.5.1 (4 maggio 2020[15]) 87.4 Correzioni di sicurezza .even()e .odd()metodi jQuery.trimdeprecati
3.6 2 marzo 2021[16] 3.6.0 (2 marzo 2021) 90 Correzioni di bug e miglioramenti

Alternative

modifica
  Lo stesso argomento in dettaglio: HTML5, CSS, JavaScript e jQuery UI.

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.[17]

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

Con la nascita di HTML 5 e CSS 3 alcune possibilità come la creazione di gallerie d'immagini, effetti e menu a tendina sono fattibili senza l'utilizzo di JQuery e/o JQuery UI e/o Ajax, cosa che con HTML 4 e CSS 2 era spesso impossibile fare[19][20][21][22].

Esempi di uso JQuery

modifica
  1. ^ a b (EN) License, su jQuery Foundation. URL consultato il 3 giugno 2015.
  2. ^ Usage Statistics and Market Share of JavaScript Libraries for Websites, February 2020, su w3techs.com. URL consultato il 28 febbraio 2020.
  3. ^ (EN) JS Foundation- js.foundation, The jQuery Team | jQuery Foundation, su jquery.org. URL consultato il 28 febbraio 2020.
  4. ^ (EN) jQuery Foundation- jquery.org, jQuery 1.3 and the jQuery Foundation | Official jQuery Blog, su blog.jquery.com. URL consultato il 28 febbraio 2020.
  5. ^ (EN) Carlos Delgado, Top 7: Best 360° (Equirectangular) Image Viewer JavaScript Plugins, su Our Code World, 15 gennaio 2019. URL consultato il 15 febbraio 2021.
  6. ^ (EN) 16 Cool jQuery 3D Effect Plugins – Bashooka, su bashooka.com, 15 settembre 2012. URL consultato il 15 febbraio 2021.
  7. ^ (EN) Archivio di plugin per jQuery, su npmjs.com. URL consultato il 30 gennaio 2018.
  8. ^ James Chesters, Long-awaited jQuery 3.0 Brings Slim Build, su infoq.com, 15 giugno 2016. URL consultato il 28 gennaio 2017.
  9. ^ jQuery 3.2.0 Is Out!, in jQuery Blog, 16 marzo 2017. URL consultato il 12 marzo 2018.
  10. ^ jQuery 3.3.0 – A fragrant bouquet of deprecations and…is that a new feature?, in jQuery Blog, 19 gennaio 2018. URL consultato il 15 aprile 2019.
  11. ^ jQuery 3.3.1 – fixed dependencies in release tag, in jQuery Blog, 20 gennaio 2018. URL consultato il 15 aprile 2019.
  12. ^ jQuery 3.4.0 Released, in jQuery Blog, 10 aprile 2018. URL consultato il 15 aprile 2019.
  13. ^ jQuery 3.4.1: triggering focus events in IE and finding root elements in iOS 10, in jQuery Blog, jQuery Foundation.
  14. ^ jQuery 3.5.0 Released!, in jQuery Blog, 10 aprile 2020. URL consultato l'11 aprile 2020.
  15. ^ jQuery 3.5.1 Released: Fixing a Regression, in jQuery Blog, jQuery Foundation.
  16. ^ (EN) jQuery Foundation- jquery.org, jQuery 3.6.0 Released! | Official jQuery Blog, su blog.jquery.com. URL consultato il 24 luglio 2022.
  17. ^ (EN) (Now More Than Ever) You Might Not Need jQuery, su css-tricks.com, 12 luglio 2017. URL consultato il 30 gennaio 2018.
  18. ^ (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»
  19. ^ (EN) 5 things you can do with CSS instead of JavaScript, su LogRocket Blog, 29 ottobre 2019. URL consultato il 9 febbraio 2021.
  20. ^ (EN) 49 CSS Galleries, su Free Frontend. URL consultato il 9 febbraio 2021.
  21. ^ LiveCode - HTML5 - Calculator App Demo, su livecode.com. URL consultato il 9 febbraio 2021.
  22. ^ Andrea Pacchiarotti, Menù responsivo in HTML e CSS senza JavaScript e jQuery, su Andrea pacchiarotti. URL consultato il 9 febbraio 2021.

Voci correlate

modifica

Altri progetti

modifica

Collegamenti esterni

modifica
Controllo di autoritàGND (DE7681087-2