jQuery - jQuery

jQuery

Autori originali	Giovanni Resig
Sviluppatore/i	Il team di jQuery
Versione iniziale	26 agosto 2006 ; 15 anni fa ( 2006-08-26 )
Rilascio stabile	3.6.0 / (2 marzo 2021 ; 7 mesi fa ) ( 2021-03-02 )
Repository
Scritto in	JavaScript
piattaforma	Vedi § Supporto browser
Taglia	27–274 KB
Tipo	Libreria JavaScript
Licenza	MIT
Sito web	jquery .com

jQuery è una libreria JavaScript progettata per semplificare l' attraversamento e la manipolazione dell'albero DOM HTML , nonché la gestione degli eventi , l' animazione CSS e Ajax . È un software open source gratuito che utilizza la licenza MIT permissiva . A partire da maggio 2019, jQuery è utilizzato dal 73% dei 10 milioni di siti Web più popolari. L' analisi web indica che è la libreria JavaScript più diffusa con un ampio margine, con un utilizzo almeno 3-4 volte maggiore rispetto a qualsiasi altra libreria JavaScript.

La sintassi di jQuery è progettata per semplificare la navigazione in un documento, selezionare elementi DOM , creare animazioni , gestire eventi e sviluppare applicazioni Ajax . jQuery fornisce anche funzionalità per gli sviluppatori per creare plug-in sulla libreria JavaScript. Ciò consente agli sviluppatori di creare astrazioni per interazioni e animazioni di basso livello, effetti avanzati e widget tematici di alto livello. L'approccio modulare alla libreria jQuery consente la creazione di potenti pagine Web dinamiche e applicazioni Web.

L'insieme delle funzionalità principali di jQuery —selezione, attraversamento e manipolazione degli elementi DOM—abilitate dal suo motore di selezione (denominato "Sizzle" dalla v1.3), ha creato un nuovo "stile di programmazione", fondendo algoritmi e strutture dati DOM. Questo stile ha influenzato l'architettura di altri framework JavaScript come YUI v3 e Dojo , stimolando in seguito la creazione dell'API Selectors standard . Successivamente, questo stile è stato migliorato con una più profonda fusione algoritmo-dati in un erede di jQuery, il framework D3.js.

Microsoft e Nokia raggruppano jQuery sulle loro piattaforme. Microsoft lo include con Visual Studio per l'utilizzo all'interno dei framework ASP.NET AJAX e ASP.NET MVC mentre Nokia lo ha integrato nella piattaforma di sviluppo di widget Web Run-Time.

Panoramica

jQuery, al suo interno, è una libreria di manipolazione del Document Object Model (DOM). Il DOM è una rappresentazione ad albero di tutti gli elementi di una pagina Web. jQuery semplifica la sintassi per trovare, selezionare e manipolare questi elementi DOM. Ad esempio, jQuery può essere utilizzato per trovare un elemento nel documento con una certa proprietà (es. tutti gli elementi con un tag h1 ), modificarne uno o più attributi (es. colore, visibilità), o farlo rispondere ad un evento ( ad esempio un clic del mouse).

jQuery fornisce anche un paradigma per la gestione degli eventi che va oltre la selezione e la manipolazione di elementi DOM di base. L'assegnazione dell'evento e la definizione della funzione di callback dell'evento vengono eseguite in un unico passaggio in un'unica posizione nel codice. jQuery mira anche a incorporare altre funzionalità JavaScript molto utilizzate (ad esempio dissolvenze in entrata e in uscita quando si nascondono elementi, animazioni manipolando le proprietà CSS ).

I principi dello sviluppo con jQuery sono:

• Separazione di JavaScript e HTML: la libreria jQuery prevede sintassi semplice per l'aggiunta di eventi i gestori al DOM tramite JavaScript, piuttosto che aggiungere evento attributi HTML per richiamare le funzioni JavaScript. Pertanto, incoraggia gli sviluppatori a separare completamente il codice JavaScript dal markup HTML.
• Brevità e chiarezza: jQuery promuove brevità e chiarezza con funzionalità come funzioni "concatenabili" e nomi di funzioni abbreviate.
• Eliminazione delle incompatibilità tra browser: i motori JavaScript dei diversi browser differiscono leggermente, quindi il codice JavaScript che funziona per un browser potrebbe non funzionare per un altro. Come altri toolkit JavaScript, jQuery gestisce tutte queste incongruenze tra browser e fornisce un'interfaccia coerente che funziona su browser diversi.
• Estensibilità: nuovi eventi, elementi e metodi possono essere facilmente aggiunti e quindi riutilizzati come plug-in.

