Wikipedia

jQuery

framework JavaScript
Versione del 26 dic 2017 alle 03:35 di LRKalle (discussione | contributi)

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'apporoccio di tipo modulare di jQuery consente la creazione semplificata di applicazioni Web e versatili contenuti dinamic.i

jQuery
software
Logo
Logo
GenereLibreria software (non in lista)
SviluppatoreJohn Resig
Data prima versionegennaio 2006
Ultima versione3.7.1 (28 agosto 2023)
Ultima beta4.0.0-beta2 (17 luglio 2024)
Sistema operativoMultipiattaforma
LinguaggioJavaScript
LicenzaGNU GPL, Licenza MIT[1]
(licenza libera)
Sito webjquery.com
(inglese)
«write less, do more.»
(italiano)
«scrivi di meno, fai di più.»

(slogan)

È un software libero, distribuito sotto i termini della Licenza MIT.[1] Secondo analisi del Web, è di gran lunga la più utilizzata libreria di supporto utilizzata attualmente nei siti[2].

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.

Attualmente, anche Microsoft e Nokia forniscono di serie jQuery sulle proprie piattaforme[3]. Microsoft lo fornisce con le più recenti versioni di 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'interprete JavaScript del browser.

Core

Il core di jQuery fornisce:

  1. 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
  2. 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())
  3. I metodi per creare e utilizzare liste e code (di oggetti e funzioni)
  4. I metodi per estendere il framework mediante plugin (funzione extend() e fn.extend())
  5. I metodi per eseguire animazioni mediante le funzioni show(), hide() e animate()

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:

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

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:

  1. Metodo per gli attributi generici (attr())
  2. 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())
  3. 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

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:

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

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

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

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:

  1. Effetto fading, la dissolvenza in entrata o uscita
  2. Effetto sliding, l'effetto scivolata
  3. 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

La gestione delle chiamate asincrone è davvero semplificata, e sono fornite le funzioni:

  1. Per caricare contenuti dinamicamente
    • Funzione di caricamento semplice
    • Funzione di caricamento di codice HTML con inserimento automatico
  2. Per eseguire richieste asincrone
    • Con metodo GET
    • Con metodo POST
  3. 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à

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

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");
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.bind( "click", myFunctionPointer );
links.show( "1000" );
links.css( "width", "150px" );

Può essere riscritta come segue 

$("a")
	.css({ color : "red", width : "150px" })
	.bind( "click", myFunctionPointer )
	.show( "1000" );

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

Inoltre, sono disponibili molti plugin, tra i quali è necessario citare quello ufficiale, 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.[4]

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

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

Note

  1. ^ a b (EN) License, su jQuery Foundation. URL consultato il 3 giugno 2015.
  2. ^ Usage of JavaScript libraries for websites, su w3techs.com.
  3. ^ ScottGu's Blog - jQuery and Microsoft
  4. ^ (Now More Than Ever) You Might Not Need jQuery
  5. ^ You might not need jquery
  6. ^ Vanilla JS

Voci correlate

Altri progetti

Collegamenti esterni

Controllo di autoritàGND (DE) 7681087-2
  Portale Informatica: accedi alle voci di Wikipedia che trattano di informatica
Estratto da "https://it.wikipedia.org/w/index.php?title=JQuery&oldid=93463426"