Hendelsesbinding i jQuery

Nesten alle JavaScript-hendelser har sin tilsvarende jQuery-metode. For eksempel kan et klikk på elementer fanges opp slik: $(selector).click(function).

La oss se på følgende HTML-kode:

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

For denne er CSS definert:

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

La oss gjøre slik at ved klikk på en hvilken som helst li vises et utropstegn. Trykk på listepunktene:

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

Inne i den bundne funksjonen er this tilgjengelig, som refererer til det elementet hvor hendelsen inntraff (i vårt tilfelle li-en som ble klikket på). Denne this kan brukes i JavaScript-stil, for eksempel this.innerHTML eller i jQuery-stil - for å gjøre dette bør denne this pakkes inn i $, slik: $(this).

La oss ta HTML-koden:

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

Følgende CSS-stiler er definert for denne koden:

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

La oss gjøre slik at ved klikk på li blir et '!' lagt til på slutten av den. For å sjekke funksjonaliteten, trykk på listepunktene:

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

Gjør slik at ved klikk på hver li blir et '?' lagt til i begynnelsen av den.

Det er gitt avsnitt. Gjør slik at ved klikk på hvert avsnitt vises innholdet av det på skjermen.

Det er gitt avsnitt med tall. Ved trykk på avsnittet skal kvadratet av tallet det inneholde vises i det.