Stili con jQuery
Stili con jQuery
Stili 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,
In tutti gli esempi precedenti abbiamo lavorato sugli oggetti HTML DOM.
Con jQuery possiamo anche manipolare gli stili degli elementi HTML.
jQuery fornisce alcuni metodi per eseguire questa operazione.
classe
Nei primi esempi che realizzeremo vedremo come utilizzare le classi con jQuery.
Nell'esempio seguente, includiamo la libreria jQuery nel codice HTML e definiamo due classi chiamate pink e yellow, che rendono il testo rispettivamente rosa e giallo.
Cominciamo 🚀
esempio
Abbiamo aggiunto un elemento <p> tra i tag <body>.
Al momento questo elemento non ha ancora una classe.
<style>
.pink{
color:pink;
}
.yellow{
color: yellow;
}
</style>
<p>lorem ipsum </p>esempio 2
Ora aggiungiamo la classe pink all'elemento paragrafo utilizzando il metodo addClass().
Nella schermata di anteprima osserveremo che il colore del testo Lorem ipsum diventa rosa.
<style>
.pink{
color:pink;
}
</style>
<p>lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//adding pink class to p element
$('p').addClass('pink');
});
</script>removeClass
metodo removeClass()
Se desideriamo rimuovere le classi dagli elementi HTML, utilizziamo il metodo removeClass().
Abbiamo modificato l'esempio seguente e inizialmente definito la classe pink nel nostro elemento HTML. Non appena il DOM verrà caricato, la classe pink verrà rimossa dal nostro elemento p.
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum </p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//removing pink class to p element
$('p').removeClass('pink');
});
</script>toggle Class
metodo toggleClass()
Come suggerisce il nome, con questo metodo
se una classe esiste nell'elemento di destinazione, viene rimossa; altrimenti viene aggiunta.
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
/*
Since p element hasn't pink class,
pink class will be added.
*/
$('p').toggleClass('pink');
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
});
</script>Metodo Css
metodo css()
Abbiamo visto i metodi per aggiungere e rimuovere classi.
Ora impariamo a utilizzare il metodo CSS per definire stili inline per i nostri nodi HTML.
Il metodo CSS accetta due parametri.
- Il primo parametro è il nome della proprietà da assegnare.
- Il secondo parametro è il valore della proprietà da assegnare.
L'esempio seguente mostra diversi utilizzi del metodo CSS.
<button>My Button</button>
<script>
/*
Below, the button element's color style
has been read and written
to the color variable.
*/
let color = $('button').css('color');
/*
Now let's change the button color by assigning
the red value to the second argument=
*/
$('button').css('color', 'red')
/*
If we want to change more than one style of
an element at the same time, we pass JSON type arguments.
*/
$("button").css({"color": "red", "padding": "20px"});
</script>
API di jQuery
Abbiamo imparato molte operazioni di manipolazione del DOM con jQuery.
Oltre ai metodi che abbiamo studiato, jQuery dispone di molti altri metodi di manipolazione.
Può consultare l'intera API facendo clic sul link seguente.
Congratulazioni
Congratulazioni 🎉
Abbiamo imparato a gestire gli stili con jQuery.
Nella prossima sezione impareremo a gestire gli eventi in jQuery.
Domande Frequenti
La lezione «Stili con jQuery» è gratuita?
Sì — il testo completo di «Stili 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 «Stili con jQuery»?
Stili 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 «Stili 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.