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

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

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

←→
↑