Storia

jQuery è stato originariamente creato nel gennaio 2006 al BarCamp di New York da John Resig , influenzato dalla precedente libreria cssQuery di Dean Edwards . Attualmente è gestito da un team di sviluppatori guidato da Timmy Willison (con il motore di selezione jQuery, Sizzle, guidato da Richard Gibson).

jQuery è stato originariamente concesso in licenza con CC BY-SA 2.5 e ri - licenziato alla licenza MIT nel 2006. Alla fine del 2006, è stato concesso in doppia licenza con licenze GPL e MIT. Poiché ciò ha portato a una certa confusione, nel 2012 la GPL è stata abbandonata e ora è concessa in licenza solo con la licenza del MIT.

Popolarità

• Nel 2015, jQuery è stato utilizzato sul 62,7% del primo milione di siti Web (secondo BuiltWith) e sul 17% di tutti i siti Web Internet.
• Nel 2017, jQuery è stato utilizzato sul 69,2% del primo milione di siti Web (secondo Libscore).
• Nel 2018, jQuery è stato utilizzato sul 78% dei primi 1 milione di siti web.
• Nel 2019, jQuery è stato utilizzato sull'80% dei primi 1 milione di siti Web (secondo BuiltWith) e sul 74,1% dei primi 10 milioni (secondo W3Techs).
• Ad aprile 2021, jQuery è utilizzato dal 77,8% dei primi 10 milioni di siti Web (secondo W3Techs) .

Caratteristiche

jQuery include le seguenti funzionalità:

• Selezioni di elementi DOM utilizzando il motore di selezione open source multi-browser Sizzle , uno spin-off del progetto jQuery
• Manipolazione del DOM basata su selettori CSS che utilizzano i nomi e gli attributi degli elementi, come id e classe, come criteri per selezionare i nodi nel DOM
• Eventi
• Effetti e animazioni
• Ajax
• Oggetti differiti e prometti per controllare l'elaborazione asincrona
• Analisi JSON
• Estensibilità tramite plug-in
• Utilità, come il rilevamento delle funzionalità
• Metodi di compatibilità che sono disponibili in modo nativo nei browser moderni, ma richiedono fallback per i browser meno recenti, come jQuery.inArray()e jQuery.each().
• Supporto per più browser

Supporto browser

jQuery 3.0 e versioni successive supportano le "versioni correnti-1" (che significa l'attuale versione stabile del browser e la versione che l'ha preceduta) di Firefox (ed ESR), Chrome , Safari e Edge , nonché Internet Explorer 9 e versioni successive. Su dispositivi mobili supporta iOS 7 e versioni successive e Android 4.0 e versioni successive.

Distribuzione

La libreria jQuery è generalmente distribuita come un singolo file JavaScript che definisce tutte le sue interfacce, incluse le funzioni DOM, Events e Ajax. Può essere incluso all'interno di una pagina Web collegandosi a una copia locale, oppure collegandosi a una delle tante copie disponibili dai server pubblici. jQuery ha una rete di distribuzione dei contenuti (CDN) ospitata da MaxCDN. Anche Google nel servizio Google Hosted Libraries e Microsoft ospitano la libreria.

Esempio di collegamento di una copia della libreria in locale (dallo stesso server che ospita la pagina Web):

<script src="jquery-3.5.1.min.js"></script>

Esempio di collegamento di una copia della libreria dal CDN pubblico di jQuery:

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

Interfaccia

Funzioni

jQuery fornisce due tipi di funzioni , funzioni di utilità statiche e metodi oggetto jQuery . Ognuno ha il proprio stile di utilizzo.

Entrambi sono accessibili tramite l'identificatore principale di jQuery: jQuery. Questo identificatore ha un alias denominato $. È possibile accedere a tutte le funzioni tramite uno di questi due nomi.

