Praktijk om de jQuery-bibliotheek te oefenen
Alle alinea's p, binnenin welke
er een tag b zit, wrap ze
in de tag div.
Vind alle alinea's p met de klasse
www, zet vooraan de tekst
'!', voeg dan aan deze alinea's
ook koppen h1-h6 toe en
verf deze alinea's en koppen in rode
kleur.
Vind alle alinea's p en vervang ze
door de tag div met dezelfde inhoud.
Vind alle checkboxes op de pagina en blokkeer de even exemplaren uit de gevonden.
Zet voor alle
niet-geblokkeerde
checkboxes
de status <a href="/nl/markup/manual/html/attr/checked/">'aangevinkt'</a>.
Gegeven element #test. Zet voor zijn directe
buurman boven de tekst '!', en voor de buurman
onder - de tekst '?'. Los de taak op in één
keten.
Gegeven element #test. Zet voor zijn directe
buren boven en onder de tekst van element #test.
Gegeven element #test. Vind onder zijn buren boven
de dichtstbijzijnde alinea en zet er de tekst van element
#test in.
Vind de tweede li op de pagina,
voeg hem de klasse www toe, wrap
hem binnenin met tag i, voeg na
hem een li toe met tekst 'hallo'.
Vind de tiende li op de pagina,
vind zijn ouder, krijg de directe
buurman van de ouder boven, wrap hem in
<div class="www"></div>.
Voeg voor elke alinea p, behalve alinea's
met de klasse www, aan het einde zijn
volgnummer toe.
Vind alle alinea's p en zet
voor elke alinea zijn kopie. Verf de kopie in
rode kleur, en de originele alinea in groen.
Vind alinea's p, die staan
direct onder h2
en verplaats elke alinea zodat hij
direct boven h2 komt te staan.
Vind alle lege alinea's p
(zonder tekst) en voeg er de tekst van de
directe buurman boven in.
Ouder van tag b, als dit
een element is met klasse www of een alinea
p, zet er rode kleur op en
tekstgrootte
in 30px.
Zet voor alle lege alinea's p de
tekst van de dichtstbijzijnde tag h2 boven hen.
Er zijn inputs met getallen. Zorg ervoor dat in de inputs de kwadraten van deze getallen komen te staan.
Gegeven element #test. Zet vooraan de tekst
van de directe buurman boven, en aan het einde
- de tekst van de directe buurman onder.
Gegeven element #test. Vind zijn tweede buurman
boven en zijn tweede buurman onder. Zorg
ervoor dat de gevonden elementen van tekst
wisselen (buurman boven neemt de tekst van buurman
onder en omgekeerd).
Gegeven element div. Selecteer
uit hem alle directe kinderen, die
geen koppen zijn en verf ze in
rode kleur.
Vind alle alinea's p, verf
ze in rode kleur. Selecteer dan uit de gevonden
alinea's de alinea's met klasse www en zet
er tekst '!' in.
Vind alle alinea's p met klasse
www, verf ze in rode kleur.
Selecteer dan uit de gevonden alinea's de eerste
en zet er tekst '!' in, selecteer dan
de laatste en zet er tekst '?' in.
Los de taak op in één keten.
Vind alle alinea's p, zet
voor elk ervan aan het einde dezelfde tekst, die
erin staat (dat wil zeggen, de tekst in de alinea
wordt twee keer geschreven).
Vind alle alinea's p, zet
voor elk ervan aan het einde zijn volgnummer
in de set.
Er zijn alinea's met getallen. Zet voor elk ervan aan het einde het getal, dat erin opgeslagen is, vermenigvuldigd met zijn volgnummer in de set.
Bij klik op een alinea p verwijder
zijn directe buren boven en onder.
Bij klik op een alinea p verwijder
al zijn buren boven tot de eerste kop
h1-h6 (dat wil zeggen elementen, die staan
boven deze kop en de kop zelf
hoeven niet verwijderd te worden).
Bij klik op een alinea p verwijder
zijn dichtstbijzijnde onderbuurman met
klasse www.
Bij klik op een alinea p verwijder
zijn vijfde buurman onder.
Bij klik op een alinea p verwijder
zijn vijfde buurman onder, als dit geen
h2 is.
Bij klik op een alinea p verwijder
zijn vijfde buurman onder, als deze buurman
geen tag b binnenin zich heeft.
Bij klik op een alinea p verwijder
zijn vijfde buurman onder, als deze buurman
niet direct na h2 staat.
Gegeven element #test. Wissel dit
element om met zijn directe
buurman onder.
Gegeven element #test. Na zijn
directe buurman onder voeg een
kopie van ons element in.
Gegeven element #test. Wissel dit
element om met zijn dichtstbijzijnde buurman
onder met klasse www.
Vind alle alinea's p, die
binnen één ouder liggen tussen de ene
en de andere h2.
Wrap elke alinea p aan de buitenkant
en binnenkant in div.
Vind alle alinea's p, bij
wie de directe ouder geen div is
en wrap elk ervan in <div class="www"></div>.
Vind alle alinea's p. Verwijder
hun ouder (maak hem unwrap),
als deze ouder geen div is met klasse
www. Dan, voor die alinea's, bij wie
de ouder verwijderd was, wrap in div
met klasse zzz.
Vind alle ouders van element #test
en maak een array van CSS-klassen van deze ouders.
Vind alle alinea's p, die een
attribuut class hebben, en wrap elk ervan
in div met dezelfde klassen,
als bij de gevonden alinea, en verwijder de klassen van elke
alinea samen met het attribuut class.
Vind alle alinea's p uit
#test, zet er aan het einde tekst
'!' in, sluit dan uit de gevonden
alinea's met klasse www en zet voor de overgebleven
rode kleur.
Vind alle li op de pagina,
voeg dan voor de op één na laatste van de gevonden een
andere li in met tekst 'punt'.
Vind alle li op de pagina,
selecteer dan uit de gevonden de tweede, derde
en vierde vanaf het einde en zet er tekst
'!' in.
Vind ol met #test
en zet alle li
erin in omgekeerde volgorde.
Gegeven element #test. Vind al zijn
buren boven en al zijn buren onder en
wissel ze om (dat wil zeggen alles, wat staat
voor het element, moet erachter komen en omgekeerd).
Krijg alle li met klasse
www, maak ze rode kleur, vind dan
onder de gevonden die li,
die klasse bbb hebben en verwijder
ze. Los alles op in één keten.
Krijg alle li op de pagina. Maak de even
exemplaren uit de verkregen leeg, en
de oneven verwijder je.
Vind alle tags div en verdubbel
hun hoogte.
Vind de som van de hoogten van alle div
op de pagina.
Voor element #test vind de dichtstbijzijnde
ouder met klasse www, voeg aan het einde van deze
ouder een alinea toe met tekst '!'.
Bij klik op element #test vind zijn
dichtstbijzijnde ouder met klasse www, binnenin
deze ouder vind alle alinea's en verf ze
in rode kleur.
Verf de eerste 10 li
op de pagina in rode kleur.
Verf van de 5-de tot de 10-de li
op de pagina in rode kleur.
Vind de laatste 10 li
op de pagina, verf ze in rode
kleur. Selecteer dan uit de gevonden de even li
en wrap ze binnenin in tag b.
Op de pagina zijn er checkboxes. Tel hoeveel ervan aangevinkt zijn.
Er zijn 5
checkboxes.
Zorg ervoor dat nadat de gebruiker
twee ervan heeft aangevinkt, alle checkboxes
geblokkeerd worden.
Zorg ervoor dat alle aangevinkte checkboxes hun status veranderen naar niet-aangevinkt en omgekeerd.
Gegeven input.
Verplaats de inhoud van attribuut value naar attribuut
placeholder,
en verwijder het attribuut value helemaal.
Gegeven een link.
Als attribuut href begint met http://,
voeg dan aan de link attribuut target="_blank" toe.
Gegeven een input, waarin een getal ingevoerd kan worden. Zorg ervoor, dat bij het invoeren van een getal in deze input en het verliezen van focus op de pagina, gezocht wordt naar een checkbox met zo'n nummer en deze aangevinkt wordt, en de andere checkboxes niet-aangevinkt worden.
Gegeven een select en radio knoppen, het aantal radio's is gelijk aan het aantal items in de select. Zorg ervoor dat bij het selecteren van een item in de select automatisch de corresponderende radio knop aangevinkt wordt (correspondentie op volgnummer: eerste item in de lijst - eerste radio en zo verder).