Event-Bindung in jQuery

Praktisch jedem JavaScript-Ereignis entspricht eine eigene jQuery-Methode. Zum Beispiel kann ein Klick auf Elemente so abgefangen werden: $(Selector).click(Funktion).

Betrachten wir den folgenden HTML-Code:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Für ihn ist CSS geschrieben:

li {
	width: 100px;
	cursor: pointer;
}

Lassen Sie uns so machen, dass bei einem Klick auf ein beliebiges li ein Ausrufezeichen ausgegeben wird. Klicken Sie auf die Listeneinträge:

$('li').click(function() {
	alert('!');
});

Innerhalb der gebundenen Funktion ist this verfügbar, das auf das Element verweist, in dem das Ereignis aufgetreten ist (in unserem Fall auf das li, auf das geklickt wurde). Dieses this kann im Stil von JavaScript verwendet werden, zum Beispiel this.innerHTML oder im Stil von jQuery - dafür sollte dieses this in $ eingewickelt werden, so: $(this).

Nehmen wir den HTML-Code:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Für diesen Code sind die folgenden CSS-Stile geschrieben:

li {
	width: 100px;
}
li:hover {
	color: red;
	cursor: pointer;
}

Lassen Sie uns so machen, dass bei einem Klick auf ein li ihr am Ende ein '!' hinzugefügt wird. Um die Funktion zu testen, klicken Sie auf die Listeneinträge:

$('li').click(function() {
	$(this).append('!');
});

Machen Sie es so, dass bei einem Klick auf jedes li ihr am Anfang ein '?' hinzugefügt wird.

Es sind Absätze gegeben. Machen Sie es so, dass bei einem Klick auf einen Absatz sein Inhalt auf dem Bildschirm ausgegeben wird.

Es sind Absätze mit Zahlen gegeben. Beim Anklicken eines Absatzes sollte in ihm das Quadrat der Zahl erscheinen, die er enthält.