metodi jQuery

La jQueryfunzione è una fabbrica per la creazione di un oggetto jQuery che rappresenta uno o più nodi DOM. Gli oggetti jQuery hanno metodi per manipolare questi nodi. Questi metodi (a volte chiamati comandi) sono concatenabili poiché ogni metodo restituisce anche un oggetto jQuery.

L'accesso e la manipolazione di più nodi DOM in jQuery in genere inizia con la chiamata della $funzione con una stringa di selezione CSS. Questo restituisce un oggetto jQuery che fa riferimento a tutti gli elementi corrispondenti nella pagina HTML . $("div.test"), ad esempio, restituisce un oggetto jQuery con tutti gli divelementi di class test. Questo insieme di nodi può essere manipolato chiamando i metodi sull'oggetto jQuery restituito.

Utilità statiche

Queste sono funzioni di utilità e non agiscono direttamente su un oggetto jQuery. Sono accessibili come metodi statici sull'identificatore jQuery o $. Ad esempio, $.ajax()è un metodo statico.

Modalità senza conflitti

jQuery fornisce una $.noConflict()funzione che rinuncia al controllo del $nome. Ciò è utile se jQuery viene utilizzato su una pagina Web collegando anche un'altra libreria che richiede il $simbolo come identificatore. In modalità no-conflict, gli sviluppatori possono utilizzare jQueryin sostituzione di $senza perdere funzionalità.

Punto di partenza tipico

In genere, jQuery viene utilizzato inserendo il codice di inizializzazione e le funzioni di gestione degli eventi in . Questo viene attivato da jQuery quando il browser ha finito di costruire il DOM per la pagina Web corrente. $(handler)

$(function () {
        // This anonymous function is called when the page has completed loading.
        // Here, one can place code to create jQuery objects, handle events, etc.
});

o

$(fn); // The function named fn, defined elsewhere, is called when the page has loaded.

Storicamente, $(document).ready(callback)è stato l'idioma de facto per eseguire il codice dopo che il DOM è pronto. Tuttavia, a partire da jQuery 3.0, gli sviluppatori sono incoraggiati a utilizzare $(handler)invece la firma molto più corta .

concatenamento

I metodi oggetto jQuery in genere restituiscono anche un oggetto jQuery, che consente l'uso di catene di metodi :

$('div.test')
  .on('click', handleTestClick)
  .addClass('foo');

Questa riga trova tutti gli div elementi con l'attributo di classe test, quindi registra un gestore di eventi su ciascun elemento per l'evento "click", quindi aggiunge l'attributo di classe fooa ciascun elemento.

Alcuni metodi oggetto jQuery recuperano valori specifici (invece di modificare lo stato). Un esempio di ciò è il val()metodo, che restituisce il valore corrente di un elemento di input di testo . In questi casi, un'istruzione come $('#user-email').val()non può essere utilizzata per il concatenamento poiché il valore restituito non fa riferimento a un oggetto jQuery.

Creazione di nuovi elementi DOM

Oltre ad accedere ai nodi DOM esistenti tramite jQuery, è anche possibile creare nuovi nodi DOM, se la stringa passata come argomento alla factory $() assomiglia a HTML. Ad esempio, il codice seguente trova un selectelemento HTML e crea un nuovo optionelemento con valore "VAG" ed etichetta "Volkswagen", che viene quindi aggiunto al menu di selezione :

$('select#car-brands')
  .append($('<option>')
    .prop(value,"VAG")
    .text('Volkswagen')
  );

Ajax

È possibile effettuare richieste Ajax (con supporto cross-browser ) $.ajax()per caricare e manipolare dati remoti.

$.ajax({
  type: 'POST',
  url: '/process/submit.php',
  data: {
    name : 'John',
    location : 'Boston',
  },
}).then(function(msg) {
  alert('Data Saved: ' + msg);
}).catch(function(xmlHttpRequest, statusText, errorThrown) {
  alert(
    'Your form submission failed.\n\n'
      + 'XML Http Request: ' + JSON.stringify(xmlHttpRequest)
      + ',\nStatus Text: ' + statusText
      + ',\nError Thrown: ' + errorThrown);
});

