JQuery: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
Annullata la modifica 94112838 di 93.33.170.15 (discussione) Etichetta: Annulla |
m →Versioni: clean up, replaced: lingua=en-US → lingua=en |
||
(31 versioni intermedie di 23 utenti non mostrate) | |||
Riga 2:
{{Software
|Nome = jQuery
|Logo = JQuery
|DimensioneLogo = 150
|Screenshot =
|Didascalia =
|Sviluppatore = John Resig
|UltimaVersione =
|DataUltimaVersione =
|UltimaVersioneBeta =
|DataUltimaVersioneBeta =
|SistemaOperativo = multipiattaforma
|Linguaggio =
|Genere = Libreria software
|Licenza = [[GNU GPL]], [[Licenza MIT]]<ref name="jquery-mit">{{Cita web|url = https://jquery.org/license/|titolo = License|sito = jQuery Foundation|lingua = en|accesso = 3 giugno 2015}}
Line 16 ⟶ 19:
|SoftwareLibero = sì
|Lingua =
|SitoWeb =
}}{{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é
Le sue caratteristiche permettono agli sviluppatori
== 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'[[
=== Core ===
Il core di jQuery fornisce:
=== Selettori ===
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:
=== Attributi ===
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:
=== DOM Traversing ===
Per risalire a elementi padre, figli, per i nodi foglia o per elementi successivi, il framework propone numerosi metodi e funzioni per
=== Manipolazione ===
La manipolazione del DOM è semplificata da numerosi metodi:
=== CSS ===
Per controllare lo stile degli elementi, in maniera semplificata e standardizzata. Sono forniti i metodi:
=== Eventi ===
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:
È 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 ===
La gestione delle chiamate asincrone ([[AJAX]]) è davvero semplificata, e sono fornite le funzioni:
* 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à ===
== 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(
var l2 = $(
// 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
$(
</syntaxhighlight>
Concatenazione del codice (''chainability''); quasi ogni
<
var links = $(
links.css(
links.
links.show(
links.
alert( 'clicked!' );
} );
</syntaxhighlight>
Può essere riscritta come segue
<
$("a").css( { color: 'red', width: '150px' } )
.show( '1000' )
.click( function () {
alert( 'clicked!' );
} );
</syntaxhighlight>
La libreria
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 163 ⟶ 327:
== Voci correlate ==
* [[
== Altri progetti ==
Line 169 ⟶ 333:
== Collegamenti esterni ==
* {{Collegamenti esterni}}
* {{
* {{cita web|http://ejohn.org/|Sito dello sviluppatore John Resig|lingua=en}}
* {{cita web|
* {{cita web|http://www.jqueryitalia.org|
* {{
{{Framework per applicazioni web}}
{{Controllo di autorità}}
{{Portale|informatica|software libero}}
[[Categoria:Librerie JavaScript]]
|