Оглавление
jQuery
Классическая библиотека для работы со страницей: выборка элементов, события, анимации и AJAX.
1.Начало работы
- Что такое jQueryЧто умеет библиотека jQuery, чем она отличается от обычного JavaScript и стоит ли её использовать сегодня.
- Подключение и запуск кодаКак подключить jQuery с CDN или через npm и как запустить код после загрузки страницы с помощью $(function).
- СелекторыКак найти элементы функцией $: CSS-селекторы, объект jQuery, length и обращение к самому элементу.
- Перемещение по деревуКак от найденного элемента перейти к соседним: find, children, parent, closest, siblings, eq, first, last и filter.
2.Работа со страницей
- Текст и HTMLКак прочитать и изменить содержимое элементов методами text() и html() и чем они отличаются.
- Атрибуты, свойства и data-*Методы attr(), prop(), removeAttr() и data(): чем атрибут отличается от свойства и как хранить данные в разметке.
- Классы и стилиМетоды addClass, removeClass, toggleClass, hasClass и css(): как менять внешний вид элементов.
- Создание, вставка и удалениеКак создать новый элемент, вставить его методами append, prepend, before, after и убрать методами remove и empty.
- Перебор: each и mapКак обойти каждый элемент набора методом each(), собрать значения методом map() и чем они отличаются от $.each и $.map.
3.События и формы
- События: on и offКак подписаться на событие методом on(), снять обработчик методом off() и выполнить его один раз методом one().
- Делегирование событийКак одним обработчиком на списке обслужить все пункты, в том числе добавленные позже: on() с селектором.
- Объект события и preventDefaultЧто лежит в объекте события: target, currentTarget, key, type; как отменить действие браузера и остановить всплытие.
- Формы: val и serializeКак читать и менять значения полей методом val(), обработать отправку формы и собрать все поля методами serialize() и serializeArray().
- Простая проверка формыКак проверить поля формы перед отправкой, показать сообщения об ошибках рядом с полями и убрать их при исправлении.
4.Эффекты и анимация
- Показать и скрыть: show, hide, toggleКак скрывать и показывать элементы методами hide(), show() и toggle(), с анимацией и без, и как узнать, виден ли элемент.
- Затухание и сворачивание: fade и slideЭффекты fadeIn, fadeOut, fadeToggle, fadeTo, slideUp, slideDown, slideToggle, а также delay() и stop().
- Своя анимация: animateКак плавно изменить числовые свойства CSS методом animate(): относительные значения, длительность, плавность и цепочки анимаций.
5.AJAX и промисы
- Запросы к серверу: $.ajaxКак загрузить данные с сервера без перезагрузки страницы функцией $.ajax: настройки запроса, done, fail и always.
- Короткие запросы: $.get, $.getJSON, $.postСокращённые функции для частых запросов: $.get, $.getJSON, $.post и метод load(), а также отправка формы через AJAX.
- Промисы: $.Deferred и thenКак устроены промисы jQuery: объект $.Deferred, resolve и reject, цепочки then, ожидание нескольких запросов через $.when и await.
6.jQuery в реальных проектах
- Служебные функцииФункции jQuery, не связанные со страницей: $.extend для слияния объектов, $.each, $.param, $.isEmptyObject и устаревший $.trim.
- Свой плагин: $.fnКак добавить свой метод ко всем объектам jQuery через $.fn: возврат this для цепочек, перебор элементов и настройки по умолчанию.
- jQuery в WordPressКак подключить свой скрипт с jQuery в теме WordPress через wp_enqueue_script и почему в WordPress не работает знак $.
- Переход на чистый JavaScriptТаблица соответствий методов jQuery и встроенных возможностей браузера и порядок постепенного отказа от jQuery в проекте.