Introduzione
HTML, CSS e JavaScript sono i tre linguaggi fondamentali del web. Strutturiamo i nostri siti web con HTML, li stile con CSS, e aggiungere funzionalità interattive con JavaScript. In effetti, la maggior parte delle animazioni e qualsiasi azione che si verifica a seguito di un utente che fa clic, passa il mouse o scorre sono costruite con JavaScript.
jQuery è la libreria JavaScript “Scrivi meno, fai di più”. Non è un linguaggio di programmazione, ma piuttosto uno strumento utilizzato per rendere più concisa la scrittura di attività JavaScript comuni., jQuery ha il vantaggio di essere compatibile con browser diversi, il che significa che puoi essere certo che l’output del tuo codice verrà visualizzato come previsto in qualsiasi browser moderno.
Confrontando un semplice ” Ciao, Mondo!”programma sia in JavaScript e jQuery, possiamo vedere la differenza di come sono entrambi scritti.
document.getElementById("demo").innerHTML = "Hello, World!";$("#demo").html("Hello, World!");Questo breve esempio dimostra come jQuery può ottenere lo stesso risultato finale di JavaScript semplice in modo succinto.,
Obiettivi
Questa guida non presuppone alcuna conoscenza preliminare di jQuery e tratterà i seguenti argomenti:
- Come installare jQuery in un progetto web.
- Le definizioni di importanti concetti di sviluppo web come API, DOM e CDN.
- Selettori jQuery comuni, eventi ed effetti.
- Esempi per testare i concetti appresi in tutto l’articolo.
Prerequisiti
Prima di iniziare questa guida è necessario quanto segue:
- Una conoscenza di base di HTML e CSS., Dovresti già sapere come impostare un sito Web semplice e avere una comprensione dei selettori CSS come ID, classi e pseudo elementi.
- Una comprensione dei fondamenti della programmazione. Mentre è possibile iniziare a scrivere jQuery senza una conoscenza avanzata di JavaScript, la familiarità con i concetti di variabili e tipi di dati così come la matematica e la logica aiuterà in modo significativo.
Impostazione di jQuery
jQuery è un file JavaScript a cui ti collegherai nel tuo HTML. Ci sono due modi per includere jQuery in un progetto:
- Scaricare una copia locale.,
- Collegamento a un file tramite Content Delivery Network (CDN).
Nota: Una rete di distribuzione di contenuti (CDN) è un sistema di più server che forniscono contenuti Web a un utente in base alla posizione geografica. Quando ti colleghi a un file jQuery ospitato tramite CDN, potenzialmente arriverà più velocemente e in modo più efficiente per l’utente rispetto a quando lo hai ospitato sul tuo server.
Useremo il CDN per fare riferimento a jQuery nei nostri esempi. Puoi trovare l’ultima versione di jQuery nelle librerie ospitate di Google., Se invece si desidera scaricarlo, è possibile ottenere una copia di jQuery dal sito ufficiale.
Inizieremo questo esercizio creando un piccolo progetto web. Sarà composto da style.css nella directory css/, scripts.js nella directory js/ e da un principale index.html nella radice del progetto.
project/├── css/| └── style.css├── js/| └── scripts.js└── index.htmlPer iniziare, creare uno scheletro HTML e salvarlo comeindex.html.
<!doctype html><html lang="en"><head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"></head><body></body></html>Link al CDN jQuery subito prima della chiusura</body>tag, seguito dal proprio file JavaScript personalizzato,scripts.js.
Il tuo file JavaScript (scripts.js) deve essere incluso sotto la libreria jQuery nel documento o non funzionerà.
Nota: se hai scaricato una copia locale di jQuery, salvala nella tua cartellajs/ e collegala ad essa injs/jquery.min.js.,
A questo punto, la libreria jQuery viene ora caricata nel tuo sito e hai pieno accesso all’API jQuery.
Nota: Un’API (Application Programming Interface) è un’interfaccia che consente ai programmi software di interagire tra loro. In questo caso, l’API per jQuery contiene tutte le informazioni e la documentazione necessarie per accedere a jQuery.
Utilizzando jQuery
Al suo interno, jQuery viene utilizzato per connettersi con elementi HTML nel browser tramite il DOM.,
Il Document Object Model (DOM) è il metodo con cui JavaScript (e jQuery) interagiscono con l’HTML in un browser. Per visualizzare esattamente ciò che il DOM è, nel browser web, fare clic destro sulla pagina web corrente selezionare Inspect. Questo aprirà Strumenti di sviluppo. Il codice HTML che vedete qui è il DOM.
Ogni elemento HTML è considerato un nodo nel DOM – un oggetto che JavaScript può toccare. Questi oggetti sono disposti in una struttura ad albero, con <html> più vicino alla radice e ogni elemento nidificato è un ramo più avanti lungo l’albero., JavaScript può aggiungere, rimuovere e modificare uno di questi elementi.
Se fai nuovamente clic destro sul sito e fai clic su Visualizza origine pagina, vedrai l’output HTML grezzo del sito web. All’inizio è facile confondere il DOM con l’origine HTML, ma sono diversi: l’origine della pagina è esattamente ciò che è scritto nel file HTML. È statico e non cambierà e non sarà influenzato da JavaScript. Il DOM è dinamico e può cambiare.
Il livello più esterno del DOM, il livello che avvolge l’intero nodo<html>, è l’oggetto documento., Per iniziare a manipolare la pagina con jQuery, dobbiamo prima assicurarci che il documento sia “pronto”.
Creare il filescripts.js nella directoryjs/ e digitare il codice seguente:
$(document).ready(function() { // all custom jQuery will go here});Tutto il codice jQuery che scrivi verrà avvolto nel codice sopra. jQuery rileverà questo stato di prontezza in modo che il codice incluso all’interno di questa funzione venga eseguito solo una volta che il DOM è pronto per l’esecuzione del codice JavaScript., Anche se in alcuni casi JavaScript non verrà caricato fino a quando gli elementi non vengono renderizzati, incluso questo blocco è considerato la migliore pratica.
Nell’introduzione di questo articolo, hai visto un semplice “Ciao, Mondo!” script. Per avviare questo script e stampare il testo sul browser con jQuery, per prima cosa creeremo un elemento di paragrafo a livello di blocco vuoto con l’ID demo applicato ad esso.
...<body><p></p>...jQuery è chiamato con e rappresentato dal simbolo del dollaro ($)., Accediamo al DOM con jQuery usando principalmente la sintassi CSS e applichiamo un’azione con un metodo. Un esempio di base di jQuery segue questo formato.
$("selector").method();Poiché un ID è rappresentato da un simbolo hash (#) in CSS, accederemo all’ID demo con il selettore #demo. html() è un metodo che modifica l’HTML all’interno di un elemento.
Ora stiamo andando a mettere la nostra abitudine ” Ciao, Mondo!”programma all’interno del wrapper jQueryready()., Aggiungi questa riga al filescripts.js all’interno della funzione esistente:
$(document).ready(function() { $("#demo").html("Hello, World!");});Una volta salvato il file, è possibile aprire il fileindex.html nel browser. Se tutto ha funzionato correttamente, vedrai l’output Hello, World!.
Selettori
I selettori sono come diciamo a jQuery su quali elementi vogliamo lavorare. La maggior parte dei selettori jQuery sono gli stessi di quelli che hai familiarità con i CSS, con alcune aggiunte specifiche di jQuery., È possibile visualizzare l’elenco completo dei selettori jQuery sulle loro pagine di documentazione ufficiale.
Per accedere a un selettore, utilizzare il simbolo jQuery $, seguito da parentesi ().
$("selector")Le stringhe con virgolette doppie sono preferite dalla guida allo stile di jQuery, sebbene vengano spesso utilizzate anche stringhe con virgolette singole.
Di seguito è riportata una breve panoramica di alcuni dei selettori più comunemente utilizzati.,
Generalmente, le classi e gli ID sono ciò che incontrerai di più: le classi quando vuoi selezionare più elementi e gli ID quando vuoi selezionarne solo uno.
Eventi jQuery
Nel “Ciao, Mondo!”ad esempio, il codice è stato eseguito non appena la pagina è stata caricata e il documento è stato pronto, e quindi non ha richiesto alcuna interazione da parte dell’utente. In questo caso, avremmo potuto scrivere il testo direttamente nell’HTML senza preoccuparsi di jQuery. Tuttavia, avremo bisogno di utilizzare jQuery se vogliamo far apparire il testo sulla pagina con il clic di un pulsante.,
Tornare al fileindex.html e aggiungere un elemento<button>. Useremo questo pulsante per ascoltare il nostro evento click.
...<body><button>Click me</button><p></p> Useremo il metodoclick() per chiamare una funzione contenente il nostro ” Ciao, Mondo!” codice.
$(document).ready(function() { $("#trigger").click();});function() { $("#demo").html("Hello, World!");}Ecco il codice finale.
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); });});Salva il filescripts.js e aggiornaindex.html nel browser., Ora, quando si fa clic sul pulsante, il ” Ciao, Mondo!”apparirà il testo.
Un evento è ogni volta che l’utente interagisce con il browser. Di solito questo viene fatto con il mouse o la tastiera. L’esempio che abbiamo appena creato utilizzato un evento click. Dalla documentazione ufficiale di jQuery, è possibile visualizzare un elenco completo dei metodi di eventi jQuery. Di seguito è riportata una breve panoramica di alcuni dei metodi di evento più comunemente utilizzati.
Per animare o sfumare le immagini mentre un utente scorre lungo lo schermo, usa il metodo scroll()., Per uscire da un menu utilizzando il tastoESC, utilizzare il metodokeydown(). Per creare un menu a discesa a fisarmonica, utilizzare il metodoclick().
Comprendere gli eventi è essenziale per creare contenuti dinamici del sito Web con jQuery.
Effetti jQuery
Gli effetti jQuery funzionano di pari passo con gli eventi consentendo di aggiungere animazioni e manipolare in altro modo elementi nella pagina.
Faremo un esempio in cui apriamo e chiudiamo una sovrapposizione popup., Mentre potremmo usare due ID-uno per aprire l’overlay e un altro per chiuderlo – useremo invece una classe per aprire e chiudere l’overlay con la stessa funzione.
Elimina i tag <button> e <p>dal corpo del file index.html e aggiungi quanto segue al tuo documento HTML:
...<body><button class="trigger">Open</button><section class="overlay"> <button class="trigger">Close</button></section>...Nel nostro filestyle.css, useremo una quantità minima di CSS per nascondere iloverlaycondisplay: none e centrarlo sullo schermo.,
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray;}nel scripts.js file, stiamo andando a utilizzare il toggle() metodo, che farà passare il CSS display proprietà none e block, nascondere e mostrare la sovrapposizione quando si fa clic.
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); });});Aggiornaindex.html. Ora sarai in grado di attivare o disattivare la visibilità del modale facendo clic sui pulsanti., Puoi cambiaretoggle() infadeToggle() oslideToggle() per vedere alcuni altri effetti jQuery incorporati.
Di seguito è riportata una breve panoramica di alcuni dei metodi di effetto più comunemente utilizzati.
-
toggle()– Toggle: cambia la visibilità di uno o più elementi.show()ehide()sono i relativi effetti unidirezionali. -
fadeToggle()– Fade Toggle: cambia la visibilità e anima l’opacità di uno o più elementi.,fadeIn()efadeOut()sono gli effetti unidirezionali correlati. -
slideToggle()– Slide Toggle alterna la visibilità di uno o più elementi con un effetto scorrevole.slideDown()eslideUp()sono i relativi effetti unidirezionali. -
animate()– Animate esegue effetti di animazione personalizzati sulla proprietà CSS di un elemento.,
Usiamo gli eventi jQuery per ascoltare un’interazione dell’utente come il clic di un pulsante e usiamo gli effetti jQuery per manipolare ulteriormente gli elementi una volta che l’azione ha luogo.
Conclusione
In questa guida, abbiamo imparato come selezionare e manipolare gli elementi con jQuery, e come gli eventi e gli effetti lavorano insieme per rendere un’esperienza web interattiva per l’utente.
Da qui, dovresti avere una comprensione più profonda delle capacità di jQuery e iniziare a scrivere il tuo codice.