Свързване на събития в 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 в началото й да се добавя '?'.

Дадени са абзаци. Направете така, че при кликване върху всеки абзац на екрана да се извежда неговото съдържание.

Дадени са абзаци с числа. При натискане на абзац в него трябва да се появи квадратът на числото, което той съдържа.