Cos’è jQuery, inclusione e sintassi base

Cosa è jQuery?

jQuery è una libreria di funzioni javascript, cross-browser destinata ad applicazioni web, che si propone come obiettivo quello di semplificare la programmazione lato client delle pagine HTML. Il framework consente ai Designer di sviluppare pagine web con funzionalità interattive in maniera semplice. L’obiettivo è gestire al meglio gli aspetti grafici e strutturali come posizione di elementi, effetto di click su immagini, manipolazione del Document Object Model e quant’altro ancora, mantenendo la compatibilità tra browser diversi e standardizzando gli oggetti messi a disposizione dall’ interprete javascript del browser.

Come integro jQuery al mio progetto web?

La libreria jQuery è un singolo file JavaScript, da richiamare tramite HTML con il tag <script>:

<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Per ottenere la libreria: http://jquery.com/download/

  1. Production version – questa versione è per il vostro sito web di produzione, il codice è minimizzato e compresso;
  2. Development version – versione di sviluppo e di test, il codice è facilmente leggibile;
  3. CDN di Google o di jQuery – Content Delivery Network

Con percorsi relativi:

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

Con percorsi assoluti:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Se non abbiamo bisogno di modifiche alla libreria usare le versioni .min (sta per minified ovvero compresso) in quanto sono più veloci da caricare, inoltre preferire i CDN di Google per ridurre i tempi di caricamento ( Leggere qui per maggiori dettagli).

Qual è la sintassi di base?

$(selector).action()

  1. Il $ per definire jQuery
  2. Un (selector) per “query (trovare)” elementi HTML
  3. Un’azione: jQuery action() da far eseguire sull’elemento selezionato

