Везивање догађаја у 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 њој на почетак додаје '?'.

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

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