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 'angekreuzt'.

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).