Привязывание событий в 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 ей в начало
добавлялся '?'.
Даны абзацы. Сделайте так, чтобы по клику на каждый абзац на экран выводилось его содержимое.
Даны абзацы с числами. По нажатию на абзац в нем должен появится квадрат числа, которое он содержит.