Primi passi con jQuery
Primi passi con jQuery
Primi passi con jQuery è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 1 di 1. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 1 lezioni in totale.
Introduzione
Salve,
Per usare la libreria jQuery, dobbiamo prima aggiungerla al documento HTML.
Nell'esempio seguente, l'indirizzo della libreria jQuery è stato aggiunto come valore dell'attributo src tra i tag head.
Ora la libreria jQuery è pronta per essere usata nel nostro progetto.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
</head>
<body>
</body>
</html>Selezione con jQuery
Per operare sugli elementi HTML (che d'ora in poi chiameremo DOM), dobbiamo prima selezionare l'elemento.
In jQuery, per effettuare una selezione si usa il metodo $() o jQuery().
Il metodo $() è quello preferito dalla maggior parte degli sviluppatori.
Il parametro che assegniamo a questo metodo determina quale elemento vogliamo selezionare.
XPath
L'espressione che passiamo al metodo $ è il selettore XPath, che conosciamo anche dal CSS.
In altre parole, in jQuery selezioniamo gli elementi HTML nello stesso modo in cui selezioniamo gli elementi CSS.
Esempi di XPath
Supponiamo che il nostro codice HTML sia il seguente.
<div id="my-box" class="my-box">
<p class="my-p">
<span class="my-text">Hello jQuery</span>
</p>
</div>
Selezioniamo gli elementi HTML usando jQuery
// Dummy $ to demonstrate jQuery selectors in Node.js
function $(selector) {
console.log("Selector:", selector);
return [];
}
// Selects the element with the id of my-box.
$('#my-box')
// Selects the element with the my-box class.
$('.my-box')
// Selects all p elements that are descendants of the element with my-box id
$('#my-box p')
// Select the element with the .my-p class that is the child of the element with my-box class.
$('.my-box > .my-p')jQuery ci ha permesso di scrivere codice più conciso
Se volessimo ottenere lo stesso risultato con JavaScript Vanilla (puro), dovremmo scrivere più righe di codice.
jQuery ci ha permesso di scrivere codice più conciso grazie ai suoi metodi.
Attenzione
jQuery è solo una libreria e in realtà rende lo sviluppo web più semplice rispetto a JavaScript Vanilla.
Informazioni
Un altro vantaggio di jQuery è che tutti i browser moderni supportano il codice che scriviamo.
Parte del codice scritto con VanillaJS può causare effetti collaterali in alcuni browser, mentre jQuery garantisce lo stesso comportamento in ogni browser grazie all'astrazione che fornisce.
jQuery ci evita di dover tenere conto delle specificità dei browser quando scriviamo codice.
$(document).ready
Prima di passare alle basi di jQuery, impariamo a conoscere il metodo $(document).ready.
Ricorderemo dall'HTML che gli script JavaScript possono essere inseriti in qualsiasi punto tra il tag head o tra i tag body dell'HTML.
$(document).ready 2
Supponiamo di avere un codice HTML come quello riportato di seguito.
Il browser interpreterà il nostro codice dal tag <!DOCTYPE html> fino al tag di chiusura </html>.
L'istruzione <script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script> inizierà a scaricare la libreria tramite code.jquery.com.
Nella riga successiva, ha selezionato il DOM usando il metodo $ di jQuery. Tuttavia, qui c'è un problema. Se il documento HTML non è completamente caricato quando viene chiamato il metodo $ ('# test'), il nostro codice JS non funzionerà.
In questo caso, si usa il metodo $(document).ready per assicurarsi che il documento sia completamente caricato.
<div id="test">Hello Coddy</div>
<script>
$('#test').text('Hello Coddy')
</script>
$(document).ready 3
Dopo la definizione precedente,
tutto ciò che dobbiamo fare è usare il metodo $(document).ready(). Questo metodo attenderà il caricamento di tutti i contenuti e poi verrà eseguito.
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="test">Hello Coddy</div>
<script>
$(document).ready(function(){
$('#test').text('Hello Coddy')
})
</script>
</body>
</html>Domanda
Forza, risponda alla domanda!
Congratulazioni
Congratulazioni 🎉
In questa sezione abbiamo iniziato a studiare la libreria jQuery e il suo metodo $(document).ready().
Nella prossima sezione impareremo i selettori di jQuery.
Domande Frequenti
La lezione «Primi passi con jQuery» è gratuita?
Sì — il testo completo di «Primi passi con jQuery» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 1 lezioni in totale.
Cosa imparerò in «Primi passi con jQuery»?
Primi passi con jQuery Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare jQuery Academy?
Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 1.
Quanto tempo richiede la lezione «Primi passi con jQuery»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione jQuery Academy?
Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.