Questo esempio invia i dati name=Johne location=Bostona /process/submit.phpsul server. Al termine di questa richiesta, viene chiamata la funzione di successo per avvisare l'utente. Se la richiesta fallisce, avviserà l'utente dell'errore, dello stato della richiesta e dell'errore specifico.

L'esempio precedente usa i metodi .then()e .catch()per registrare i callback che vengono eseguiti quando la risposta è stata completata. Questi richiami di promessa devono essere utilizzati a causa della natura asincrona delle richieste Ajax .

plug-in jQuery

L'architettura di jQuery consente agli sviluppatori di creare codice plug-in per estenderne la funzione. Ci sono migliaia di plug-in jQuery disponibili sul Web che coprono una vasta gamma di funzioni, come helper Ajax, servizi Web , datagrid, elenchi dinamici, strumenti XML e XSLT , trascinamento della selezione , eventi, gestione dei cookie e finestre modali .

Un'importante fonte di plug-in jQuery è il sottodominio dei plug-in del sito Web del progetto jQuery. I plugin in questo sottodominio, tuttavia, sono stati cancellati accidentalmente nel dicembre 2011 nel tentativo di liberare il sito dallo spam. Il nuovo sito è un repository ospitato su GitHub , che richiedeva agli sviluppatori di inviare nuovamente i propri plug-in e di conformarsi ai nuovi requisiti di invio. jQuery fornisce un "Centro di apprendimento" che può aiutare gli utenti a comprendere JavaScript e iniziare a sviluppare plug-in jQuery.

Per creare questi plug-in, gli sviluppatori possono scegliere di scrivere il proprio codice da zero o costruire su una struttura esistente come jQuery Boilerplate .

Cronologia delle uscite

Struttura di test

QUnit è un framework di automazione dei test utilizzato per testare il progetto jQuery. Il team di jQuery lo ha sviluppato come una libreria di test di unità interna. Il team di jQuery lo utilizza per testare il codice e i plug-in, ma può testare qualsiasi codice JavaScript generico, incluso il codice JavaScript lato server.

A partire dal 2011, il team di test jQuery utilizza QUnit con TestSwarm per testare ogni versione del codebase jQuery.

Alternative a jQuery

Semplificando attività come l'attraversamento di documenti HTML, l'animazione e la gestione degli eventi, la solida libreria JavaScript jQuery ha cambiato il volto dello sviluppo web. Secondo il geometra W3Techs, a maggio 2019, jQuery è ancora utilizzato nel 74% dei siti Web noti. Tuttavia, la libreria jQuery, che ha debuttato nell'agosto 2006, è ora considerata da alcuni sviluppatori come una tecnologia precedente il cui tempo è passato. Negli ultimi anni sono emerse alternative a jQuery, come la libreria Cash o anche solo il moderno JavaScript vanigliato, ora che i browser Web gestiscono tutti JavaScript allo stesso modo e jQuery non è più necessario per risolvere i problemi di compatibilità. Argomenti su Reddit e video su YouTube sostengono che jQuery è diventato obsoleto, o almeno non è così essenziale come una volta.

—  Paul Krill, InfoWorld (2019)

Poiché la compatibilità tra browser non è più un problema, la maggior parte di jQuery può oggi essere sostituita con i moderni standard web, senza perdere molta praticità. In parte a causa di ciò, GitHub ha rimosso jQuery dalle sue pagine nel 2018.

Biblioteche alternative

• Contanti
• Zepto

Guarda anche

• Confronto tra framework JavaScript
• jQuery Mobile
• jQuery UI

Riferimenti

Ulteriori letture

• John Resig (oratore) (13 aprile 2007). John Resig: Avanzamento di JavaScript con le librerie (video di YouTube) . Teatro YUI . Estratto il 9 gennaio 2018 .
• Krill, Paul (31 agosto 2006). "JavaScript, gli sviluppatori .Net hanno aiutato in un progetto separato" . InfoMondo . Estratto il 15 aprile 2019 .
• Taft, Darryl K. (30 agosto 2006). "jQuery facilita JavaScript, sviluppo AJAX" . eSettimana . Estratto il 15 aprile 2019 .

link esterno

• Sito ufficiale