Лабораторная работа № 2
События и jQuery
В лабораторной работе используются:
-
jQuery Framework – http://jquery.com/.
-
Полезная информация – http://jquery-docs.ru.
Прочитайте файл – события - Русская документация по jQuery.htm, который расположен в папке jQuery. В этом файле вы найдете описание событий, с которыми работает jQuery.
Примеры
В файле Ex0.html, приведен пример события и прикрепленного к нему обработчика события. В примере при наведении курсора мыши на пункт списка с id=”e0” подсчитывается количество наведений.
В файле Ex1.html, приведен другой пример события и прикрепленного к нему обработчика события с помощью функции bind(). Чтобы убрать событие, прикрепленное к элементу с id=”e0” из этого примера, достаточно воспользоваться функцией unbind().
$('#e0').unbind();
Пространство имен – это понятие позволяет группировать обработчики событий. Например, в файле Ex2.html к элементу с id=”e0” прикреплены 3 обработчика событий, два из них находятся в одном пространстве имен. Таким образом, если раскомментировать код $('#e0').unbind('.firstnamespace'); то мы отменим все обработчики событий в пространстве имен '.firstnamespace'.
Задания
-
На странице дано текстовое поле ввода input, прикрепить к нему 5 любых возможных над этим элементом событий. Под полем ввода расположен параграф, который отображает название текущего события совершаемого над ним.
-
На странице дан прямоугольник, в него вложен меньший по размеру прямоугольник (реализовать с помощью div). Необходимо прикрепить к нему события: mouseenter, mousemove, mouseleave, click.
При mouseenter – прямоугольник меняет цвет на красный.
При mousemove – вложенный прямоугольник меняет свой цвет на зеленый.
При mouseleave – прямоугольник меняет цвет на синий, вложенный прямоугольник становится белым.
При click – прямоугольник увеличивается на 2 пикселя со всех сторон.
-
Для задания 2. Разделить события на 2 группы по 2 события, с разным пространством имен. Для каждой группы добавить по 2 кнопки (элемент – input): первая кнопка прикрепляет события к прямоугольнику, вторая кнопка отменяет прикрепление.