JS: DOM API
2026-02-26 23:15 Diff
https://ru.hexlet.io/courses/js-dom/lessons/jquery/theory_unit

В августе 2006 года Джон Резиг выпустил библиотеку JQuery. За короткое время эта библиотека завоевала огромную популярность и стала стандартом в разработке интерактивных элементов на сайтах:

Во многом это случилось потому, что JQuery появилась в нужное время в нужном месте. В те годы шел переход к верстке без использования таблиц, и CSS использовался все активнее и разнообразнее. JQuery позволил переиспользовать те же самые селекторы для добавления поведения.

К тому же, в JQuery был реализован CSS3, причем гораздо раньше, чем он появился нативно в самих браузерах. Более того, библиотека JQuery позволила практически не думать о разных браузерах. Одна из ее задач — обеспечить работоспособность на всех платформах:

Еще одна причина успеха — библиотека JQuery популяризовала отделение верстки от поведения. Такую технику называют «Ненавязчивый JavaScript». Ее идея в том, что обработчики событий описываются не в самих тегах, а отдельно:

Вместо:

При этом сама библиотека JQuery — это прекрасный пример предметно-ориентированного языка.

Как правило, код на JQuery выражает задачу в тех же терминах, в которых эта задача формулируется:

И это еще не все. JQuery долгое время предоставляла единственный нормальный способ делать AJAX-запросы и анимацию на страницах. Благодаря расширяемости за счет плагинов, экосистема библиотеки за десяток лет стала фантастических размеров. В какой-то период времени любая библиотека для фронтенда появлялась как плагин к JQuery. Вплоть до того, что некоторые люди вообще не догадываются о существовании JavaScript и DOM. Они сразу начали с JQuery и видят мир только сквозь него.

Манипуляции

Функция $ — это единая точка входа для всего. Если ее вызвать и передать внутрь строчку, то JQuery посчитает строку селектором и сделает выборку элементов DOM. Этот вызов аналогичен вызову querySelectorAll(), с тем лишь отличием, что возвращается специализированная коллекция.

В принципе, JQuery работает с элементами как с коллекциями, даже если это один элемент. И любые изменения применяются сразу ко всем элементам коллекции без итерирования:

Ниже есть несколько примеров функций, изменяющих DOM-элемент и его потомков. Здесь видна одна из главных особенностей JQuery. Если мы вызовем эти функции с параметрами, то значения изменятся. Если вызовем без параметров, значения вернутся:

События

JQuery предоставляет собственные методы для подписки на события, выступая абстракцией над addEventListener. Например, так будет обрабатываться клик по кнопке:

AJAX

JQuery умеет выполнять и Ajax-запросы. Но научился он этому до появления стандартов, поэтому интерфейс этого механизма отличается от стандартных промисов:

Анимация

С одной стороны, JQuery дает набор готовых анимаций, а с другой — представляет механизм для создания более сложных эффектов, основанных на изменении CSS-свойств:

Для библиотеки JQuery есть группа плагинов JQuery UI. Эти плагины реализуют типичную функциональность, необходимую при разработке интерактивных сайтов — например, перетаскивание, автозаполнение, изменение размеров, сортировка и многое другое:

Перспективы

Раньше JQuery была прекрасным выбором, но это время уходит. Эта библиотека появилась больше 15 лет назад, и с тех пор технологии ушли вперед.

Стандарт DOM развился настолько, что теперь многие вещи удобнее делать напрямую, чем через JQuery. При этом большинство браузеров уже поддерживают стандарт DOM. Если где-то поддержки не хватает, всегда есть полифиллы. К тому же, появились новые стандарты, в которые JQuery не вписывается. Ярким примером служат промисы и тот же AJAX.

Все это приводит к тому, что постепенно происходит отказ от JQuery. Для любых задач на фронтенде можно найти множество популярных библиотек, которые в своей нише будут лучше, чем JQuery.

С другой стороны, на JQuery уже столько понаписано, что его упоминают во многих вакансиях, связанных с фронтендом. Как вы могли убедиться из примеров выше, ничего сложного и фантастического в JQuery нет. В первую очередь надо знать DOM, а остальное — это просто внимательное чтение документации и примеров использования.