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

Даны абзацы. Сделайте так, чтобы по клику на каждый абзац на экран выводилось его содержимое.

Даны абзацы с числами. По нажатию на абзац в нем должен появится квадрат числа, которое он содержит.