Tapahtumien sitominen jQueryssä

Lähes jokaiselle JavaScriptin tapahtumalle on oma vastaava jQuery-metodi. Esimerkiksi, klikkausta elementeistä voidaan havaita näin: $(valitsin).click(funktio).

Tarkastellaan seuraavaa HTML-koodia:

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

Sille on määritelty CSS:

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

Tehdään niin, että minkä tahansa li:n klikkaaminen tulostaa huutomerkin. Klikkaa listan kohtia:

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

Sidotun funktion sisällä on saatavilla this, viitaten siihen elementtiin, jossa tapahtuma tapahtui (meidän tapauksessamme li:hen, jota klikattiin). Tätä this:ia voidaan käyttää JavaScript-tyylillä, esimerkiksi this.innerHTML tai jQuery-tyylillä - tätä varten tämä this tulee kääriä $:iin, näin: $(this).

Otetaan HTML-koodi:

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

Tälle koodille on määritelty seuraavat CSS-tyylit:

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

Tehdään niin, että li:n klikkaaminen lisää sen loppuun '!'. Tarkista toiminta klikkaamalla listan kohtia:

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

Tee niin, että jokaisen li:n klikkaus lisää sen alkuun '?':n.

Annetut kappaleet. Tee niin, että kappaleen klikkaus näyttää sen sisällön ruudulla.

Annetut kappaleet numeroilla. Kappaletta napsautettaessa siihen pitäisi ilmestyä sen sisältämän luvun neliö.