8. Библиотека веб-сценариев JQuery
События
При взаимодействиях с сайтом создаются события - Ивенты. Благодаря Javascript разработчик могут получать их и обрабатывать события.
Типы событий
- События мыши:
click
— клик левой кнопкой мыши на элементе.dblclick
— двойной клик по элементу.mousedown
/mouseup
— нажатие / отпускание кнопки мыши.mouseenter
/mouseleave
— наведение / покидание мыши над элементом.mousemove
— движение мыши над элементом.contextmenu
— клик правой кнопкой мыши, чтобы вызвать контекстное меню.
- События клавиатуры:
keydown
— нажатие клавиши.keyup
— отпускание клавиши.keypress
— удержание клавиши (событие устарело, лучше использоватьkeydown
).
- События формы:
submit
— отправка формы.change
— изменение значения в элементе формы (например,<input>
,<textarea>
,<select>
).focus
/blur
— фокусировка / потеря фокуса на элементе.input
— ввод текста (срабатывает каждый раз при изменении значения в<input>
или<textarea>
).
- События окна и документа:
load
— загрузка всего содержимого страницы.resize
— изменение размера окна браузера.scroll
— прокрутка страницы.unload
— закрытие или обновление страницы.
- События Drag-and-Drop (перетаскивание):
dragstart
/dragend
— начало и конец перетаскивания.drag
— перетаскивание элемента.dragover
/dragleave
— элемент перетаскивается над областью или покидает её.drop
— отпускание перетаскиваемого элемента.
- События мультимедиа (например, для
<audio>
и<video>
):play
/pause
— начало воспроизведения / пауза.ended
— завершение воспроизведения.timeupdate
— обновление текущего времени воспроизведения.volumechange
— изменение уровня громкости.
- Кастомные события:
- Это пользовательские события, которые можно создать с помощью конструктора
CustomEvent
, чтобы реагировать на специфические действия в приложении.
- Это пользовательские события, которые можно создать с помощью конструктора
Пример использования событий
Для создания обработчика событий нужно явно найти объект, от которого исходит событие. В нашем примере click
событие при нажатии, которое выдаст сообщение "Кнопка была нажата"
var button = document.getElementById('button_name'); // Находим кнопку с id="button_name"
button.addEventListener('click', (event) => {
console.log('Кнопка была нажата'); // При нажатии на кнопку производиться вызов лога в консоль браузера (Ctrl+Shift+I -> Console)
})
При использовании с библиотекой JQuery:
$(document).on("#button_name", "click", (e) => {
console.log("Кнопка была нажата");
})
Функции и обработчики JQuery облегчают написание кода, что помогает ускорить разработку макетов.
$('.object').on("click", (event) =>{
$("#object").append("<div>Новый объект</div>"); // Результатом нажатия будет создание нового элемента внутри элемента с id="object". Также данный код показывает краткое обращение к элементу. При обращении к новым/созданным объекта данное обращение не используется
})
JQuery содержит в себе множество функций, подробнее, о которых рассказано на странице с документацией - ссылка
$(document).on(".object", "mouseenter", (e) => {
$(this).addClass("new-class");
$("#obj").text("New text");
})
$(document).on(".object", "mouseleave", (e) => {
$(this).removeClass("new-class");
})
Задание
Создайте веб-страницу с кнопками, которые будут изменять текст на странице - скрывать его и восстанавливать при двойном нажатии. Для выполнения данного задания можно использовать как обычный Javascript, так и библиотеку JQuery - скаченную с официального сайт.
Приложение №1
jQuery предоставляет обширный набор методов для работы с элементами DOM, событиями, анимациями, AJAX и многими другими аспектами веб-разработки. Вот подробное описание ключевых методов, сгруппированных по категориям:
$("#selector").text("hello"); // Задаёт текст
$("#selector").text() // Получает текст из селектора(тега), дескриптора
1. Методы выбора и фильтрации элементов
$("selector")
: Выбирает элементы на основе CSS-селектора..find(selector)
: Ищет потомков внутри выбранного элемента..children(selector)
: Получает только непосредственных потомков..parent()
: Выбирает родительский элемент..siblings()
: Выбирает все соседние элементы..eq(index)
: Выбирает элемент по индексу..filter(selector)
: Оставляет только элементы, соответствующие селектору..not(selector)
: Исключает элементы, соответствующие селектору..first()
/.last()
: Выбирает первый или последний элемент..next()
/.prev()
: Выбирает следующий или предыдущий элемент.
2. Работа с содержимым
.html()
: Получает или задаёт HTML-содержимое элемента..text()
: Получает или задаёт текстовое содержимое..val()
: Получает или задаёт значение элементов формы..append(content)
: Добавляет содержимое в конец выбранных элементов..prepend(content)
: Добавляет содержимое в начало..after(content)
/.before(content)
**: Добавляет содержимое после или перед элементом..empty()
: Удаляет все дочерние элементы..remove()
: Удаляет элемент из DOM полностью..clone()
: Создаёт копию элемента.
3. Управление классами и атрибутами
.addClass(className)
: Добавляет класс элементу..removeClass(className)
: Удаляет класс..toggleClass(className)
: Переключает класс (добавляет, если его нет, и удаляет, если он есть)..hasClass(className)
: Проверяет наличие класса..attr(attribute)
/.attr(attribute, value)
: Получает или задаёт значение атрибута..removeAttr(attribute)
: Удаляет атрибут..prop(property)
/.prop(property, value)
: Получает или задаёт свойство элемента.
4. Изменение CSS
.css(property)
/.css(property, value)
: Получает или задаёт стиль элемента..width()
/.height()
: Получает или задаёт ширину/высоту элемента..innerWidth()
/.innerHeight()
: Ширина/высота с внутренними отступами (padding)..outerWidth()
/.outerHeight()
: Ширина/высота с отступами и рамкой (padding + border).
5. Работа с событиями
.on(event, selector, handler)
: Добавляет обработчик события..off(event)
: Удаляет обработчик события..click(handler)
: Добавляет обработчик события клика..hover(handlerIn, handlerOut)
: Обработчик наведения и ухода мыши..keyup(handler)
/.keydown(handler)
: Обработчики событий клавиатуры..trigger(event)
: Программно вызывает событие.
6. Эффекты и скрытие/отображение
.show()
/.hide()
: Показывает или скрывает элементы..toggle()
: Переключает видимость..fadeIn()
/.fadeOut()
/.fadeToggle()
: Эффект плавного появления/исчезновения..slideDown()
/.slideUp()
/.slideToggle()
: Эффект разворачивания/сворачивания.
7. AJAX (работа с сервером)
$.ajax(options)
: Выполняет AJAX-запрос с детальными настройками.$.get(url, data, callback)
: Выполняет GET-запрос.$.post(url, data, callback)
: Выполняет POST-запрос..load(url, data, callback)
: Загружает содержимое в элемент с сервера.$.getJSON(url, callback)
: Выполняет запрос JSON-данных.
8. Работа с коллекцией элементов
.each(callback)
: Перебирает выбранные элементы..map(callback)
: Преобразует коллекцию в новый массив..toArray()
: Преобразует коллекцию в массив DOM-элементов.
9. Работа с формами
.serialize()
: Преобразует данные формы в строку запроса..serializeArray()
: Преобразует данные формы в массив объектов.
10. Утилиты jQuery
$.isArray(obj)
: Проверяет, является ли объект массивом.$.trim(string)
: Удаляет лишние пробелы из строки.$.extend(target, object1, object2)
: Объединяет объекты.