Praktická cvičení pro knihovnu jQuery
Všechny odstavce p, uvnitř kterých
je tag b, obalte
tagem div.
Najděte všechny odstavce p s třídou
www, nastavte jim na začátek text
'!', poté přidejte k těmto odstavcům
ještě i nadpisy h1-h6 a
obarvěte tyto odstavce a nadpisy na červeno.
Najděte všechny odstavce p a nahraďte je
tagem div se stejným obsahem.
Najděte všechny zaškrtávací políčka na stránce a zablokujte sudá z nalezených.
Nastavte všem
nezablokovaným
zaškrtávacím políčkům
stav <a href="/cs/markup/manual/html/attr/checked/">'zaškrtnuto'</a>.
Daný element #test. Nastavte jeho bezprostřednímu
sousedovi nad ním text '!', a sousedovi
pod ním - text '?'. Vyřešte úlohu jedním
řetězcem.
Daný element #test. Nastavte jeho bezprostředním
sousedům nad ním a pod ním text elementu #test.
Daný element #test. Najděte mezi jeho sousedy nad ním
nejbližší odstavec a nastavte mu text elementu
#test.
Najděte druhý li na stránce,
přidejte mu třídu www, obalte
ho uvnitř tagem i, vložte po
ném li s textem 'ahoj'.
Najděte desátý li na stránce,
najděte jeho rodiče, získejte bezprostředního
souseda rodiče nad ním, obalte jej do
<div class="www"></div>.
Každému odstavci p, kromě odstavců
s třídou www, přidejte na konec jeho
pořadové číslo.
Najděte všechny odstavce p a nastavte
před každý odstavec jeho kopii. Kopii obarvěte
na červeno, a původní odstavec na zeleno.
Najděte odstavce p, které stojí
bezprostředně pod h2
a přesuňte každý odstavec tak, aby
stal bezprostředně nad h2.
Najděte všechny prázdné odstavce p
(bez textu) a vložte do nich text
bezprostředního souseda nad ním.
Rodiči tagu b, pokud je to
element s třídou www nebo odstavec
p, nastavte červenou barvu a
velikost
textu na 30px.
Všem prázdným odstavcům p nastavte
text nejbližšího k nim nad ním tagu h2.
Jsou dány vstupní pole s čísly. Udělejte tak, aby ve vstupních polích byly čtverce těchto čísel.
Daný element #test. Nastavte mu na začátek text
bezprostředního souseda nad ním, a na konec
- text bezprostředního souseda pod ním.
Daný element #test. Najděte jeho druhého souseda
nad ním a jeho druhého souseda pod ním. Udělejte
tak, aby nalezené elementy si vyměnily
text (soused nad ním vezme text souseda
pod ním a naopak).
Daný element div. Vyberte
z něj všechny bezprostřední potomky, kteří
nejsou nadpisy a obarvěte je na
červeno.
Najděte všechny odstavce p, obarvěte
je na červeno. Poté vyberte mezi nalezenými
odstavci odstavce s třídou www a nastavte
im text '!'.
Najděte všechny odstavce p s třídou
www, obarvěte je na červeno.
Poté vyberte mezi nalezenými odstavci první
a nastavte mu text '!', poté vyberte
poslední a jemu nastavte text '?'.
Vyřešte úlohu jedním řetězcem.
Najděte všechny odstavce p, nastavte
každému z nich na konec tentýž text, který
je uvnitř něj (to znamená text v odstavci
bude napsán dvakrát).
Najděte všechny odstavce p, nastavte
každému z nich na konec jeho pořadové číslo
v sadě.
Jsou dány odstavce s čísly. Nastavte každému z nich na konec číslo, které je v něm uloženo, vynásobené jeho pořadovým číslem v sadě.
Po kliknutí na odstavec p odstraňte
jeho bezprostřední sousedy nad ním a pod ním.
Po kliknutí na odstavec p odstraňte
všechny jeho sousedy nad ním až po první nadpis
h1-h6 (to znamená elementy, stojící
nad tímto nadpisem a samotný nadpis
odstraňovat netřeba).
Po kliknutí na odstavec p odstraňte
jeho nejbližšího spodního souseda s
třídou www.
Po kliknutí na odstavec p odstraňte
jeho pátého souseda pod ním.
Po kliknutí na odstavec p odstraňte
jeho pátého souseda pod ním, pokud to není
h2.
Po kliknutí na odstavec p odstraňte
jeho pátého souseda pod ním, pokud tento soused
nemá uvnitř sebe tag b.
Po kliknutí na odstavec p odstraňte
jeho pátého souseda pod ním, pokud tento soused
nestojí bezprostředně po h2.
Daný element #test. Vyměňte tento
element místy s jeho bezprostředním
sousedem pod ním.
Daný element #test. Po jeho
bezprostředním sousedovi pod ním vložte
kopii našeho elementu.
Daný element #test. Vyměňte tento
element místy s jeho nejbližším sousedem
pod ním s třídou www.
Najděte všechny odstavce p, které
uvnitř jednoho rodiče leží mezi jedním
a druhým h2.
Obalte každý odstavec p zvenku
a uvnitř do div.
Najděte všechny odstavce p, u
kterých bezprostřední rodič není div
a obalte každý z nich do <div class="www"></div>.
Najděte všechny odstavce p. Odstraňte
jejich rodiče (proveďte mu unwrap),
pokud tento rodič není div s třídou
www. Poté pro ty odstavce, u kterých
byl odstraněn rodič, obalte do div
s třídou zzz.
Najděte všechny rodiče elementu #test
a vytvořte pole z CSS tříd těchto rodičů.
Najděte všechny odstavce p, které mají
atribut class, a každý z nich
obalte do div se stejnými třídami,
jako u nalezeného odstavce, a třídy každého
odstavce odstraňte spolu s atributem class.
Najděte všechny odstavce p z
#test, nastavte jim na konec text
'!', poté vylučte z nalezených
odstavce s třídou www a zbylým
nastavte červenou barvu.
Najděte všechny li na stránce,
poté před předposlední z nalezených vložte
ještě jedno li s textem 'položka'.
Najděte všechny li na stránce,
poté vyberte mezi nalezenými druhý, třetí
a čtvrtý od konce a nastavte jim text
'!'.
Najděte ol s #test
a přestavte všechny li
v něm v obráceném pořadí.
Daný element #test. Najděte všechny jeho
sousedy nad ním a všechny jeho sousedy pod ním a
vyměňte je místy (to znamená vše, co stojí
před elementem, musí stát po něm a naopak).
Získejte všechny li s třídou
www, nastavte jim červenou barvu, poté
najděte mezi nalezenými ty li,
které mají třídu bbb a odstraňte
je. Vyřešte vše jedním řetězcem.
Získejte všechny li na stránce. Sudé
z získaných udělejte prázdnými, a
liché odstraňte.
Najděte všechny tagy div a zdvojnásobte
jejich výšku.
Najděte součet výšek všech div
na stránce.
Pro element #test najděte nejbližšího
rodiče s třídou www, na konec tohoto
rodiče přidejte odstavec s textem '!'.
Po kliknutí na element #test najděte jeho
nejbližšího rodiče s třídou www, uvnitř
tohoto rodiče najděte všechny odstavce a obarvěte je
na červeno.
Obarvěte prvních 10 li
na stránce na červeno.
Obarvěte od 5-té do 10-é li
na stránce na červeno.
Najděte posledních 10 li
na stránce, obarvěte je na červeno.
Poté z nalezených najděte sudé li
a obalte je uvnitř tagem b.
Na stránce jsou dány zaškrtávací políčka. Spočítejte, kolik z nich je zaškrtnuto.
Je dáno 5
zaškrtávacích políček.
Udělejte tak, aby poté, co uživatel
zaškrtl dvě z nich, všechna zaškrtávací políčka
byla zablokována.
Udělejte tak, aby všechna zaškrtnutá zaškrtávací políčka změnila svůj stav na nezaškrtnutá a naopak.
Dané vstupní pole.
Přesuňte obsah atributu value do atributu
placeholder,
a samotný atribut value odstraňte úplně.
Daný odkaz.
Pokud atribut href začíná na http://,
přidejte odkazu atribut target="_blank".
Dané vstupní pole, do kterého lze zadat číslo. Udělejte tak, aby při zadání čísla do tohoto pole a ztráty fokusu se na stránce hledalo zaškrtávací políčko s takovým číslem a stalo se zaškrtnutým, a ostatní zaškrtávací políčka se stala nezaškrtnutými.
Daný výběrový seznam a radio tlačítka, počet radio tlačítek je roven počtu položek ve výběrovém seznamu. Udělejte tak, aby při výběru položky ve výběrovém seznamu se automaticky stalo zaškrtnutým příslušné radio tlačítko (shoda podle pořadí: první položka seznamu - prvnímu radio a tak dále).