Povezovanje dogodkov v jQuery

Skoraj vsakemu dogodku JavaScript ustreza svoja metoda jQuery. Na primer, klik na elemente lahko ujamemo takole: $(selektor).click(funkcija).

Oglejmo si naslednjo HTML kodo:

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

Zanjo je definiran CSS:

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

Naredimo tako, da ob kliku na katerokoli li se izpiše klicaj. Kliknite na elemente seznama:

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

Znotraj povezane funkcije je na voljo this, ki se sklicuje na tisti element, v katerem se je zgodil dogodek (v našem primeru na li, na katero je bil klik). Ta this lahko uporabimo v slogu JavaScript, na primer this.innerHTML ali v slogu jQuery - za to je treba ta this oviti v $, takole: $(this).

Vzemimo HTML kodo:

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

Za to kodo so definirani naslednji CSS slogi:

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

Naredimo tako, da ob kliku na li se ji na konec doda '!'. Za preverbo delovanja kliknite na elemente seznama:

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

Naredite tako, da ob kliku na vsako li se ji na začetek doda '?'.

Dani so odstavki. Naredite tako, da ob kliku na vsak odstavek se na zaslon izpiše njegova vsebina.

Dani so odstavki s števili. Ob kliku na odstavek se mora v njem pojaviti kvadrat števila, ki ga vsebuje.