Legarea evenimentelor în jQuery

Aproape fiecărui eveniment JavaScript îi corespunde o metodă jQuery. De exemplu, clicul pe elemente poate fi captat astfel: $(selector).click(funcție).

Să analizăm următorul cod HTML:

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

Pentru acesta este scris CSS:

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

Să facem astfel încât la clic pe orice li să se afișeze un semn de exclamare. Apăsați pe punctele listei:

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

În interiorul funcției legate este disponibil this, care se referă la acel element în care a avut loc evenimentul (în cazul nostru pe li, pe care a fost făcut clic). Acest this poate fi folosit în stil JavaScript, de exemplu, this.innerHTML sau în stil jQuery - pentru aceasta acest this trebuie înfășurat în $, astfel: $(this).

Să luăm codul HTML:

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

La acest cod sunt scrise următoarele stiluri CSS:

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

Să facem astfel încât la clic pe li să i se adauge la sfârșit '!'. Pentru a verifica funcționarea, apăsați pe punctele listei:

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

Faceți astfel încât la clic pe fiecare li să i se adauge la început '?'.

Sunt date paragrafe. Faceți astfel încât la clic pe fiecare paragraf să se afișeze pe ecran conținutul acestuia.

Sunt date paragrafe cu numere. La apăsarea pe paragraf în acesta trebuie să apară pătratul numărului, pe care îl conține.