Naväzovanie udalostí v jQuery

Takmer každej udalosti JavaScript zodpovedá jej vlastná metóda jQuery. Napríklad, kliknutie na elementy je možné zachytiť takto: $(selektor).click(funkcia).

Pozrime sa na nasledujúci HTML kód:

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

Pre neho je napísaný CSS:

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

Urobme tak, aby po kliknutí na akúkoľvek li sa vykričník vypísal. Kliknite na položky zoznamu:

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

Vo vnútri naviazanej funkcie je dostupný this, odkazujúci na ten element, v ktorom nastala udalosť (v našom prípade na li, na ktorú bolo kliknuté). Tento this je možné použiť štýlom JavaScriptu, napríklad this.innerHTML alebo štýlom jQuery - preto je tento this potrebné obaliť do $, takto: $(this).

Zoberme si HTML kód:

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

K tomuto kódu sú napísané nasledujúce CSS štýly:

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

Urobme tak, aby po kliknutí na li sa jej na koniec pridalo '!'. Pre overenie funkčnosti kliknite na položky zoznamu:

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

Urobte tak, aby po kliknutí na každú li sa jej na začiatok pridalo '?'.

Sú dané odseky. Urobte tak, aby po kliknutí na každý odsek sa na obrazovke zobrazil jeho obsah.

Sú dané odseky s číslami. Po stlačení odseku sa v ňom má objaviť druhá mocnina čísla, ktoré obsahuje.