Theory and Tasks for Students - Spring 2019
Введение в jQuery

jQuery - библиотека, расширяющая функционал нативных средств языка и уменьшающая код приложения за счёт более коротких названий полей и цепного вызова функций. Подробное описание библиотеки можно найти на официальном сайте jquery.com. Оттуда можно скачать скрипт jQuery последней версии, добавить его к файлам сайта и подключать на страницах как любой другой скрипт. Альтернативно можно воспользовать ссылкой Google CDN - это снизить нагрузку на ваш веб-сервер и, скорее всего, у клиента этот скрипт уже будет кеширован. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Весь функционал библиотеки реализован в объекте jQuery и, если такое имя не занято, $. Сам этот объект также является функцией, выполняющий запрос, схожий с document.querySelector() - $("ul.dropdown a.js-link") вернёт коллекцию(не массив) из ссылок внутри списков.
Каждый результат вызова функции является тем же самым объектом с уже изменёнными данными. Возвращаемые DOM элементы также оборачиваются в этот тип, что позволяет вызывать функции сразу для всей коллекции элементов и создавать цепочные вызовы для последовательных модификаций объектов.
Имея ссылку на нативный DOM элемент можно легко превратить его в объект jQuery - var $body = $(document.body). Названия переменных, содержащих объекты jQuery, можно начинать с символа $ для удобства.
Если вместо строки селектора передать тег, jQuery создаст этот элемент, его можно будет позже добавить в документ var $menu = $("<div>").addClass("menu");.

Некоторые методы объектов jQuery:

  • html(arg) - равносильно нативному полю innerHTML; при указании аргумента заменит содержание элемента;
  • text(arg) - равносильно полю innerText;
  • val(arg) - равносильно полю value элементов управления форм;
  • addClass(arg), removeClass(arg), toggleClass(arg), hasClass(arg) - равносильны нативным методам classList.add(arg), classList.remove(arg), classList.toggle(arg), classList.contains(arg);
  • css(prop, value) - возвращает посчитанное значение стиля элемента; задаёт новое значение используя атрибут style, если указан второй аргумент;
  • Управление содержанием документа:

    • append(arg), prepend(arg) - добавляет аргумент(текст или элемент) в начало/конец содержания элемента;
    • before(arg), after(arg) - добавляет аргумент(текст или элемент) перед/после элемента;
    • remove() - удаляет элемент;
    • empty() - удаляет содержание элемента;
  • Проход по дереву элементу документа:

    • parent() - возвращает непосредственного родителя;
    • parents(selector) - возвращает всех родителей, соответствующих селектору - т.е. parent(), parent().parent() и т.д.;
    • parentsUntil(selector) - возвращает всех родителей, начиная от ближайшого, пока очередной из них не будет соответствовать селектору - он и следующие не будет включен в результат;
    • children(selector) - возвращает все дочерние элементы, соответствующие селектору;
    • find(selector) - ищет элементы, соответвующие селектору, среди всех элементов внутри текущего;
    • next(), nextAll(), nextUntil() - возвращают элементы, следующие за текущим;
    • prev(), prevAll(), prevUntil() - возвращают элементы, предшествующие за текущему;
    • siblings() - возвращает соседние элементы;
  • Работа с коллекциями результатов:

    • eq(index) - возвращает элемент с указанным индексом;
    • first(), last() - возвращают первый и последний элементы коллекции;
    • filter(selector), not(selector) - возвращает элементы коллекции, (не) соответствующие селектору;
    • [index] - возвращает нативный DOM элемент с указанным индексом;
    • each(callback) - вызывает функцию callback(index, item) для каждого элемента коллекции;
  • События:

    • click(callback) - вызывает обработку события или привязывает к нему обработчик - существуют и другие событие в виде функций;
    • on(name, callback) - привязывает обработчик к событию с указанным именем;
    • trigger(name) - вызывает обработку события с указанными именем;
    • $(document).ready(callback) - равносильно привязке к событию DOMContentLoaded.