Praktische Übungen zur jQuery-Bibliothek
Alle Absätze p, innerhalb derer
ein b-Tag vorhanden ist, umschließe
mit einem div-Tag.
Finde alle Absätze p mit der Klasse
www, setze den Text '!' an ihren Anfang,
dann füge zu diesen Absätzen
auch h1-h6-Überschriften hinzu und
färbe diese Absätze und Überschriften rot.
Finde alle Absätze p und ersetze sie
durch ein div-Tag mit demselben Inhalt.
Finde alle Checkboxen auf der Seite und deaktiviere die geraden der gefundenen.
Setze für alle
nicht deaktivierten
Checkboxen
den Status <a href="/de/markup/manual/html/attr/checked/">'angekreuzt'</a>.
Gegeben ist das Element #test. Setze für seinen unmittelbaren
oberen Nachbarn den Text '!' und für den unteren
Nachbarn - den Text '?'. Löse die Aufgabe in einer
Methodenkette.
Gegeben ist das Element #test. Setze für seine unmittelbaren
oberen und unteren Nachbarn den Text des Elements #test.
Gegeben ist das Element #test. Finde unter seinen oberen Nachbarn
den nächstgelegenen Absatz und setze für ihn den Text des Elements
#test.
Finde das zweite li auf der Seite,
füge ihm die Klasse www hinzu, umschließe
es innen mit einem i-Tag, füge nach
ihm ein li mit dem Text 'Hallo' ein.
Finde das zehnte li auf der Seite,
finde sein Elternelement, ermittle den unmittelbaren
oberen Nachbarn des Elternelements, umschließe es mit
<div class="www"></div>.
Füge für jeden Absatz p, außer Absätzen
mit der Klasse www, am Ende seine
Ordnungsnummer hinzu.
Finde alle Absätze p und setze
vor jedem Absatz seine Kopie. Färbe die Kopie
rot und den ursprünglichen Absatz grün.
Finde Absätze p, die
unmittelbar unter einer h2 stehen,
und verschiebe jeden Absatz so, dass er
unmittelbar über der h2 zu stehen kommt.
Finde alle leeren Absätze p
(ohne Text) und füge in sie den Text
des unmittelbaren oberen Nachbarn ein.
Setze für das Elternelement des b-Tags, falls es sich um
ein Element mit der Klasse www oder einen Absatz
p handelt, die Farbe Rot und die
Schriftgröße
auf 30px.
Setze für alle leeren Absätze p
den Text des nächstgelegenen h2-Tags oberhalb von ihnen.
Gegeben sind Input-Felder mit Zahlen. Sorge dafür, dass in den Input-Feldern die Quadrate dieser Zahlen stehen.
Gegeben ist das Element #test. Setze an seinen Anfang den Text
des unmittelbaren oberen Nachbarn und an das Ende
- den Text des unmittelbaren unteren Nachbarn.
Gegeben ist das Element #test. Finde seinen zweiten Nachbarn
oben und seinen zweiten Nachbarn unten. Sorge dafür,
dass die gefundenen Elemente den Text tauschen
(der obere Nachbar nimmt den Text des unteren Nachbarn
und umgekehrt).
Gegeben ist ein div-Element. Wähle
aus ihm alle direkten Kindelemente aus, die
keine Überschriften sind, und färbe sie rot.
Finde alle Absätze p, färbe
sie rot. Wähle dann aus den gefundenen
Absätzen die Absätze mit der Klasse www aus und setze
ihnen den Text '!'.
Finde alle Absätze p mit der Klasse
www, färbe sie rot.
Wähle dann aus den gefundenen Absätzen den ersten
aus und setze ihm den Text '!', wähle dann
den letzten aus und setze ihm den Text '?'.
Löse die Aufgabe in einer Methodenkette.
Finde alle Absätze p, setze
für jeden von ihnen am Ende denselben Text, der
in ihm steht (d.h. der Text im Absatz
wird zweimal geschrieben stehen).
Finde alle Absätze p, setze
für jeden von ihnen am Ende seine Ordnungsnummer
in der gefundenen Menge.
Gegeben sind Absätze mit Zahlen. Setze für jeden von ihnen am Ende die Zahl, die in ihm gespeichert ist, multipliziert mit seiner Ordnungsnummer in der Menge.
Beim Klick auf einen Absatz p entferne
seine unmittelbaren oberen und unteren Nachbarn.
Beim Klick auf einen Absatz p entferne
alle seine oberen Nachbarn bis zur ersten h1-h6-Überschrift
(d.h. Elemente, die
oberhalb dieser Überschrift stehen, und die Überschrift selbst
sollen nicht entfernt werden).
Beim Klick auf einen Absatz p entferne
seinen nächstgelegenen unteren Nachbarn mit
der Klasse www.
Beim Klick auf einen Absatz p entferne
seinen fünften Nachbarn unten.
Beim Klick auf einen Absatz p entferne
seinen fünften Nachbarn unten, falls es sich nicht um
einen h2 handelt.
Beim Klick auf einen Absatz p entferne
seinen fünften Nachbarn unten, falls dieser Nachbar
kein b-Tag in sich hat.
Beim Klick auf einen Absatz p entferne
seinen fünften Nachbarn unten, falls dieser Nachbar
nicht unmittelbar nach einem h2 steht.
Gegeben ist das Element #test. Tausche dieses
Element mit seinem unmittelbaren
unteren Nachbarn aus.
Gegeben ist das Element #test. Füge nach
seinem unmittelbaren unteren Nachbarn
eine Kopie unseres Elements ein.
Gegeben ist das Element #test. Tausche dieses
Element mit seinem nächstgelegenen unteren Nachbarn
mit der Klasse www aus.
Finde alle Absätze p, die
innerhalb eines Elternelements zwischen einer
und einer anderen h2 liegen.
Umschließe jeden Absatz p außen
und innen mit einem div.
Finde alle Absätze p,
deren unmittelbares Elternelement kein div ist,
und umschließe jeden von ihnen mit <div class="www"></div>.
Finde alle Absätze p. Entferne
deren Elternelement (mache ein unwrap),
falls dieses Elternelement kein div mit der Klasse
www ist. Umschließe dann die Absätze, bei denen
das Elternelement entfernt wurde, mit einem div
mit der Klasse zzz.
Finde alle Elternelemente des Elements #test
und erstelle ein Array aus den CSS-Klassen dieser Elternelemente.
Finde alle Absätze p, die ein
class-Attribut haben, und umschließe jeden von ihnen
in ein div mit denselben Klassen
wie der gefundene Absatz, und lösche die Klassen jedes
Absatzes zusammen mit dem class-Attribut.
Finde alle Absätze p innerhalb
von #test, setze am Ende den Text
'!', schließe dann aus den gefundenen
Absätzen die mit der Klasse www aus und färbe
die verbleibenden rot.
Finde alle li auf der Seite,
füge dann vor dem vorletzten der gefundenen ein
weiteres li mit dem Text 'Punkt' ein.
Finde alle li auf der Seite,
wähle dann aus den gefundenen das zweite, dritte
und vierte vom Ende aus und setze ihnen den Text
'!'.
Finde die ol mit der ID #test
und ordne alle li
darin in umgekehrter Reihenfolge an.
Gegeben ist das Element #test. Finde alle seine
oberen Nachbarn und alle seine unteren Nachbarn und
tausche ihre Plätze (d.h. alles, was vor dem Element steht,
soll nach ihm kommen und umgekehrt).
Ermittle alle li mit der Klasse
www, färbe sie rot, finde
dann unter den gefundenen die li,
die die Klasse bbb haben, und entferne
sie. Löse alles in einer Methodenkette.
Ermittle alle li auf der Seite. Mache die geraden
der Ermittelten leer und
entferne die ungeraden.
Finde alle div-Tags und verdopple
deren Höhe.
Ermittle die Summe der Höhen aller div
auf der Seite.
Finde für das Element #test das nächstgelegene
Elternelement mit der Klasse www, füge am Ende dieses
Elternelements einen Absatz mit dem Text '!' hinzu.
Beim Klick auf das Element #test finde sein
nächstgelegenes Elternelement mit der Klasse www, finde
in diesem Elternelement alle Absätze und färbe sie
rot.
Färbe die ersten 10 li
auf der Seite rot.
Färbe die 5-te bis zur 10-ten li
auf der Seite rot.
Finde die letzten 10 li
auf der Seite, färbe sie rot.
Finde dann unter den gefundenen die geraden li
und umschließe sie innen mit einem b-Tag.
Auf der Seite sind Checkboxen gegeben. Zähle, wie viele davon angekreuzt sind.
Gegeben sind 5
Checkboxen.
Sorge dafür, dass nachdem der Benutzer
zwei davon angekreuzt hat, alle Checkboxen
deaktiviert werden.
Sorge dafür, dass alle angekreuzten Checkboxen ihren Zustand auf nicht angekreuzt ändern und umgekehrt.
Gegeben ist ein Input-Feld.
Verschiebe den Inhalt des value-Attributs in das
placeholder-Attribut,
und lösche das value-Attribut vollständig.
Gegeben ist ein Link.
Falls das href-Attribut mit http:// beginnt,
füge dem Link das Attribut target="_blank" hinzu.
Gegeben ist ein Input-Feld, in das eine Zahl eingegeben werden kann. Sorge dafür, dass bei Eingabe einer Zahl in dieses Feld und Verlust des Fokus auf der Seite eine Checkbox mit dieser Nummer gesucht und angekreuzt wird, und die anderen Checkboxen nicht angekreuzt werden.
Gegeben sind eine Select-Box und Radio-Buttons, die Anzahl der Radio-Buttons entspricht der Anzahl der Optionen in der Select-Box. Sorge dafür, dass bei Auswahl einer Option in der Select-Box automatisch der entsprechende Radio-Button ausgewählt wird (Entsprechung nach der Reihenfolge: erste Option der Liste - erste Radio-Button und so weiter).