Styling med jQuery
Styling med jQuery
Styling med jQuery er en gratis jQuery Academy-lektion på CoddyKit. Dette er lektion 1 af 1. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i jQuery Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. jQuery Academy-kurset indeholder 1 lektioner i alt.
Introduktion
Hej
Indtil nu har vi arbejdet med HTML DOM-objekter i alle eksemplerne.
Med jQuery kan vi også manipulere HTML-elementernes typografi.
jQuery indeholder nogle metoder, der gør dette muligt.
klasse
I de første eksempler vil vi se på brugen af klasser med jQuery.
I eksemplet nedenfor indsætter vi vores jQuery-bibliotek i HTML og definerer to klasser med navnene pink og yellow, som gør teksten pink og gul.
Lad os komme i gang 🚀
eksempel
Vi tilføjede et <p>-element mellem <body>-taggene.
Dette element har endnu ikke en klasse.
<style>
.pink{
color:pink;
}
.yellow{
color: yellow;
}
</style>
<p>lorem ipsum </p>eksempel 2
Lad os nu føje pink-klassen til afsnitselementet ved hjælp af addClass()-metoden.
På forhåndsvisningsskærmen kan vi se, at farven på teksten Lorem ipsum bliver pink.
<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
removeClass()-metoden
Hvis vi vil fjerne klasser fra HTML-elementer, bruges removeClass()-metoden.
Vi har ændret eksemplet nedenfor og oprindeligt defineret pink-klassen i vores HTML-element. Så snart DOM'en er indlæst, fjernes pink-klassen fra vores p-element.
<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>skift klasse
toggleClass()-metoden
Som navnet antyder kan denne metode
fjerne en klasse fra målelementet, hvis klassen findes, eller tilføje den, hvis den ikke findes.
<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>CSS-metoden
css()-metoden
Vi har set metoderne til at tilføje og fjerne klasser.
Lad os nu lære CSS-metoden, der bruges til at definere indlejrede typografier for vores HTML-noder.
CSS-metoden tager to parametre.
- Den første parameter er navnet på den egenskab, der skal tildeles.
- Den anden parameter er værdien for den egenskab, der skal tildeles.
Det følgende eksempel viser forskellige anvendelser af CSS-metoden.
<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>
jQuery-API
Vi har lært meget om manipulation af DOM med jQuery.
Ud over de metoder, vi har lært, har jQuery mange manipulationsmetoder.
Du kan gennemse hele API'et ved at klikke på linket nedenfor.
Tillykke
Tillykke 🎉
Vi har lært typografi med jQuery.
I næste afsnit lærer vi om håndtering af hændelser i jQuery.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 22
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Styling med jQuery” gratis?
Ja — alle 3 lektioner i læringssporet jQuery Academy, inklusive “Styling med jQuery”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. jQuery Academy-kurset indeholder 1 lektioner i alt.
Hvad lærer jeg i “Styling med jQuery”?
Styling med jQuery Du øver dig i jQuery Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på jQuery Academy?
Der kræves ingen tidligere erfaring. jQuery Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 1.
Hvor lang tid tager lektionen “Styling med jQuery”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne jQuery Academy-lektion?
Ja. Alle jQuery Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.