Привязывание событий в jQuery

Практически каждому событию JavaScript соответствует свой метод jQuery. К примеру, клик по элементам можно отловить так: $(селектор).click(функция).

Рассмотрим следующий HTML код:

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

Для него прописан CSS:

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

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

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

Внутри привязанной функции доступен this, ссылающийся на тот элемент, в котором произошло событие (в нашем случае на li, на которую был клик). Этот this можно использовать стиле JavaScript, например, this.innerHTML или в стиле jQuery - для этого этот this следует обернуть в $, вот так: $(this).

Возьмем HTML код:

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

К данному коду прописаны следующие CSS стили:

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

Давайте сделаем так, чтобы по клику на li ей в конец добавлялся '!'. Для проверки работы понажимайте на пункты списка:

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