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): Объединяет объекты.