Per esempio:

  • $(selector).action();
  • jQuery(‘p’).css(‘color’, ‘blue’);
  • $(‘p’).css(‘color’, ‘blue’);
  • $(this).hide();
  • $(“p”).hide();
  • $(“.test”).hide();
  • $(“#test”).hide();

Ovvero: selettore, azione, parametri.

Cosa è jQuery UI?

jQuery UI è una libreria open source di plug-in basata sulla libreria JavaScript JQuery. Ogni componente è costruito secondo l’architettura di JQuery ed è completamente personalizzabile. Fornisce interazioni ed animazioni, effetti avanzati e widget. Al momento jQuery UI è suddivisa in: Interactions, Widgets, Effects, Utilities.

Dipendente dalla libreria core può essere richiamata sia con percorsi locali che con percorsi remoti. Se usiamo il CDN di jQuery.

  1. http://code.jquery.com/jquery-1.12.1.min.js
  2. http://code.jquery.com/ui/1.12.1/jquery-js
  3. http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-css

In generale tutti i link assoluti per UI e non solo sono su http://code.jquery.com/

Se invece usiamo una CDN, per esempio Google:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Cosa sono i Widget di jQuery UI?

Molto amplia è la scelta di Widget in jQuery UI. Il nome potrebbe essere in alcuni casi fuorviante, visto che è spesso usato in moltissimi contesti diversi, tuttavia in questo caso si tratta solo di controlli atti a semplificare e ordinare la fruizione e l’inserimento dei dati in una pagina web.

jQuery UI comprende nativamente 11 tipi di widget, completamente compatibili con i temi UI generati da Theme Roller (la web application per la gestione dei temi) e ricchi di opzioni di personalizzazione.

  • Accordion: Visualizza pannelli di contenuto comprimibili per presentare le informazioni in una quantità limitata di spazio.
  • Autocomplete: suggerisce parole mentre l’utente sta scrivendo.
  • Button: inserisce pulsanti personalizzabili
  • Datepicker: Visualizza un calendario
  • Dialog: visualizza finestre di dialogo personalizzabili
  • Menu: crea menu nidificabili.
  • Progressbar: consente di visualizzare un indicatore di stato
  • Slider: Visualizza diapositive accessibili tramite tastiera
  • Spinner: Visualizza i pulsanti per immettere numeri tramite la tastiera o il mouse.
  • Tabs: Trasforma un insieme di elementi contenitori in una struttura a tab.
  • Tooltip: mostra informazioni addizionali.

Per esempio come inserisco un accordion?

<div id="accordion">
 <h3><a href="#">Primo headerheader</a></h3>
 <div>First contenuto</div>
 <h3><a href="#">Secondo header</a></h3>
 <div>Secondo contenuto</div>
</div> 

A questo punto basterà richiamare il metodo .accordion() sull’elemento con id accordion per attivare il widget:

$("#accordion").accordion();

L’Accordion, come gli altri widget offre un ottimo numero di opzioni per personalizzare il comportamento del widget. Fra cui:

  • active : (selettore, jQuery, elemento DOM, numero, booleano – ‘first-child’) indica uno specifico elemento o la sua posizione nell’accordion in modo da renderlo subito visibile una volta applicato il widget.
  • autoHeight : (booleano – true) indica se applicare l’altezza del contenitore di testo più alto a tutti gli altri elementi. Questa opzione è attiva di default perché rende il controllo più consistente e impedisce che il cambiamento di altezza dell’accordion possa influire sul posizionamento di altri box nell’interfaccia.
  • collapsible : (booleano – false) strettamente collegato all’opzione precedente, se impostato su true permette di chiudere tutte le aree di testo, facendo collassare completamente il controllo.

Per esempio:

$( function() {
$( ".accordion" ).accordion({
 collapsible: true,
 active: false,
 heightStyle: "content"
});
} ); 

Ulteriori dettagli: http://api.jqueryui.com/accordion/#option-animate

Come inserisco un tabulatore?

<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>Uno</span></a></li>
        <li><a href="#fragment-2"><span>Due</span></a></li> 
        <li><a href="#fragment-3"><span>Tre</span></a></li>
    </ul>
    <div id="fragment-1">
        <p>Testo 1</p>
    </div>
    <div id="fragment-2">
        <p>Testo 2</p>
    </div>
    <div id="fragment-3">
        <p>Testo 3</p>
    </div>
</div> 

A questo punto ci basterà richiamare il metodo .tabs() sull’elemento con id tabs per attivare il widget $(“#tabs”). tabs ();

Cosa è il Themeroller/temi di jQuery UI?

La struttura grafica dei widget e delle interazioni di jQuery UI è in gran parte veicolata dall’inclusione di un file CSS compreso nel pacchetto di installazione.

Themeroller è un applicativo online raggiungibile all’indirizzo http://jqueryui.com/themeroller/ che permette di modificare il tema base smoothness secondo le proprie esigenze con un alto grado di personalizzazione. Oltre a questo, mette a disposizione molti temi preconfezionati da scaricare direttamente oppure da usare come base per il proprio tema.

N.B. cliccando sul link di download dei temi verrete reindirizzati all’utility di download di jQuery UI, perciò scaricare tutto il pacchetto ed estrarre la cartella del tema dalla directory css. La struttura e la nomenclatura che compongono un tema per jQuery UI sono rigidamente standardizzati, per garantire la compatibilità fra il markup generato dalla libreria e la formattazione disponibile via CSS.

Cosa sono i Plugin jQuery?

In jQuery un plugin non è altro che un’estensione (non autonoma) del framework, che ha come compito quello di ampliarne le funzioni del core. Più nello specifico un plugin è una, o un insieme, di funzioni che hanno lo scopo di utilizzare il framework per compiti pre-stabiliti e quindi aiutare gli sviluppatori quando si tratta di validare i nostri formulari, creare delle slideshow, inserire nei nostri siti delle gallerie fotografiche. Alcuni esempi di plugin che possono essere testati:

  1. Colorbox – a jQuery lightbox A lightweight customizable lightbox plugin
  2. jQuery Zoom A plugin to enlarge images on mouseover or mousedown.

Anche per i plugin abbiamo la versione ridotta (min di produzione) e la versione non compressa (di sviluppo).

Come integro il plugin Colorbox?

<link rel="stylesheet" href="css/colorbox.css" />
<script src="js/jquery.colorbox-min.js"></script> 

Il plugin può essere utilizzato sia su una singola immagine sia per raccolte in stile slideshow.

Per raggruppare gli elementi includiamo nel mark-up, p.e., l’attributo rel=”gipso” per poi utilizzare il selettore di attributi di jQuery per trovare tali immagini:

$(document).ready(function(){ 
    $(".gipso").colorbox({ rel:'gipso’, transition: 'fade’, speed: 500, });
    $(".flora").colorbox();
}); 

jQuery è morta?

La gestione degli eventi, le animazione e la manipolazione del DOM sono stati notevolmente semplificati da jQuery in un periodo in cui applicare il “comportamento” alle pagine web non era cosa facile utilizzando JavaScript. Un ulteriore fattore che ha reso popolare jQuery è l’utilizzo da parte di CMS come WordPress e l’utilizzo di framework come Bootstrap. Proprio Bootstrap ha abbandonato jQuery a partire dalla versione 5. Nonostante i grandi meriti storici il passaggio a Vanilla JavaScript è inevitabile, i costanti aggiornamenti di JavaScript hanno depennato ciò che rendeva speciale jQuery rendendo la libreria obsoleta per i nuovi progetti.