Händelsebindning i jQuery

Nästan varje JavaScript-händelse har en motsvarande metod i jQuery. Till exempel kan ett klick på element fångas upp så här: $(selector).click(function).

Låt oss titta på följande HTML-kod:

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

För den har följande CSS definierat:

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

Låt oss göra så att när man klickar på något li så visas ett utropstecken. Klicka på listpunkterna:

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

Inuti den bundna funktionen finns this tillgänglig, som refererar till det element där händelsen inträffade (i vårt fall li som klickades på). Denna this kan användas i JavaScript-stil, till exempel this.innerHTML eller i jQuery-stil - för att göra detta bör denna this lindas in i $, så här: $(this).

Låt oss ta HTML-koden:

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

Följande CSS-stilar är definierade för denna kod:

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

Låt oss göra så att när man klickar på li så läggs ett '!' till i slutet av den. För att testa funktionen, klicka på listpunkterna:

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

Gör så att när man klickar på varje li så läggs ett '?' till i början av den.

Det finns stycken. Gör så att när man klickar på ett stycke så visas dess innehåll på skärmen.

Det finns stycken med siffror. När man klickar på ett stycke ska kvadraten på talet som det innehåller visas i det.