JQuery: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m →AJAX: +wl |
m →Versioni: clean up, replaced: lingua=en-US → lingua=en |
||
| (22 versioni intermedie di 17 utenti non mostrate) | |||
Riga 2:
{{Software
|Nome = jQuery
|Logo = JQuery-Logo.svg
|DimensioneLogo = 150
|Screenshot =
|Didascalia =
Line 20 ⟶ 22:
}}{{citazione|scrivi di meno, fai di più.|slogan|write less, do more.|lingua=en}}
'''jQuery''' è una [[Libreria (software)|libreria]] [[JavaScript]] per [[applicazione web|applicazioni web]], distribuita come [[software libero]], distribuito sotto i termini della [[Licenza MIT]].<ref name="jquery-mit" />. Nasce con l'obiettivo di semplificare la selezione, la manipolazione, la gestione degli eventi e l'animazione di elementi [[Document Object Model|DOM]] in pagine [[HTML]], nonché
== Sviluppo ==
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
La selezione degli oggetti DOM è basata sul motore chiamato [https://github.com/jquery/sizzle/wiki Sizzle], un progetto [[Open source|Open Source]] derivato da jQuery<ref>{{Cita web|url=https://blog.jquery.com/2009/01/14/jquery-13-and-the-jquery-foundation/|titolo=jQuery 1.3 and the jQuery Foundation {{!}} Official jQuery Blog|autore=jQuery Foundation- jquery.org|lingua=en|accesso=28 febbraio 2020}}</ref>.
== API ==
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 (informatica)|interprete]] JavaScript del browser.
=== Core ===
Line 44 ⟶ 46:
** 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 (informatica)|plugin]] (funzione <code>extend()</code> e <code>fn.extend()</code>)
* I metodi per eseguire animazioni mediante le funzioni <code>show()</code>, <code>hide()</code> e <code>animate()</code>
Line 88 ⟶ 90:
L'assegnazione di eventi quali click, load, mouseover è gestita in maniera efficace e non invadente.
=== Effetti bidimensionali ===
[[File:Jquery slider.png|alt=Esempio di slider JQuery|centro|miniatura|290x290px|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
Line 95 ⟶ 98:
È 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 ===
Con JQuery si possono creare [[Visita virtuale|visite virtuali]]<ref>{{Cita web|url=https://ourcodeworld.com/articles/read/843/top-7-best-360-degrees-equirectangular-image-viewer-javascript-plugins|titolo=Top 7: Best 360° (Equirectangular) Image Viewer JavaScript Plugins|autore=Carlos Delgado|sito=Our Code World|data=15 gennaio 2019|lingua=en|accesso=15 febbraio 2021}}</ref> e alcuni effetti che simulano il [[web 3D]]<ref>{{Cita web|url=https://bashooka.com/coding/cool-jquery-3d-effect-plugins/|titolo=16 Cool jQuery 3D Effect Plugins – Bashooka|data=15 settembre 2012|lingua=en|accesso=15 febbraio 2021}}</ref>.
[[File:Jquery-3d-gallery.png|alt=Galleria JQuery con effetto 3D|centro|miniatura|330x330px|Galleria JQuery con effetto 3D]]
=== AJAX ===
Line 108 ⟶ 115:
=== Utilità ===
== Caratteristiche ==
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');
Line 119 ⟶ 126:
// l1 e l2 sono oggetti diversi
// ma il loro contenuto è identico
</syntaxhighlight>
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');
</syntaxhighlight>
Concatenazione del codice (''chainability''); quasi ogni
<
var links = $('a');
Line 137 ⟶ 144:
alert( 'clicked!' );
} );
</syntaxhighlight>
Può essere riscritta come segue
<
$("a").css( { color: 'red', width: '150px' } )
.show( '1000' )
Line 147 ⟶ 154:
alert( 'clicked!' );
} );
</syntaxhighlight>
La libreria non collide con altri framework quali [[Prototype JavaScript Framework|Prototype]], MooTools, o YUI, e può essere pertanto utilizzata assieme ad esse.
jQuery vanta una discreta varietà di plugin che ne estendono le funzionalità.<ref>{{Cita web|https://www.npmjs.com/browse/keyword/jquery-plugin|Archivio di plugin per jQuery|30 gennaio 2018|lingua=en}}</ref> 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 (informatica)|widget]], animazioni, transizioni, ecc.
== Versioni ==
{| class="wikitable sortable"
!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<ref>{{Cita web|url=https://www.infoq.com/news/2016/06/jQuery-3|titolo=Long-awaited jQuery 3.0 Brings Slim Build|cognome=Chesters|nome=James|data=15 giugno 2016|editore=infoq.com|accesso=28 gennaio 2017}}</ref>
|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<ref>{{Cita web|titolo=jQuery 3.2.0 Is Out!|opera=jQuery Blog|url=https://blog.jquery.com/2017/03/16/jquery-3-2-0-is-out/|accesso=12 marzo 2018|data=16 marzo 2017}}</ref>
|3.2.1 (20 marzo 2017)
|84.6
|Aggiunto supporto per il recupero dei contenuti degli elementi<code><template></code>e deprecazione di alcuni vecchi metodi.
|-
|3.3
|19 gennaio 2018<ref>{{Cita web|titolo=jQuery 3.3.0 – A fragrant bouquet of deprecations and…is that a new feature?|opera=jQuery Blog|url=https://blog.jquery.com/2018/01/19/jquery-3-3-0-a-fragrant-bouquet-of-deprecations-and-is-that-a-new-feature/|accesso=15 aprile 2019|data=19 gennaio 2018}}</ref>
|3.3.1 (20 gennaio 2018<ref>{{Cita web|titolo=jQuery 3.3.1 – fixed dependencies in release tag|opera=jQuery Blog|url=https://blog.jquery.com/2018/01/20/jquery-3-3-1-fixed-dependencies-in-release-tag/|accesso=15 aprile 2019|data=20 gennaio 2018}}</ref>)
|84.9
|Deprecazione di vecchie funzioni, le funzioni che accettano le classi ora le supportano anche in formato array.
|-
|3.4
|10 aprile 2019<ref>{{Cita web|titolo=jQuery 3.4.0 Released|opera=jQuery Blog|url=https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/|accesso=15 aprile 2019|data=10 aprile 2018}}</ref>
|3.4.1 (1 maggio 2019<ref>{{Cita web|url=https://blog.jquery.com/2019/05/01/jquery-3-4-1-triggering-focus-events-in-ie-and-finding-root-elements-in-ios-10/|titolo=jQuery 3.4.1: triggering focus events in IE and finding root elements in iOS 10|editore=jQuery Foundation|opera=jQuery Blog}}</ref>)
|86.1
|Miglioramenti delle prestazioni <code>nonce</code>e supporto <code>nomodule</code>, correzioni per elementi radio, una correzione minore per la sicurezza.
|-
|3.5
|10 aprile 2020<ref name="blog-350-release">{{Cita web|titolo=jQuery 3.5.0 Released!|opera=jQuery Blog|url=https://blog.jquery.com/2020/04/10/jquery-3-5-0-released/|accesso=11 aprile 2020|data=10 aprile 2020}}</ref>
|3.5.1 (4 maggio 2020<ref>{{Cita web|url=https://blog.jquery.com/2020/05/04/jquery-3-5-1-released-fixing-a-regression/|titolo=jQuery 3.5.1 Released: Fixing a Regression|editore=jQuery Foundation|opera=jQuery Blog}}</ref>)
|87.4
|Correzioni di sicurezza <code>.even()</code>e <code>.odd()</code>metodi <code>jQuery.trim</code>deprecati
|-
|3.6
|2 marzo 2021<ref>{{Cita web|url=https://blog.jquery.com/2021/03/02/jquery-3-6-0-released/|titolo=jQuery 3.6.0 Released! {{!}} Official jQuery Blog|autore=jQuery Foundation- jquery.org|lingua=en|accesso=2022-07-24}}</ref>
|3.6.0 (2 marzo 2021)
|90
|Correzioni di bug e miglioramenti
|}
== Alternative ==
{{vedi anche|HTML5|CSS|JavaScript|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.<ref>{{Cita web|https://css-tricks.com/now-ever-might-not-need-jquery/|(Now More Than Ever) You Might Not Need jQuery|30 gennaio 2018|lingua=en|data=12 luglio 2017|autore=}}</ref>
Nel corso degli anni è nato Vanilla JS, un finto framework JavaScript, il cui scopo è promuovere l'uso di JavaScript senza framework.<ref>{{Cita web|http://vanilla-js.com/|Vanilla JS|30 gennaio 2018|lingua=en|citazione=The Vanilla JS team takes pride in the fact that it is the most lightweight framework available anywhere}}</ref>
Con la nascita di [[HTML5|HTML 5]] e [[CSS|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|Ajax]], cosa che con HTML 4 e CSS 2 era spesso impossibile fare<ref name=":0">{{Cita web|url=https://blog.logrocket.com/5-things-you-can-do-with-css-instead-of-javascript/|titolo=5 things you can do with CSS instead of JavaScript|sito=LogRocket Blog|data=29 ottobre 2019|lingua=en|accesso=9 febbraio 2021}}</ref><ref>{{Cita web|url=https://freefrontend.com/css-gallery/|titolo=49 CSS Galleries|sito=Free Frontend|lingua=en|accesso=9 febbraio 2021}}</ref><ref>{{Cita web|url=https://livecode.com/demo/html5/calculator/|titolo=LiveCode - HTML5 - Calculator App Demo|sito=livecode.com|accesso=9 febbraio 2021}}</ref><ref>{{Cita web|url=https://www.andreapacchiarotti.it/archivio/menu-responsivo.html|titolo=Menù responsivo in HTML e CSS senza JavaScript e jQuery|autore=Andrea Pacchiarotti|sito=Andrea pacchiarotti|accesso=9 febbraio 2021}}</ref>.
== Esempi di uso JQuery ==
<gallery>
File:Jquery-zoom.png|alt=Effetto Zoom JQuery al passaggio del mouse su un'immagine|Effetto Zoom JQuery al passaggio del mouse su un'immagine
File:Jquery-tab-accordion.png|alt=Effetti JQuery accordion e tab|Effetti JQuery accordion e tab
File:Jquery-light.jpg|alt=Effetto JQuery "spotlight" al passaggio del mouse|Effetto JQuery "spotlight" al passaggio del mouse
</gallery>
== Note ==
Line 178 ⟶ 343:
{{Controllo di autorità}}
{{Portale|informatica|software libero}}
| |||