Event Binding i jQuery

Næsten alle JavaScript-events har deres tilsvarende jQuery-metode. For eksempel kan et klik på elementer fanges sådan her: $(selektor).click(funktion).

Lad os se på følgende HTML-kode:

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

For den er der skrevet CSS:

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

Lad os gøre sådan, at ved klik på enhver li vises et udråbstegn. Tryk på punkterne i listen:

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

Inde i den bundne funktion er this tilgængelig, som henviser til det element, hvor handlingen skete (i vores tilfælde den li, der blev klikket på). Denne this kan bruges i JavaScript-stil, for eksempel this.innerHTML eller i jQuery-stil - for at gøre dette skal denne this indpakkes i $, sådan her: $(this).

Lad os tage HTML-koden:

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

Følgende CSS-stile er skrevet til denne kode:

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

Lad os gøre sådan, at ved klik på li bliver der tilføjet et '!' til slutningen. For at teste funktionen, tryk på punkterne i listen:

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

Gør sådan, at ved klik på hver li tilføjes et '?' i starten.

Der gives afsnit. Gør sådan, at ved klik på hvert afsnit vises dets indhold på skærmen.

Der gives afsnit med tal. Ved tryk på afsnittet skal kvadratet på tallet, som det indeholder, vises i det.