Povezivanje događaja u jQuery

Skoro svakom JavaScript događaju odgovara svoja jQuery metoda. Na primer, klik na elemente može se uhvatiti ovako: $(selektor).click(funkcija).

Razmotrimo sledeći HTML kod:

<ul>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
</ul>

Za njega je napisan CSS:

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

Hajde da napravimo da se klikom na bilo koji li ispisuje uzvičnik. Kliknite na stavke liste:

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

Unutar vezane funkcije dostupan je this, koji pokazuje na onaj element u kome se desio događaj (u našem slučaju na li, na koji je kliknuto). Ovaj this može se koristiti u stilu JavaScript-a, na primer, this.innerHTML ili u stilu jQuery - za to ovaj this treba obmotati u $, ovako: $(this).

Uzmimo HTML kod:

<ul>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
</ul>

Za ovaj kod su napisani sledeći CSS stilovi:

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

Hajde da napravimo da se klikom na li njoj na kraj doda '!'. Da proverite rad kliknite na stavke liste:

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

Napravite da se klikom na svaki li njoj na početak doda '?'.

Data su odlomci (paragrafi). Napravite da se klikom na svaki odlomak na ekran ispiše njegov sadržaj.

Data su odlomci sa brojevima. Klikom na odlomak u njemu treba da se pojavi kvadrat broja koji on sadrži.