Introduzione
Se hai familiarità con il mondo della programmazione, sai bene quanto siano importanti i linguaggi di programmazione. Alcuni dei più critici e frequentemente utilizzati includono HTML, CSS, e JavaScript. Laddove HTML e CSS ti aiutano a progettare e strutturare il tuo sito web, JavaScript ti consente di renderlo interattivo. Esistono diverse librerie JavaScript che puoi utilizzare per aggiungere funzionalità uniche al tuo progetto web. Tra queste c'è la libreria jQuery.
jQuery di per sé non è un linguaggio di programmazione. È uno strumento che puoi utilizzare per facilitare lo sviluppo web in JavaScript. Questo aiuta a rendere i compiti più semplici e diretti. È notoriamente basato sul concetto di 'Scrivi meno, fai di più'. Oltre a semplificare lo sviluppo web, jQuery offre anche il vantaggio aggiuntivo della compatibilità cross-browser. Ciò significa che il codice può essere visualizzato correttamente indipendentemente dal browser utilizzato per l'output.
Per visualizzare meglio come jQuery renda le cose più concise, considera un esempio. Diciamo che stiamo scrivendo il programma "Hello, World!". Ecco come apparirebbe rispettivamente in JavaScript e jQuery:
|
1 2 |
JavaScript document.getElementById("demo").innerHTML = "Hello, World!"; |
|
1 2 |
jQuery $("#demo").html("Hello, World!"); |
Entrambe queste righe di codice produrranno lo stesso risultato. Tuttavia, come puoi vedere, jQuery rende la scrittura più concisa e diretta.
In questo tutorial, imparerai tutto sulle basi di jQuery. Puoi scaricare lo strumento per te stesso da questo sito web. Procederemo come se tu fossi un principiante assoluto senza alcuna conoscenza di jQuery. Questo tutorial ti insegnerà come installare jQuery e alcuni dei concetti fondamentali associati ad esso. Esploreremo alcuni dei selettori, eventi ed effetti comuni in jQuery. Successivamente, imparerai come testare concetti di sviluppo come API, DOM e CDN attraverso utili esempi. Continua a leggere per familiarizzare con il mondo di jQuery.
Prima di iniziare
Ci sono alcune cose che giocheranno a tuo favore se le conosci in anticipo. Ad esempio, avere una comprensione di base di come funzionano HTML e CSS ti aiuterà notevolmente. Non tratteremo questo aspetto in questo tutorial. Lavoreremo partendo dal presupposto che tu sappia almeno come configurare un sito web semplice. Dovresti anche avere una comprensione di base di come funziona la programmazione in generale. Ciò non significa necessariamente che tu debba essere un esperto di JavaScript per procedere. È sufficiente avere una certa familiarità con concetti come logica, variabili e tipi di dati nella programmazione.
Come configurare jQuery sul tuo sistema
Prima di tutto, vediamo come puoi configurare jQuery sul tuo sistema. jQuery è disponibile come file JavaScript poiché è una libreria JavaScript. Devi collegare questo file nel codice HTML del nostro sito web. Ci sono due modi per farlo. Come ho menzionato prima, un modo per farlo è scaricarlo da qui. Oltre al sito web ufficiale, puoi trovare jQuery anche nelle Google Hosted Libraries proprio qui.
Un altro modo è utilizzare la Content Delivery Network o CDN per collegare il file. Una CDN comprende un insieme di server che aiuta a distribuire i contenuti web a livello locale. L'hosting di un file jQuery tramite CDN consente al contenuto di arrivare molto più velocemente all'utente. Ecco perché da questo momento in poi in questo tutorial utilizzeremo la Content Delivery Network.
Nel nostro primo esempio, realizzeremo un progetto web. Questo piccolo progetto contiene style.css nella css/ directory. script.js si trova nella js/ directory. Infine, un index.html è presente nella root del progetto web:
In base a questo progetto, creeremo uno scheletro HTML. Successivamente, lo salveremo come index.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html lang="en"> <head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html> |
Qui è dove collegheremo il file jQuery. Come ho detto prima, lo collegheremo tramite CDN. Inserirai il link di jQuery prima del </body> tag. Dopodiché, puoi aggiungere il tuo file JavaScript personalizzato che era script.js nel nostro esempio. Ricorda di inserire sempre il file JavaScript sotto la libreria jQuery, in questo modo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html lang="en"> <head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/script.js"></script> </body> </html> |
Cosa faresti se invece scaricassi una copia locale della libreria jQuery? In tal caso, devi salvare il file jQuery nella js/ cartella. Poi puoi collegarlo come js/jquery.min.js.
jQuery: I fondamentali
Prima di immergerci nei dettagli, esaminiamo alcuni dei concetti fondamentali di jQuery. Il compito principale di jQuery è utilizzare il DOM per connettere gli elementi HTML nel browser. DOM sta per Document Object Model. È il metodo che consente a JavaScript di interagire con l'HTML in un browser. Puoi visualizzare il DOM facendo clic con il pulsante destro del mouse sulla tua pagina web e selezionando Ispeziona. L'HTML che appare negli Strumenti per sviluppatori è il DOM.
Un nodo è un singolo elemento HTML nel DOM. JavaScript può modificare tutti questi oggetti o elementi. Puoi immaginare la disposizione di questi oggetti come una struttura ad albero. <html> si trova alla radice mentre gli elementi si diramano ulteriormente.
Facendo clic con il pulsante destro del mouse e selezionando Visualizza sorgente pagina ti mostrerà l'HTML non elaborato del sito web. Ricorda che questo non è lo stesso del DOM. Mentre il DOM può essere modificato, il sorgente HTML è completamente statico. Qualsiasi modifica apportata in JavaScript non influirà su questo file HTML. L'intero <html> nodo è avvolto in uno strato esterno chiamato oggetto document.
Successivamente, vedremo come puoi manipolare la tua pagina web e le sue funzionalità utilizzando jQuery. Prima di farlo, tuttavia, devi assicurarti che la pagina sia pronta.
Digita quanto segue dopo aver creato il file script.js nella directory js/ :
|
1 2 3 4 5 |
$(document).ready(function() { // tutto il jQuery personalizzato andrà qui }); |
Ora qualsiasi codice tu scriva sarà racchiuso all'interno di questo codice. jQuery rileverà la prontezza del codice. Il codice all'interno di questa funzione verrà eseguito solo quando il DOM è pronto.
Rivedremo lo script "Hello, World!" di cui abbiamo parlato all'inizio del tutorial. Considera che vogliamo avviare questo script. Per utilizzare jQuery per stampare questo testo nel browser, dobbiamo applicare l'ID demo a un paragrafo vuoto a livello di blocco come questo:
|
1 2 3 4 5 6 |
... <body> <p id="demo"></p> ... |
Per chiamare jQuery, dobbiamo usare il $ simbolo. Puoi applicare la sintassi e i metodi CSS per accedere al DOM con jQuery. Un semplice esempio è il seguente:
|
1 |
$("selettore").metodo(); |
Questo è il formato che userai con jQuery. Sappiamo già che il # simbolo rappresenta l'ID in CSS. Pertanto, puoi accedere all'ID demo utilizzando il selettore #demo.html() . Questo metodo ti consentirà di modificare l'HTML presente in un elemento.
Il seguente codice mostra l'inserimento del programma “Hello, World” nel jQuery del file script.js’s ready() wrapper:
|
1 2 3 |
$(document).ready(function() { $("#demo").html("Hello, World!"); }); |
Devi aggiungere questa riga di codice al script.js file. Salva questo file. Dopodiché, puoi aprire il index.html file nel browser. Dovresti essere in grado di vedere l'output Hello, World!. Questo è anche un buon punto per controllare il DOM per una migliore comprensione. Fai clic con il tasto destro sul testo “Hello, World!”. Seleziona Ispeziona elemento. Il DOM mostrerà <p id="demo">Hello, World!</p>. Cliccando su Visualizza sorgente pagina, invece, vedrai solo l'HTML non elaborato. In questo caso, sarebbe <p id="demo"></p>.
Cosa sono i selettori?
Ora passeremo ad alcune delle caratteristiche fondamentali di jQuery. Tra queste ci sono i selettori. I selettori jQuery dicono al programma con quali elementi vuoi lavorare o che vuoi 'selezionare'. Sono molto simili ai selettori che potresti usare in CSS. Ecco il formato di base su come accedere a un selettore in jQuery:
|
1 |
$("selector") |
Puoi usare stringhe con virgolette singole o doppie, sebbene la guida di stile di jQuery preferisca quest'ultima. Se lo desideri, puoi visualizzare l'elenco completo dei selettori jQuery su questa pagina ufficiale. Per tua informazione, ecco alcuni dei selettori più frequentemente utilizzati:
-
$("*")
Questo è il selettore Wildcard. Selezionerà ogni elemento della tua pagina.
-
$(this)
Questo è il selettore Current. Seleziona l'elemento su cui stai attualmente operando con una funzione.
-
$("p")
Questo è il selettore Tag. Seleziona ogni istanza del tag <p> tag.
-
$(".example")
Questo è il selettore Class. Selezionerà ogni singolo elemento che ha la classe example applicata.
-
$("#example")
Questo è il selettore Id. Seleziona solo una singola istanza dell'id example id.
-
$("[type='text']")
Questo è il selettore Attribute. Selezionerà qualsiasi elemento dato con text applicato all'attributo type .
-
$("p:first-of-type")
Questo è il selettore Pseudo Element. Ti aiuta a selezionare il primo <p>.
Cosa sono gli eventi?
Ci sono alcune funzionalità della pagina web che si caricano non appena la pagina viene caricata. Considera l'esempio “Hello, World”. In questo caso, potremmo aggiungere il codice direttamente all'HTML sorgente. Ma cosa succede quando il caricamento di una funzionalità richiede l'interazione dell'utente? È qui che jQuery diventa utile.
Diciamo che vogliamo che appaia del testo dopo che l'utente ha fatto clic su un pulsante. Per aggiungere questa funzionalità, devi aggiungere un elemento <button> al file index.html . Questo pulsante rimarrà in ascolto dell'‘evento’ click:
|
1 2 3 4 5 6 |
... <body> <button id="trigger">Clicca mi</button> <p id="demo"></p> |
Ogni volta che l'utente interagisce con il browser, tale azione viene considerata un evento. L'interazione può avvenire tramite il puntatore del mouse o la tastiera. Nell'esempio sopra, il clic su un pulsante è il nostro evento. Ecco perché viene chiamato evento click.
Successivamente, dobbiamo chiamare una funzione che contenga il codice “Hello, World”. Per farlo, useremo il metodo click():
|
1 2 3 |
$(document).ready(function() { $("#trigger").click(); }); |
Come puoi vedere, l'ID del nostro elemento <button> si chiama trigger. Possiamo selezionarlo usando $(“#trigger"). Lo scopo dell'aggiunta del metodo click() è fare in modo che il programma rimanga in ascolto dell'evento click. Successivamente, inseriremo la funzione con il codice di testo all'interno del metodo:
|
1 2 3 |
function() { $("#demo").html("Hello, World!"); } |
Alla fine il nostro codice si presenterà così:
|
1 2 3 4 5 |
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); }); }); |
Ora puoi salvare il file script.js . Aggiorna il file index.html nel browser per applicare le modifiche. Dopo aver fatto clic sul pulsante, apparirà l'output di prova “Hello, World!”.
Esistono anche altri tipi di eventi jQuery oltre a click. Puoi visualizzare un elenco completo di questi metodi di evento da questo documento ufficiale. Ecco alcuni di quelli usati più di frequente in cui potresti imbatterti occasionalmente:
-
click()
L'evento click esegue il codice con un singolo clic del mouse.
-
hover()
L'evento hover esegue il codice quando il puntatore del mouse passa sopra un elemento. Puoi anche specificare se il codice viene attivato dall'entrata o dall'uscita del mouse con mouseenter() e mouseleave() rispettivamente.
-
submit()
L'invio di un modulo attiva il codice.
-
scroll()
Lo scorrimento dello schermo verso il basso sarà l'evento che esegue il codice.
-
keydown()
La pressione del tasto giù sulla tastiera eseguirà il codice.
Cosa sono gli effetti?
Gli effetti jQuery lavorano insieme agli eventi jQuery. Lo scopo principale degli effetti, come suggerisce il termine, è aggiungere animazioni alla pagina. Ti consentono di manipolare gli elementi per applicare vari tipi di effetti. Questi effetti possono essere attivati da determinati eventi.
Per capire meglio, consideriamo un esempio. Diciamo che vogliamo aprire e chiudere un overlay popup. Un modo per farlo sarebbe usare due ID diversi. Uno aprirebbe l'overlay e l'altro lo chiuderebbe. L'altro modo per farlo è usare una classe. Il vantaggio di usare una classe è che la stessa funzione è in grado di aprire e chiudere l'overlay.
Apri il tuo index.html . Quindi, elimina <button> e <p> dal body. Ora aggiungi le seguenti righe di codice all'HTML:
|
1 2 3 4 5 6 7 8 9 10 |
... <body> <button class="trigger">Apri</button> <section class="overlay"> <button class="trigger">Chiudi</button> </section> ... |
Diamo un'occhiata al nostro style.css successivo. Qui, il nostro obiettivo è utilizzare il minimo CSS per nascondere l'overlay. Per farlo, useremo display: none e centrarlo in questo modo:
|
1 2 3 4 5 6 7 8 9 10 |
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray; } |
Successivamente, utilizzeremo il metodo toggle() . Questo metodo ci consentirà di alternare la proprietà display tra none e block. Di conseguenza, l'overlay verrà nascosto e mostrato ogni volta che facciamo clic. Aggiungi questo codice al file script.js :
|
1 2 3 4 5 |
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); }); }); |
Infine, aggiorna index.html per applicare le modifiche. Ora sarai in grado di alternare la visibilità della modale. Tutto ciò che devi fare è fare clic sui pulsanti. Ci sono altri effetti jQuery che puoi usare in combinazione con questo. Ad esempio, puoi cambiare il semplice toggle() in slideToggle() o fadeToggle().
Di seguito sono riportati alcuni dei metodi di effetti comunemente usati in jQuery:
-
toggle()
Questo metodo consente di modificare la visibilità dell'elemento. Gli effetti unidirezionali associati ad esso sono show() e hide().
-
fadeToggle()
Questo metodo ti consentirà di alternare la visibilità e l'opacità dell'elemento tramite animazione. Gli effetti unidirezionali in questo caso sono fadeIn() e fadeOut().
-
slideToggle()
Questo metodo ti consentirà di utilizzare effetti di scorrimento per alternare la visibilità dell'elemento. Gli effetti unidirezionali in questo caso sono slideUp() e slideDown().
-
animate()
Questo metodo di effetto consente di eseguire effetti di animazione personalizzati. Utilizza la proprietà CSS dell'elemento specificato.
Conclusione
Speriamo che questo tutorial si sia rivelato utile per fornire un'introduzione approfondita a jQuery. È uno strumento incredibilmente utile che contribuisce notevolmente a facilitare lo sviluppo web e la scrittura del codice. Questo è particolarmente vero se sei relativamente nuovo nel mondo della programmazione.
Abbiamo esplorato i vari elementi che costituiscono le basi di jQuery. Abbiamo anche imparato come selezionare e modificare questi elementi e come utilizzare al meglio eventi ed effetti. La padronanza di strumenti come jQuery può aiutarti a creare siti web ricchi di funzionalità interattive che garantiscono un'esperienza utente coinvolgente.
Dai un'occhiata ad alcune risorse del nostro blog che ti aiuteranno quando lavori con JavaScript:
- Una guida sull'aggiunta di JavaScript a HTML
- Lavorare con JavaScript: come funzionano le classi
- Lavorare con JavaScript: come funzionano i prototipi e l'ereditarietà
Buona programmazione!
Commenti
Ancora nessun commento. Scrivi il primo.