Материал из JQuery
Устанавливает функцию handler в качестве обработчика события click, на выбранные элементы страницы.
Метод является аналогом bind("click", handler(eventObject)).
handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject.
Метод отличается от предыдущего возможностью передавать в обработчик дополнительные данные.
Является аналогом bind("click", eventData, handler(eventObject)).
handler(eventObject) — см. выше.
eventData — дополнительные данные, передаваемые в обработчик. Они должны быть представлены объектом в формате: .
Вызывает событие click, у выбранных элементов страницы. Метод является аналогом trigger("click").
Убрать установленный обработчик можно с помощью метода unbind().
Все три варианта использования метода, являются аналогами других методов (см. выше), поэтому все подробности использования click(), можно найти в описании этих методов.
Определение и применение
jQuery метод .click() привязывает JavaScript обработчик событий "click" (клик левой кнопкой мыши), или запускает это событие на выбранный элемент.
Обращаю Ваше внимание на то, что следующие условия обязательно должны быть выполнены, чтобы событие "click" сработало:
- Левая кнопка мыши нажата, когда курсор находился внутри элемента.
- Левая кнопка мыши отпущена пока курсор находится внутри элемента.
jQuery синтаксис:
Обращаю Ваше внимание, что метод .click(), используемый вместе с функцией, переданной в качестве параметра (handler) является, короткой записью метода .on(), а без параметра является короткой записью метода .trigger():
Добавлен в версии jQuery
Значения параметров
| Параметр | Описание |
|---|---|
| eventData | Объект, содержащий данные, которые будут переданы в обработчик событий. |
| handler | Функция, которая будет выполнена каждый раз, когда событие срабатывает. Функция в качестве параметра может принимать объект Event . |
Пример использования
В этом примере с использованием jQuery метода .click() мы при нажатии на элемент (кнопка) вызываем событие "click" на элементе
Обратите внимание, что если мы вызываем напрямую событие "click" на элемент
Результат нашего примера:
Пример использования jQuery метода .click() (без параметров и с функцией) jQuery события
Поменять класс по клику на JQuery? А потом вернуть при повторном клике? Легко! Давайте научимся этому.
Сейчас мы научимся менять класс у элемента по клику на нем. В принципе, функция универсальная и можно изменить ее как угодно - менять класс у другого элемента, нескольких элементов, у другого и этого и так далее, на что только хватит вашей фантазии. Давайте для начала создадим элемент:
Это обычный блочный элемент. Ничего особенного, для примера - в самый раз.
Теперь зададим стили:
Я задал следующие стили для элемента div: ширину, равную 100px, высоту, равную 100px и рамку, для визуального определения нашего блока. Также я задал класс click, которому присвоил фоновый зеленый цвет. То есть элемент, имеющий класс click будет залит зеленым цветом.
Теперь попробуем с вами написать скрипт, который будет выполнять следующее: по клику по блоку div, он будет присваивать ему класс click. При повторном клике - убирать. Все просто. Вот что у меня получилось:
Скрипт выполняет следующее: когда документ загружен ((document).ready), по клику на элементе div ($('div')), ему присваивается класс click ($(this).toggleClass('click');), а при повторном клике убирается (за это как раз отвечает функция toggleClass - или переключатель).
Не забывайте, что скрипт написан на языке JQuery, а значит нам понадобится предварительно подключить к странице свежую библиотеку. Вот собственно и все.
