Vázání událostí v jQuery

Téměř každé události JavaScriptu odpovídá svá vlastní metoda jQuery. Například, kliknutí na prvky lze zachytit takto: $(selektor).click(funkce).

Podívejme se na následující HTML kód:

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

Pro něj je napsáno CSS:

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

Udělejme tak, aby po kliknutí na jakýkoli li se vypsal vykřičník. Klikněte na položky seznamu:

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

Uvnitř navázané funkce je dostupný this, odkazující na ten prvek, ve kterém došlo k události (v našem případě na li, na kterou bylo kliknuto). Tento this lze použít ve stylu JavaScriptu, například this.innerHTML nebo ve stylu jQuery - pro to je třeba tento this obalit do $, takto: $(this).

Vezměme HTML kód:

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

K tomuto kódu jsou napsány následující CSS styly:

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

Udělejme tak, aby po kliknutí na li se jí na konec přidal '!'. Pro ověření funkčnosti klikněte na položky seznamu:

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

Zařiďte, aby po kliknutí na každou li se jí na začátek přidal '?'.

Jsou dány odstavce. Zařiďte, aby po kliknutí na každý odstavec se na obrazovce vypsal jeho obsah.

Jsou dány odstavce s čísly. Po stisknutí odstavce v něm musí být uvedena druhá mocnina čísla, které obsahuje.