Gebeurtenisbinding in jQuery

Bijna elke JavaScript-gebeurtenis heeft een overeenkomende jQuery-methode. Klikken op elementen kan bijvoorbeeld als volgt worden gedetecteerd: $(selector).click(functie).

Laten we de volgende HTML-code bekijken:

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

Hiervoor is de volgende CSS geschreven:

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

Laten we ervoor zorgen dat er bij een klik op een willekeurige li een uitroepteken wordt weergegeven. Klik op de lijstitems:

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

Binnen de gebonden functie is this beschikbaar, die verwijst naar het element waarin de gebeurtenis plaatsvond (in ons geval de li waarop is geklikt). Deze this kan worden gebruikt in JavaScript-stijl, bijvoorbeeld this.innerHTML of in jQuery-stijl - hiervoor moet deze this worden verpakt in $, zoals dit: $(this).

Laten we de volgende HTML-code nemen:

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

Voor deze code zijn de volgende CSS-stijlen geschreven:

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

Laten we ervoor zorgen dat er bij een klik op een li een '!' aan het einde wordt toegevoegd. Klik op de lijstitems om de werking te testen:

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

Zorg ervoor dat bij een klik op elke li een '?' aan het begin wordt toegevoegd.

Er zijn alinea's gegeven. Zorg ervoor dat bij een klik op elke alinea de inhoud ervan op het scherm wordt weergegeven.

Er zijn alinea's met nummers gegeven. Bij een klik op een alinea moet het kwadraat van het getal dat deze bevat erin verschijnen.