jQuery-kirjaston harjoittelu
Kaikki kappaleet p, joiden sisällä
on b-tagi, kääri
div-tagiin.
Etsi kaikki kappaleet p, joilla on luokka
www, aseta niiden alkuun teksti
'!', lisää sitten näihin kappaleisiin
myös otsikot h1-h6 ja
väritä nämä kappaleet ja otsikot punaisiksi.
Etsi kaikki kappaleet p ja korvaa ne
div-tagilla, jolla on sama sisältö.
Etsi kaikki valintaruudut sivulla ja estä parilliset löydetyistä.
Aseta kaikille
estämättömille
valintaruuduille
tila <a href="/fi/markup/manual/html/attr/checked/">'valittu'</a>.
Annettu elementti #test. Aseta sen välittömälle
ylänaapurille teksti '!', ja alanaapurille
teksti '?'. Ratkaise tehtävä yhdellä
ketjulla.
Annettu elementti #test. Aseta sen välittömille
ylä- ja alanaapureille elementin #test teksti.
Annettu elementti #test. Etsi sen yläpuolisista naapureista
lähin kappale ja aseta sille elementin
#test teksti.
Etsi toinen li sivulla,
lisää sille luokka www, kääri
se sisältä i-tagilla, lisää sen jälkeen
li tekstillä 'hei'.
Etsi kymmenes li sivulla,
etsi sen vanhempi, hae vanhemman välitön
ylänaapuri, kääri se
<div class="www"></div>:een.
Jokaiselle kappaleelle p, paitsi kappaleille,
joilla on luokka www, lisää loppuun sen
järjestysnumero.
Etsi kaikki kappaleet p ja aseta
jokaisen kappaleen eteen sen kopio. Väritä kopio
punaiseksi ja alkuperäinen kappale vihreäksi.
Etsi kappaleet p, jotka ovat
välittömästi h2:n alapuolella
ja siirrä jokainen kappale niin, että se
on välittömästi h2:n yläpuolella.
Etsi kaikki tyhjät kappaleet p
(ilman tekstiä) ja lisää niihin tekstin
välittömältä ylänaapurilta.
b-tagin vanhemmalle, jos se on
elementti, jolla on luokka www tai kappale
p, aseta punainen väri ja
tekstin koko
30px:ksi.
Kaikille tyhjille kappaleille p aseta
läheisimmän yläpuolisen h2-tagin teksti.
Annettu syötekentät luvuilla. Tee niin, että syötekenttiin tulee näiden lukujen neliöt.
Annettu elementti #test. Aseta selle alkuun tekstin
välittömältä ylänaapurilta, ja loppuun
- tekstin välittömältä alanaapurilta.
Annettu elementti #test. Etsi sen toinen naapuri
ylhäällä ja sen toinen naapuri alhaalla. Tee
niin, että löydetyt elementit vaihtavat
tekstiä (ylänaapuri ottaa alanaapurin tekstin
ja päinvastoin).
Annettu elementti div. Valitse
siitä kaikki välittömät jälkeläiset, jotka
eivät ole otsikoita ja väritä ne
punaiseksi.
Etsi kaikki kappaleet p, väritä
ne punaiseksi. Valitse sitten löydetyistä
kappaleista kappaleet, joilla on luokka www ja aseta
niille teksti '!'.
Etsi kaikki kappaleet p, joilla on luokka
www, väritä ne punaiseksi.
Valitse sitten löydetyistä kappaleista ensimmäinen
ja aseta sille teksti '!', sitten valitse
viimeinen ja aseta sille teksti '?'.
Ratkaise tehtävä yhdellä ketjulla.
Etsi kaikki kappaleet p, aseta
jokaisen niistä loppuun sama teksti, joka
on sen sisällä (eli tekstistä kappaleessa
tulee kahdesti).
Etsi kaikki kappaleet p, aseta
jokaisen niistä loppuun sen järjestysnumero
joukossa.
Annettu kappaleet luvuilla. Aseta jokaisen niistä loppuun luku, joka siinä on, kerrottuna sen järjestysnumerolla joukossa.
Kappaleen p napsautuksessa poista
sen välittömät ylä- ja alanaapurit.
Kappaleen p napsautuksessa poista
kaikki sen yläpuoliset naapurit ensimmäiseen otsikkoon
h1-h6 asti (eli elementtejä, jotka ovat
tämän otsikon yläpuolella ja itse otsikon
ei tarvitse poistaa).
Kappaleen p napsautuksessa poista
sen lähin alapuolinen naapuri, jolla on
luokka www.
Kappaleen p napsautuksessa poista
sen viides naapuri alhaalta.
Kappaleen p napsautuksessa poista
sen viides naapuri alhaalta, jos se ei ole
h2.
Kappaleen p napsautuksessa poista
sen viides naapuri alhaalta, jos tällä naapurilla
ei ole sisällä b-tagia.
Kappaleen p napsautuksessa poista
sen viides naapuri alhaalta, jos tämä naapuri
ei ole välittömästi h2:n jälkeen.
Annettu elementti #test. Vaihda tämä
elementti paikkaa sen välittömän
alanaapurin kanssa.
Annettu elementti #test. Sen
välittömän alanaapurin jälkeen lisää
elementistämme kopio.
Annettu elementti #test. Vaihda tämä
elementti paikkaa sen lähimmän naapurin
alhaalla, jolla on luokka www, kanssa.
Etsi kaikki kappaleet p, jotka
sisällä yhden vanhemman ovat yhden
ja toisen h2:n välissä.
Kääri jokainen kappale p ulkopuolelta
ja sisältä div:een.
Etsi kaikki kappaleet p, joiden
välitön vanhempi ei ole div
ja kääri jokainen niistä <div class="www"></div>:een.
Etsi kaikki kappaleet p. Poista
niiden vanhempi (tee sille unwrap),
jos tämä vanhempi ei ole div, jolla on luokka
www. Sitten kappaleet, joille
vanhempi poistettiin, kääri div:een
luokalla zzz.
Etsi kaikki elementin #test vanhemmat
ja luo taulukko näiden vanhempien CSS-luokista.
Etsi kaikki kappaleet p, joilla on
attribuutti class, ja kääri jokainen niistä
div:een samoilla luokilla,
kuin löydetyllä kappaleella, ja poista kunkin
kappaleen luokat yhdessä attribuutin class kanssa.
Etsi kaikki kappaleet p
#test:stä, aseta niille loppuun teksti
'!', sulje sitten pois löydetyistä
kappaleet, joilla on luokka www, ja jäljelle jääneille
aseta punainen väri.
Etsi kaikki li sivulla,
lisää sitten toiseksi viimeisen eteen
yksi li tekstillä 'kohta'.
Etsi kaikki li sivulla,
valitse sitten löydetyistä toinen, kolmas
ja neljäs lopusta ja aseta niille teksti
'!'.
Etsi ol, jolla on #test
ja järjestä kaikki li
siinä käänteiseen järjestykseen.
Annettu elementti #test. Etsi kaikki sen
yläpuoliset naapurit ja kaikki sen alapuoliset naapurit ja
vaihda niiden paikkoja (eli kaikki, mikä on
elementin edessä, tulee sen taakse ja päinvastoin).
Hae kaikki li, joilla on luokka
www, tee niille punainen väri, sitten
etsi löydetyistä ne li,
joilla on luokka bbb ja poista
ne. Ratkaise kaikki yhdellä ketjulla.
Hae kaikki li sivulla. Parillisista
tehdyt tyhjät, ja
parittomat poistetaan.
Etsi kaikki div-tagit ja tuplaa
niiden korkeus.
Etsi kaikkien div:ien
korkeuksien summa sivulla.
Elementille #test etsi lähin
vanhempi, jolla on luokka www, lisää tämän
vanhemman loppuun kappale tekstillä '!'.
Elementin #test napsautuksessa etsi sen
lähin vanhempi, jolla on luokka www, tämän
vanhemman sisällä etsi kaikki kappaleet ja väritä ne
punaiseksi.
Väritä ensimmäiset 10 li
sivulla punaiseksi.
Väritä 5:nnestä 10:nteen li
sivulla punaiseksi.
Etsi viimeiset 10 li
sivulla, väritä ne punaiseksi.
Etsi sitten löydetyistä parilliset li
ja kääri ne sisältä b-tagiin.
Sivulla on annettu valintaruudut. Laske, kuinka monta niistä on valittu.
Annettu 5
valintaruutua.
Tee niin, että sen jälkeen, kun käyttäjä
on valinnut kaksi niistä, kaikki valintaruudut
estetään.
Tee niin, että kaikki valitut valintaruudut vaihtavat tilansa valitsemattomaksi ja päinvastoin.
Annettu syötekenttä.
Siirrä attribuutin value sisältö attribuuttiin
placeholder,
ja poista itse attribuutti value kokonaan.
Annettu linkki.
Jos attribuutti href alkaa http://:lla,
lisää linkille attribuutti target="_blank".
Annettu syötekenttä, johon voi syöttää numeron. Tee niin, että kun numero syötetään tähän syötekenttään ja focus menetetään, sivulta etsitään valintaruutua tällä numerolla ja se merkitään valituksi, ja muut valintaruudut merkitään valitsemattomiksi.
Annettu pudotusvalikko ja radiovalinnat, radiovalintojen määrä on sama kuin pudotusvalikon kohteiden määrä. Tee niin, että kun pudotusvalikosta valitaan kohde, vastaava radiovalinta merkitään automaattisesti valituksi (vastaavuus seuraamisjärjestyksen mukaan: ensimmäinen listan kohde - ensimmäinen radiovalinta ja niin edelleen).