Styla med JQuery
Styla med JQuery
Styla med JQuery är en gratis lektion i jQuery Academy på CoddyKit. Detta är lektion 1 av 1. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för jQuery Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i jQuery Academy innehåller totalt 1 lektioner.
Introduktion
Hej!
I alla tidigare exempel har vi arbetat med HTML DOM-objekt.
Med jQuery kan vi även ändra formatet på HTML-element.
JQuery tillhandahåller några metoder för detta.
klass
I de första exemplen kommer vi att se hur klasser används med JQuery.
I exemplet nedan läser vi in vårt JQuery-bibliotek i HTML och definierar två klasser med namnen pink och yellow, som gör texten rosa respektive gul.
Nu börjar vi 🚀
exempel
Vi lade till ett <p>-element mellan <body>-taggarna.
För närvarande har det här elementet ännu ingen klass.
<style>
.pink{
color:pink;
}
.yellow{
color: yellow;
}
</style>
<p>lorem ipsum </p>exempel 2
Nu lägger vi till klassen pink i p-elementet med metoden addClass().
På förhandsgranskningsskärmen ser vi att färgen på Lorem ipsum-texten blir 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
Metoden removeClass()
Om vi vill ta bort klasser från HTML-element används metoden removeClass().
Vi ändrade exemplet nedan och definierade från början klassen pink i vårt HTML-element. Så snart DOM har lästs in tas klassen pink bort från vårt 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>växla klass
Metoden toggleClass()
Som namnet antyder innebär den här metoden att
om en klass finns i målelementet tas den bort, och annars läggs den till.
<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
Metoden css()
Vi har sett metoderna för att lägga till och ta bort klasser.
Nu ska vi lära oss CSS-metoden, som används för att definiera inline-format för våra HTML-noder.
CSS-metoden tar två parametrar.
- Den första parametern är namnet på egenskapen som ska tilldelas.
- Den andra parametern är värdet på egenskapen som ska tilldelas.
Följande exempel visar olika användningsområden för 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 oss många DOM-manipulationer med jQuery.
Utöver metoderna vi har lärt oss har JQuery många fler manipulationsmetoder.
Du kan bläddra igenom hela API:et genom att klicka på länken nedan.
Grattis
Grattis 🎉
Vi har lärt oss styling med jQuery.
I nästa avsnitt ska vi lära oss händelsehantering i jQuery.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 22
- Lektioner
- 48
Vanliga frågor
Är lektionen ”Styla med JQuery” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen jQuery Academy, inklusive ”Styla med JQuery”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i jQuery Academy innehåller totalt 1 lektioner.
Vad lär jag mig i ”Styla med JQuery”?
Styla med JQuery Ni övar på jQuery Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig jQuery Academy?
Du behöver inga förkunskaper. Utbildningen i jQuery Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 1.
Hur lång tid tar lektionen ”Styla med JQuery”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här jQuery Academy-lektionen?
Ja. Varje jQuery Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.