JQuery: differenze tra le versioni

Versione delle 17:54, 25 gen 2018

Versione delle 02:21, 30 gen 2018

Riga 20:

'''jQuery''' è una [[Libreria (software)|libreria]] [[JavaScript]] per [[applicazione web|applicazioni web]]. 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é implementare funzionalità [[AJAX]].

Le sue caratteristiche permettono agli sviluppatori JavascriptJavaScript 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 Webweb e versatili contenuti dinamici.

È un [[software libero]], distribuito sotto i termini della [[Licenza MIT]].<ref name="jquery-mit" /> SecondoAl analisi del Web2018, èjQuery di gran lungarisulta la più utilizzata libreria diJavaScript supportopiù utilizzata attualmentesu nei sitiInternet.<ref>{{Cita web|url=https://w3techs.com/technologies/overview/javascript_library/all|titolo=Usage of JavaScript libraries for websites|30 gennaio 2018|lingua=en}}</ref><ref>{{Cita web|url=http://libscore.com/#libs|titoloLibscore|30 gennaio 2018|lingua=Libscoreen}}</ref>.

== 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 [[Dave Methvin]].<ref>{{Cita web|https://blog.jquery.com/author/admin/|John Resig (admin)|30 gennaio 2018|sito=Blog di jQuery|lingua=en}}</ref><ref>{{Cita web|https://blog.jquery.com/author/dmethvin/|Dave Methvin|30 gennaio 2018|sito=Blog di jQuery|lingua=en}}</ref>

Attualmente, anche [[Microsoft]] e [[Nokia]] forniscono di serie jQuery sulle proprie piattaforme<ref>[http://weblogs.asp.net/scottgu/jquery-and-microsoft ScottGu's Blog - jQuery and Microsoft]</ref>. Microsoft lo fornisce con le più recenti versioni di [[Visual Studio .NET|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 ==

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'[[interpreteInterprete (informatica)|interprete]] JavaScript del browser.

=== Core ===

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 <code>size()</code> oppure proprietà <code>length</code>)

#** Per iterare ogni elemento (funzione <code>each()</code>)

#** 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 <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>

=== 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:

#* Per selezionare un elemento in base al suo id (#immagine_24)

#* Per selezionare uno o più elementi in base alla classe (''<code>.thumb''</code> oppure'' <code>div.modale''</code> oppure ''<code>.class1.subclass''</code>)

#* Per selezionare in modo gerarchico, mediante l'utilizzo di parole chiave come ''ancestor'', ''sibling'', ''prev'' e altre''

#* Per selezionare in base a pseudo-classi (''<code>:first</code>, <code>:last</code>, <code>:not''</code>, etcecc.)

#* Per selezionare in base ad attributi o contenuti (''<code>:contain</code>, <code>:has</code>, <code>:hidden</code>, <code>[type="text"]''</code>, etcecc.)

=== 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:

#* Metodo per gli attributi generici (<code>attr()</code>)

#* Metodi per le classi

#** Per conoscere se un elemento appartiene ad una specifica classe (<code>hasClass()</code>)

#** Per impostare o rimuovere una classe (<code>addClass()</code>, <code>removeClass()</code> e lo switch <code>toggleClass()</code>)

#* Metodi per il contenuto

#** Per il codice HTML, come la proprietà innerHTML (<code>html()</code>)

#** Per il contenuto testuale (<code>text()</code>)

#** Per il valore, solitamente per i campi di un form, che siano campi testuali, campi multiriga, liste dropdown o checkbox (<code>val()</code>)

=== DOM Traversing ===

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 ===

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 ===

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 (<code>height()</code> e <code>width()</code>)

#** Le dimensioni interne (escludendo quindi il margine)

#** L'offset rispetto ai bordi

=== Eventi ===

Line 90 ⟶ 88:

=== Effetti ===

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.

Line 98 ⟶ 96:

=== AJAX ===

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

#* Con metodo GET

#** Funzione per caricare un oggetto [[JSON]]

#* Con metodo POST

#** Funzione per caricare un file JavaScript remoto ed eseguirlo automaticamente

# 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.

Line 116 ⟶ 112:

<source lang="javascript">

// Tutti i link

var l1 = jQuery("'a"');

var l2 = $("'a"');

// l1 e l2 sono oggetti diversi

Line 126 ⟶ 122:

<source lang="javascript">

// Ritorna tutte le immagini di classe class1 e/o class3

$("'img.class1,img.class3"');

</source>

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.

<source lang="javascript">

var links = $("'a"');

links.css( "'color"', "'red"' );

links.bindcss( "click"'width', myFunctionPointer'150px' );

links.show( "1000" );

links.cssclick( "width", "150px"function (); {

alert( 'clicked!' );

} );

</source>

Line 142 ⟶ 140:

<source lang="javascript">

$("a").css( { color : "'red"', width : "'150px"' } )

$("a")

.show( "'1000"' );

.css({ color : "red", width : "150px" })

.click( function () {

.bind( "click", myFunctionPointer )

alert( 'clicked!' );

.show( "1000" );

} );

</source>

La libreria ènon compatibilecollide 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, animazioni, transizioni, ecc.

Inoltre, sono disponibili molti plugin, tra i quali è necessario citare quello ufficiale, [[JQuery UI|jQueryUI]] (user interface), che fornisce un'accattivante interfaccia grafica, includendo fogli di stile, finestre modali con ridimensionamento e traslazione, calendari e barre di scorrimento.

== Alternative ==

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>

Esiste a tal proposito un sito internet che permette di visualizzare come usare JavaScript per sostituire ogni singola funzionalità di jQuery.<ref>[{{Cita web|http://youmightnotneedjquery.com/ |You might not need jquery]|30 gennaio 2018|lingua=en|citazione=}}</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>

== Note ==

Line 163 ⟶ 162:

== Voci correlate ==

* [[JQueryUIjQuery UI]]

== Altri progetti ==

Line 169 ⟶ 168:

== Collegamenti esterni ==

* {{Collegamenti esterni}}

* {{cita web|http://jquery.com/|Sito web di jQuery mantenuto dal jQuery Project|lingua=en}}

* {{citaCita web|httphttps://jqueryjs.orgfoundation/|Sito deldella jQueryfondazione ProjectjQuery|lingua=en}}

* {{cita web|http://ejohn.org/|Sito dello sviluppatore John Resig|lingua=en}}

* {{cita web|httphttps://docslearn.jquery.com/|Sito web di documentazione completa della libreria|lingua=en}}

* {{cita web|http://www.jqueryitalia.org|SitoComunità webitaliana italianosu sul frameworkjQuery con documentazione e forum}}

* {{en}}Cita [web|http://www.jqueryvsmootools.com/ |jQuery vs MooTools]|lingua=en}} -– articolo tecnico di confronto con le librerie MooTools

{{Framework per applicazioni web}}

Line 180 ⟶ 179:

{{Controllo di autorità}}

{{Portale|informatica|software libero}}

[[Categoria:Librerie JavaScript]]