Sündmuste sidumine jQuery-s

Peaaegu iga JavaScripti sündmusele vastab oma jQuery meetod. Näiteks saab klõpsu elementide peal jäädvustada nii: $(selektor).click(funktsioon).

Vaatleme järgmist HTML koodi:

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

Selle jaoks on kirjutatud CSS:

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

Teeme nii, et klõpsates ükskõik millise li peal, kuvataks hüüumärk. Klõpsake loendi punktide peal:

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

Seotud funktsiooni sees on kättesaadav this, viidates sellele elemendile, kus sündmus toimus (meie puhul li-le, millele klõpsati). Seda this saab kasutada JavaScripti stiilis, näiteks this.innerHTML või jQuery stiilis - selleks tuleb see this mähkida $ sisse, nii: $(this).

Võtame HTML koodi:

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

Sellele koodile on kirjutatud järgmised CSS stiilid:

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

Teeme nii, et klõpsates li peal lisataks selle lõppu '!'. Töö kontrollimiseks klõpsake loendi punktide peal:

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

Tehke nii, et klõpsates iga li peal lisataks selle algusesse '?'.

Antud on lõigud. Tehke nii, et klõpsates iga lõigu peal ekraanile kuvataks selle sisu.

Antud on lõigud numbritega. Lõigu peale vajutades peab selles ilmuma numbri ruut.