È difficile sopravvalutare l’impatto che jQuery ha avuto sullo sviluppo web dopo il rilascio della libreria JavaScript open-source più di 15 anni fa. Una cassetta degli attrezzi che ha creato una nuova scorciatoia per la programmazione JavaScript altrimenti complessa, jQuery continua a essere all’altezza del motto dei suoi sviluppatori: “Scrivi meno, fai di più”.
Ancora oggi, jQuery è popolare tra sviluppatrici e sviluppatori professionisti, mentre altri con poca o nessuna esperienza di programmazione possono usare la libreria per aggiungere funzionalità avanzate ai loro siti web. Ecco cosa c’è dietro una delle più grandi storie di successo dello sviluppo web.
Quanto È Popolare jQuery?
L’indagine di StackOverflow del 2022 sulle tecnologie web usate dagli sviluppatori professionisti ha rilevato che poco più del 29% degli oltre 45.000 intervistati lavorava con jQuery. Tra le librerie JavaScript, jQuery è seconda solo a React.js, la libreria sviluppata per la prima volta da Facebook (ora Meta) nel 2011 e che ora è adottata da oltre il 44% degli sviluppatori.
Ma i progetti attuali degli sviluppatori web non raccontano tutta la storia. In base alle tendenze tecnologiche di BuiltWith, jQuery sarà presente in oltre 80 milioni di siti web nel 2022. Si tratta di un vantaggio enorme rispetto ai quasi 11 milioni di siti web che usano React.
La libreria jQuery è stata integrata nel nucleo di WordPress per oltre un decennio, e questo l’ha resa disponibile a centinaia di temi che si affidano alle sue funzionalità per creare siti web dinamici. Drupal è un altro popolare sistema di gestione dei contenuti che ha incluso jQuery tra i suoi componenti principali. Indipendentemente dalle tecnologie attualmente preferite dagli sviluppatori, jQuery rimane la libreria JavaScript più utilizzata sul web.
Breve Storia di jQuery
La battaglia dei browser è iniziata fin dall’inizio del web e gli sviluppatori ne sono sempre stati le vittime. Nel 2006, quando lo sviluppatore web John Resig presentò jQuery, il browser Internet Explorer di Microsoft era il leader indiscusso del mercato, un’inversione di tendenza rispetto al vantaggio di Netscape di meno di dieci anni prima.
All’epoca, il nuovo Firefox di Mozilla aveva una quota di mercato del 10% (rispetto all’84% di Microsoft) e Safari di Apple era appena apparso sulla scena. Chrome di Google, oggi leader di mercato, non esisteva ancora. I programmatori JavaScript come Resig lottavano regolarmente per scrivere codice che potesse funzionare su tutti i browser.
La sua nuova libreria jQuery è stata creata per risolvere le differenze nel modo in cui JavaScript veniva implementato da questi browser e per aiutare gli sviluppatori a scrivere meno codice e a svolgere compiti come questi:
- Manipolare gli elementi HTML di una pagina web
- Modificare dinamicamente i CSS
- Rispondere a eventi come i clic del mouse e la pressione di tasti
- Gestire le richieste Ajax per aggiornare il contenuto di una pagina senza ricaricarla
Dopo il rilascio della libreria da parte di Resig, altri sviluppatori hanno realizzato applicazioni basate su jQuery, spesso condividendo il loro lavoro come plugin per rendere disponibili a tutti le nuove funzionalità.
Cos’È jQuery UI?
jQuery UI è una popolare raccolta di plugin progettati per migliorare le interfacce utente. È considerato un compagno “ufficiale” della libreria jQuery di base e aggiunge una serie di effetti speciali e widget come il selezionatore di date, le barre di avanzamento, i cursori, gli spinner e i pannelli a schede o pieghevoli.
Qual È la Differenza tra jQuery e JavaScript?
È importante sapere che jQuery è JavaScript. Quando usate jQuery, lavoriate con istanze di oggetti JavaScript che riflettono le convenzioni di denominazione di jQuery per i metodi (funzioni) e le proprietà. Diamo un’occhiata a JavaScript e jQuery, che affrontano lo stesso compito.
Ecco un frammento di HTML in una pagina web:
<p id="target">Old text</p>Il codice JavaScript vanilla in grado di trovare l’elemento <p> con il tag id “target” – e quindi di sostituire il testo tra i tag – potrebbe assomigliare a questo:
const content = document.getElementById( "target" );
content.textContent = "New text";Il metodo getElementById() di JavaScript restituisce un oggetto che include l’HTML e il contenuto testuale del paragrafo con il “target” id. L’oggetto viene assegnato al riferimento costante content, quindi la sua proprietà textContent viene modificata in “Nuovo testo”.
JavaScript consente di concatenare i metodi, rendendo possibile ottenere quanto sopra con una sola istruzione:
document.getElementById( "target" ).textContent = "New text"; Non sorprende quindi che sia possibile concatenare anche le azioni di jQuery. Per cambiare “Vecchio testo” in “Nuovo testo” usando jQuery, potreste fare così:
$( "#target" ).text( "New text" );Il segno del dollaro ($) è un alias breve per jQuery e ( "#target" ) è un esempio di selettore jQuery. In questo caso, il selettore cerca un elemento HTML con l’indirizzo id del nostro paragrafo di destinazione. Il metodo jQuery text() viene concatenato per rendere “Nuovo testo” il contenuto del paragrafo.
Come Usare jQuery sul Vostro Sito Web
Aggiungete jQuery al vostro sito web collegando il codice della libreria dalle pagine del sito. La libreria jQuery può trovarsi sul vostro server web o su una rete di distribuzione di contenuti (CDN) accessibile al pubblico. Il sito ufficiale di jQuery può fornirvi le ultime versioni della libreria.
La libreria jQuery è disponibile in JavaScript minificato (compresso) per un caricamento veloce in produzione o non compresso per la leggibilità e il debug.
Dovrete anche scrivere almeno un po’ di JavaScript per invocare jQuery e affrontare compiti specifici della vostra applicazione web. Nell’HTML delle pagine del vostro sito web, potete collegare la libreria jQuery e il file contenente il vostro codice in questo modo:
<script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>In questo esempio, la versione 3.6.0 di jQuery e il codice specifico del sito in un file chiamato my_script.js si trovano nella directory/js/ del sito web. La libreria jQuery è solitamente inclusa nella sezione <head> di una pagina web. È comune che gli sviluppatori inseriscano alcuni link ai file JavaScript, compreso il codice che si basa sulla libreria jQuery, nella parte inferiore della pagina, di solito appena prima della chiusura del tag <body>. Il codice specifico del sito che richiama jQuery deve sempre apparire dopo il link alla libreria stessa.
Collegarsi a jQuery su un CDN
La libreria jQuery viene spesso scaricata più velocemente se fornita da un CDN solido. jQuery è così diffuso sul web che è molto probabile che un visitatore del vostro sito abbia già la libreria nella cache del suo browser per diversi CDN. Possiamo modificare lo snippet HTML qui sopra per usare la rete di distribuzione dei contenuti JavaScript di Cloudflare in questo modo:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>Invocare jQuery nella Vostra Applicazione
Quando scrivete la vostra applicazione jQuery, una buona pratica è quella di verificare che la pagina web abbia terminato il caricamento prima che il vostro codice inizi a essere eseguito. Potete verificarlo utilizzando il metodo ready(), che vi permette di inviare il codice quando il documento è stato caricato, come in questo caso:
$(document).ready(function() {
// Your jQuery application will go here
});Questo inizio per un’applicazione jQuery è così comune che gli sviluppatori della libreria hanno ideato una sintassi ancora più breve:
$(function() {
// Your jQuery application will go here
});Selezionare Elementi nel DOM con jQuery
La base della maggior parte delle applicazioni jQuery è la capacità di attraversare la struttura di una pagina web come un oggetto (il modello a oggetti del documento, o DOM) e di puntare a vari elementi all’interno dell’HTML. La selezione di un elemento (o di un gruppo di elementi) è il passo successivo all’azione su quell’elemento, come la modifica del suo aspetto o l’aggiornamento dei contenuti vicini. I selettori di jQuery puntano alle proprietà del DOM in diversi modi. I più comuni includono:
- Per nome dell’elemento HTML (tag)
- Dalle proprietà CSS (compresi gli ID e i nomi delle classi)
- Dalla posizione relativa di un elemento all’interno del DOM
- Dal valore del contenuto dei campi dei moduli
- Dallo stato attuale di un elemento
Ecco alcuni esempi:
// Select all HTML paragraph tags in a document
$( "p" );
// Select the element with the ID "myID"
$( "#myID" );
// Select all elements with the CSS class name "myClass"
$( ".myClass" );
// Select all input, textarea, select, and button elements in a form
$( ":input" );
// Select the children of some other element
// (In this case, the entries in an unordered list)
$( "ul > li" );
// Select all anchors with the rel attribute “nofollow”
$( "a[rel='nofollow']" );
// Select all checkboxes in a “checked” state
$( "input:checked" )Potete combinare i selettori di jQuery per ottenere un’impostazione più specifica. Esempi:
// HTML paragraph tags with the CSS class “myClass”
$( "p.myClass" );
// HTML paragraphs with the text “Kinsta” anywhere within them
$( "p:contains('Kinsta')" );
// HTML div tags that have at least one paragraph tag as a descendent
$( "div:has(p)" );
// The first entry in any unordered list with the CSS class “myList”
$( "ul.myList li:first" ); Manipolare il DOM con jQuery
Ora che sapete come selezionare i vari elementi di una pagina web, potete modificarli usando i metodi jQuery. Come già accennato, spesso potete concatenare queste azioni per ottenere molto con poco codice. Alcuni esempi:
// Select the element with the ID “alert” and add a red background
$( "#alert" ).css( "background-color", "red" );
// Select the element with the ID “alert” and add the class “urgent” to its markup
$( "#alert" ).addClass( "urgent" );
// Find any paragraph with the class “myName” and make its content “Kinsta”
$( "p.myName" ).text( "Kinsta" );
// Like the statement above, but with support for HTML markup
$( "p.myName" ).html( "<strong>Kinsta</strong>" );
// Add the attribute/value rel=”nofollow” to every anchor
$( "a" ).attr( "rel", "nofollow" );
// Hide the element with the ID “myDiv” (but keep it in the DOM)
$( "#myDiv" ).hide();
// Make the element hidden above visible again
$( "#myDiv" ).show();
// Remove from the DOM everything INSIDE the element with the ID “myDiv”
$( "#myDiv" ).empty();
// Remove from the DOM the entire element with the ID “myDiv”
$( "#myDiv" ).remove();Gestire gli Eventi con jQuery
Il tipo di manipolazione del DOM descritto sopra passerebbe inosservato ai visitatori del web se avvenisse non appena la pagina viene caricata. Ecco perché la vostra applicazione jQuery può rilevare e rispondere a eventi come i clic del mouse, il movimento del mouse, la pressione dei tasti e altro ancora per creare un’esperienza davvero reattiva.
Rilevare i Clic del Mouse con jQuery
Rispondere al clic del mouse (o a un tocco su un dispositivo touch-screen) è un compito comune per le applicazioni web. Abbiamo combinato jQuery e HTML in un esempio che sfrutta anche l’oggetto event di jQuery, che conterrà informazioni utili sul nostro “evento click”:
<script>
// Invoke jQuery
$(document).ready(function () {
// Assign “click” method to all button elements
// Our function passes the built-in object with event details
$( "button" ).click(function ( event ) {
// Make sure all button backgrounds are white
$( "button" ).css( "background-color", "white" );
// Change our H2 text to report the ID of the clicked button
$( "#buttonReport" ).text("You clicked " + event.target.id);
// Set the background color of the clicked button to red
$( "#" + event.target.id ).css("background-color", "red");
});
});
</script>
<h2 id="buttonReport">Click a button!</h2>
<button id="Button1">Button 1</button>
<button id="Button2">Button 2</button>
<button id="Button3">Button 3</button> Il risultato:
Rilevare il Movimento del Mouse con jQuery
Conoscere la posizione attuale del puntatore del mouse su una pagina web è utile in molte applicazioni web responsive. Ecco un esempio di come jQuery può aiutare:
<script>
$(document).ready(function () {
// Detect when the mouse is over a div with the mouseover() method
$( "div" ).mouseover(function ( event ) {
// Make the div under the mouse grey and taller
$( "#" + event.target.id ).css({
"background-color" : "lightgrey",
"height" : "8em"
});
});
// Detect when the mouse moves away with the mouseout() method
$( "div" ).mouseout(function ( event ) {
// Return the size and color of the div to its original state
$( "#" + event.target.id ).css({
"background-color" : "white",
"height" : "4em"
});
});
});
</script>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>L’esempio precedente mostra anche come il metodo css() di jQuery possa essere utilizzato per impostare più proprietà CSS contemporaneamente. Ecco il risultato:
Gestire le Richieste Ajax con jQuery
Gran parte della popolarità di jQuery è dovuta alla sua capacità di semplificare le richieste Ajax che le applicazioni web possono usare per scambiare dati con i server senza ricaricare le pagine. La libreria dispone di molti strumenti per gestire le richieste Ajax di dati in formato testo normale, HTML, XML e JSON. L’approccio di jQuery è quello di offrire opzioni abbreviate per le attività più comuni. Uno dei più semplici strumenti di Ajax è il metodo load():
<div id="myContent">Replace Me</div>
<button>Load Content</button>
<script>
// Request the file content.php from the server after a button is clicked.
// Place the results in the HTML element with the ID “myContent”
$( "button" ).click( function (){
$( "#myContent" ).load( "content.php" );
});
</script>Con sole tre righe di JavaScript e due elementi HTML si possono fare molte cose. Il risultato sarebbe simile a questo:
Come Usare jQuery UI
Aggiungendo i plugin jQuery UI ai vostri progetti, avrete accesso a molti effetti speciali e widget costruiti sulla libreria jQuery di base. Ecco un esempio di utilizzo di jQuery UI per aggiungere un calendario pop-up come selezionatore di date all’interno di un modulo web.
Per prima cosa, aggiungete la libreria jQuery UI e il suo CSS di supporto alle vostre pagine web. In questo esempio, ci colleghiamo alle librerie presenti sul CDN JavaScript di Cloudflare insieme alla libreria jQuery principale:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />Successivamente, aggiungete un campo del modulo input all’interno del vostro HTML e, tramite JavaScript, collegate il metodo datepicker() di jQuery UI utilizzando un selettore:
<label for="myDate">Date:</label>
<input type="text" id="myDate" name="myDate">
<script>
$( function() {
$( "#myDate" ).datepicker();
} );
</script> Cliccando sul campo del modulo input si avvierà il selezionatore di date:
Come Usare jQuery in WordPress
La libreria jQuery viene fornita in bundle con WordPress ed è un componente chiave di molti temi WordPress. Anche se il vostro tema attuale non usa già jQuery, potete sfruttare la registrazione delle dipendenze JavaScript all’interno di WordPress per avere tutto il vostro codice jQuery funzionante.
Per farlo, dovrete modificare il file functions.php che fa parte del vostro tema. Un aggiornamento del tema può sovrascrivere questo file, quindi è buona norma mantenere le modifiche al sicuro creando prima un tema figlio e modificando il file functions.php. Come minimo, create un backup manuale di WordPress prima di procedere.
Registrare il Vostro JavaScript jQuery in functions.php
Potete usare un client FTP o SFTP per trasferire il file functions.php tra il vostro desktop e il server web per modificarlo. Gli amministratori di WordPress possono anche modificare functions.php all’interno del CMS:
Dalla bacheca, selezionate Aspetto > Editor file del tema.
Fate clic su Funzioni del tema nel menu di sinistra.
Il contenuto del file functions.php dipende dal tema attivo. Qui sopra sono riportate le funzioni del tema Twenty Twenty-One. Potete aggiungere il vostro script jQuery alla configurazione del vostro sito utilizzando la funzione di utilità di WordPress wp_enqueue_script().
Ecco il modello di questa funzione:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );Ed ecco cosa significa tutto questo:
- $handle: Il nome intuitivo collegato a questo script. (La libreria jQuery è già registrata in WordPress con l’handle jquery)
- $src: il percorso e il nome del file o l’URL che punta al codice sorgente JavaScript.
- $deps: Gli handle di qualsiasi altra fonte JavaScript di cui questo script ha bisogno per funzionare correttamente.
- $ver: Qualsiasi numero di versione che avete assegnato al codice sorgente JavaScript.
- $in_footer: Se impostato su true, lo script verrà aggiunto in fondo alla pagina. Altrimenti, gli script saranno inseriti nel blocco
<head>.
Dopo che uno script è stato accodato, viene aggiunto a una pagina con la funzione add_action(). Per vedere tutto questo in azione, aggiungete un blocco come questo in fondo al vostro file functions.php:
// 'my_custom_scripts' is a function name of your choice
function my_custom_scripts() {
wp_enqueue_script(
'my_script'
get_template_directory_uri() . '/assets/js/my_script.js',
array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),
'1.0',
true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );Qui sopra, al nuovo script jQuery viene assegnato l’handle my_script e la funzione di utilità di WordPress get_template_directory_uri() aiuta a creare un URL per il file JavaScript all’interno delle directory del tema.
Un array di altri handle indica a WordPress che my_script dipende da jQuery core, jQuery-UI core e dal plugin jQuery-UI datepicker Infine, abbiamo assegnato allo script il numero di versione 1.0 e abbiamo chiesto che venga posizionato in fondo alla pagina.
Come Caricare jQuery da un CDN in WordPress
Sappiamo che jQuery può essere servito da diverse reti di distribuzione dei contenuti. Sappiamo anche che WordPress vuole caricare jQuery e molti plugin jQuery dal file system del server web locale.
Potete modificare questo comportamento eliminando le informazioni di configurazione registrate con l’handle jquery esistente e riscrivendole. Per farlo, aggiungete un blocco di codice in functions.php iniziando con la funzione wp_deregister_script():
// 'my_custom_scripts' is a function name of your choice
function my_custom_scripts() {
wp_deregister_script('jquery');
wp_register_script(
'jquery',
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
null,
'3.6.0',
False
);
wp_enqueue_script(
'my_script'
get_template_directory_uri() . '/assets/js/my_script.js',
array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),
'1.0',
true
);
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );L’handle jquery è stato assegnato alla libreria jQuery sul CDN Cloudflare e rimane una dipendenza per il my_script locale. Potete usare lo stesso approccio per prelevare altri componenti jQuery, come jQuery-UI, da un CDN.
Per saperne di più su jQuery e WordPress, abbiamo una guida alla risoluzione dei problemi di configurazione che possono causare errori come “jQuery non è definito”
Riepilogo
Da oltre 15 anni, la libreria open-source jQuery aiuta gli sviluppatori a creare applicazioni web ricche e dinamiche con il minor numero possibile di codici. Oggi jQuery è utilizzato su più siti web di qualsiasi altra libreria JavaScript.
Inoltre, include un bundle con alcuni popolari sistemi di gestione dei contenuti, tra cui WordPress. Un robusto ecosistema di plugin jQuery creati da altri programmatori JavaScript aiuta gli sviluppatori con diversi livelli di esperienza ad aggiungere funzionalità avanzate ai loro siti web.
Se volete creare siti web e applicazioni basati su jQuery, date un’occhiata ai piani di hosting WordPress gestito di Kinsta e alle soluzioni di hosting per applicazioni e database.
