Врзување на настани во jQuery

Речиси секој JavaScript настан има свој соодветен jQuery метод. На пример, кликот на елементите може да се фати вака: $(селектор).click(функција).

Да го разгледаме следниот HTML код:

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

За него е напишан CSS:

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

Ајде да направиме така што при клик на која било li да се испише извичник. Кликнете на точките од листата:

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

Внатре во врзаната функција е достапен this, кој покажува на оној елемент во кој се случил настанот (во нашиот случај на li, на која бил кликнато). Овој this може да се користи во стилот на JavaScript, на пример, this.innerHTML или во стилот на jQuery - за да го направите ова, овој this треба да се завитка во $, вака: $(this).

Да го земеме HTML кодот:

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

За овој код се напишани следниве CSS стилови:

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

Ајде да направиме така што при клик на li на нејзиниот крај да се додаде '!'. За да ја проверите работата, кликнете на точките од листата:

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

Направете така што при клик на секоја li на нејзиниот почеток да се додаде '?'.

Дадени се параграфи. Направете така што при клик на секој параграф на екранот да се испише неговата содржина.

Дадени се параграфи со броеви. При клик на параграф во него треба да се појави квадрат на бројот кој го содржи.