Gebeurtenisbinding in jQuery

Byna elke JavaScript-gebeurtenis het sy eie jQuery-metode. Byvoorbeeld, 'n klik op elemente kan soos volg gevang word: $(selector).click(funksie).

Kom ons kyk na die volgende HTML-kode:

<ul>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
</ul>

Daar is CSS daarvoor geskryf:

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

Kom ons maak dit so dat 'n klik op enige li 'n uitroepteken toon. Druk op die punte van die lys:

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

Binne die gekoppelde funksie is this beskikbaar, wat verwys na die element waarin die gebeurtenis plaasgevind het (in ons geval die li waarop geklik is). Hierdie this kan in JavaScript-styl gebruik word, bv. this.innerHTML of in jQuery-styl - hiervoor moet hierdie this ingewikkel word in $, soos volg: $(this).

Neem die HTML-kode:

<ul>
	<li>teks</li>
	<li>teks</li>
	<li>teks</li>
</ul>

Die volgende CSS-style is vir hierdie kode geskryf:

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

Kom ons maak dit so dat 'n klik op li 'n '!' by die einde daarvan voeg. Om die werking te toets, druk op die punte van die lys:

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

Maak dit so dat 'n klik op elke li 'n '?' aan die begin daarvan byvoeg.

Daar is paragrawe. Maak dit so dat 'n klik op elke paragraaf die inhoud daarvan op die skerm vertoon.

Daar is paragrawe met getalle. Met 'n druk op die paragraaf moet die kwadraat van die getal wat dit bevat, daarin verskyn.