jQuery per principianti
jQuery per principianti
jQuery per principianti è 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,
Benvenuto al corso jQuery per principianti .
In questa sezione inizieremo a conoscere in dettaglio jQuery.
Introduzione 2
Prima di iniziare questo corso,
è necessario aver seguito i seguenti corsi.
- Introduzione all'HTML
- Introduzione al CSS
- JavaScript Core
- Se conoscete già questi argomenti, potete proseguire con il corso.
Iniziamo
Iniziamo.
Prima di tutto, rispondiamo alla domanda: a cosa serve jQuery?
Prima di rispondere alla domanda, ripassiamo le basi
Prima di rispondere alla domanda, ripassiamo le basi.
Il linguaggio HTML è un linguaggio di markup. Si tratta quindi di un linguaggio per la marcatura del testo, non di un linguaggio di programmazione. È lontano da concetti come l'orientamento agli oggetti. In altre parole, nella sua struttura non esistono oggetti: gli elementi che conosciamo sono tag HTML, attributi e così via.
JavaScript esegue operazioni sul DOM
Spesso è necessario eseguire operazioni sugli elementi HTML delle pagine web. Per consentire tutto ciò e rendere accessibili gli elementi HTML a JS, utilizziamo un modello chiamato DOM (Document Object Model).
JavaScript esegue operazioni sul DOM, che rappresenta l'equivalente a oggetti della pagina web. Questa attività viene chiamata manipolazione del DOM.
Esempio
Facciamo un esempio.
Abbiamo un elemento button come nell'esempio seguente, il cui testo è 'Not Clicked' . Quando facciamo clic sul pulsante, cambiamo il testo in 'Clicked'.
Per ottenere questo risultato, dobbiamo eseguire la manipolazione del DOM usando il linguaggio JavaScript.
Nel corso Introduzione a JavaScript abbiamo imparato a gestire un documento web con JavaScript. jQuery è una libreria che ci consente di rendere più concisa la manipolazione del DOM rispetto a JavaScript.
<!--Initial Element -->
<button id="my-button">Not Clicked</button>
<!---Desired Element after clicking the button-->
<button id="my-button">Clicked</button>Domanda
Una domanda per Lei!
Esempio 2
Nell'esempio seguente abbiamo definito un pulsante con id my-button.
Ora accediamo a questo elemento con JavaScript tramite il DOM.
Quando facciamo clic sul pulsante, raggiungiamo il DOM con il codice JS e modifichiamo in click la proprietà innerHTML dell'elemento con id my-button.
<button id="my-button">
Not Clicked
</button>
<script>
let myButton = document.getElementById('my-button');
myButton.addEventListener("click",
function(){
myButton.innerHTML = "Clicked"
})
</script>Attenzione
jQuery non è altro che una libreria nata per semplificare l'uso delle funzioni e dei metodi di JS Core.
In altre parole, ci permette di eseguire in modo più semplice e leggibile molte operazioni che potremmo fare con VanillaJS.
Spiegazione dell'esempio
Spieghiamo il codice.
let myButton = document.getElementById('my-button');
Assegniamo l'oggetto document di JavaScript alla variabile denominata myButton usando il metodo getElementById.
myButton.addEventListener("click", function(){
myButton.innerHTML = "Clicked"
})
In seguito abbiamo ascoltato l'evento click del pulsante e apportato modifiche al pulsante.
Abbiamo eseguito la manipolazione del DOM usando le funzionalità di base del linguaggio, senza usare alcuna libreria o framework, in quello che viene definito codice nativo o vanilla.
Scriviamo lo stesso codice con jQuery e sfruttiamo le funzionalità offerte dalla libreria jQuery.
Avvertenza
Il concetto, indicato in molti contesti come VanillaJS, consiste in realtà nell'utilizzo esclusivo degli oggetti, dei metodi e delle funzioni fondamentali di Javascript, oltre alle funzionalità offerte dal browser.
Esempio di jQuery
Di seguito abbiamo realizzato l'esempio precedente usando jQuery.
Prestate solo attenzione a quanto si accorcia il codice ignorando la sintassi.
<script>
$('#my-button').on('click', function(){
$(this).text('Clicked');
})
</script>
<button id="my-button">Not Clicked</button>Congratulazioni
Congratulazioni 🎉
In questa sezione abbiamo iniziato a studiare jQuery e abbiamo capito quanto jQuery possa semplificarci la vita.
Ci vediamo nella prossima sezione!
Domande Frequenti
La lezione «jQuery per principianti» è gratuita?
Sì — il testo completo di «jQuery per principianti» è 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 «jQuery per principianti»?
jQuery per principianti 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 «jQuery per principianti»?
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.