Tyylien määrittäminen JQuerylla
Tyylien määrittäminen JQuerylla
Tyylien määrittäminen JQuerylla on ilmainen jQuery Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/1. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu jQuery Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. jQuery Academy-kurssilla on yhteensä 1 oppituntia.
Johdanto
Hei,
Olemme tähän asti työskennelleet kaikissa esimerkeissä HTML DOM -objektien parissa.
jQuerylla voimme käsitellä myös HTML-elementtien tyylejä.
JQuery tarjoaa tähän useita metodeja.
Luokat
Ensimmäisissä esimerkeissä tutustumme luokkien käyttöön JQueryssa.
Alla olevassa esimerkissä lisäämme JQuery-kirjaston HTML-dokumenttiin ja määrittelemme kaksi luokkaa, joiden nimet ovat pink ja yellow ja jotka muuttavat tekstin vaaleanpunaiseksi ja keltaiseksi.
Aloitetaan 🚀
Esimerkki
Lisäsimme <p>-elementin <body>-tagien väliin.
Tällä elementillä ei vielä ole luokkaa.
<style>
.pink{
color:pink;
}
.yellow{
color: yellow;
}
</style>
<p>lorem ipsum </p>Esimerkki 2
Lisätään nyt pink-luokka kappale-elementtiin addClass()-metodilla.
Esikatselunäkymässä näemme, että Lorem ipsum -tekstin väri muuttuu vaaleanpunaiseksi.
<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()-metodi
Jos haluamme poistaa luokkia HTML-elementeistä, käytämme removeClass()-metodia.
Muutimme alla olevaa esimerkkiä ja määrittelimme pink-luokan aluksi HTML-elementissämme. Heti DOM:n latauduttua p-elementissä oleva pink-luokka poistetaan.
<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>toggleClass
toggleClass()-metodi
Kuten nimi kertoo, tällä metodilla
kohde-elementissä oleva luokka poistetaan tai lisätään.
<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-metodi
css()-metodi
Olemme tutustuneet luokkien lisäämiseen ja poistamiseen käytettäviin metodeihin.
Opitaan nyt CSS-metodi, jolla HTML-solmuille voidaan määrittää inline-tyylejä.
CSS-metodi ottaa kaksi parametria.
- Ensimmäinen parametri on määritettävän ominaisuuden nimi.
- Toinen parametri on määritettävän ominaisuuden arvo.
Seuraava esimerkki näyttää CSS-metodin erilaisia käyttötapoja.
<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
Olemme oppineet paljon DOM:n käsittelytoiminnoista jQuerylla.
Oppimiemme metodien lisäksi JQuery sisältää monia muitakin käsittelymetodeja.
Voitte selata koko APIa napsauttamalla alla olevaa linkkiä.
Onnittelut
Onnittelut 🎉
Opimme tyylien määrittämisen jQuerylla.
Seuraavassa osiossa opimme tapahtumien hallintaa jQuerylla.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 22
- Oppitunnit
- 48
Usein kysytyt kysymykset
Onko oppitunti ”Tyylien määrittäminen JQuerylla” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa jQuery Academy-oppimispolun 3 oppituntia, myös oppitunnin “Tyylien määrittäminen JQuerylla”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. jQuery Academy-kurssilla on yhteensä 1 oppituntia.
Mitä opin oppitunnilla ”Tyylien määrittäminen JQuerylla”?
Tyylien määrittäminen JQuerylla Harjoittelet jQuery Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni jQuery Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin jQuery Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/1.
Kuinka kauan ”Tyylien määrittäminen JQuerylla”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä jQuery Academy-oppitunnilla?
Kyllä. Jokainen jQuery Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.