JQuery — JS: DOM API

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

// Знак $ — это функция JQuery, через которую все и делается
$(() => {
  // Эта функция выполнится на событии DOMContentLoaded
});

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

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

// Работает так же, как и document.querySelectorAll
// document.querySelectorAll('.section span')
// Возвращает специальную JQuery-коллекцию со своим набором методов
const spans = $('.section span');

// Кроме того, можно осуществлять селекцию внутри конкретного контейнера
// Добавляем его вторым аргументом
const container = $('.item-box');
const items = $('li', container); // находит все li внутри контейнера с классом item-box

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

const buttons = $('button');
// Вешает обработчик click на все кнопки в этой коллекции
buttons.click(() => {
  alert('hey!');
});

Вместо:

<button onclick="alert('hey!')">

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

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

// Прячем все элементы по селектору container.main
$('container.main').hide();

// Удаляем элемент с id=address
$('#address').remove();

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

Манипуляции

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

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

// Выбираются все элементы h1
const headings = $('h1');
// Добавление класса всем заголовкам h1
headings.addClass('header');

// То же самое без jquery
const headings = document.querySelectorAll('h1');
headings.forEach((el) => el.classList.add('header'));

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

// Если была найдена одна ссылка
const link = $('#home');
link.html('link to home'); // установка textContent
link.attr('href', '/about'); // установка атрибута
// Чтение атрибута
console.log(link.attr('href')); // => /about

События

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

$('button').click(() => {
  // Установка атрибута href на элемент с идентификатором w3c
  // attr может принимать вторым параметром функцию
  // В нее передается оригинальное значение атрибута
  $('#w3c').attr('href', (i, origValue) => `${origValue}/jquery`);
});

AJAX

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

// Цепочка вызовов работает по тому же принципу, что и промисы
// Разница только в деталях
const jqxhr = $.get('/api/v1/companies.json', (data) => {
  console.log('success');
})
.done(() => {
  console.log('success');
})
.fail(() => {
  console.log('fail');
})
.always(() => {
  console.log('finished');
});

Анимация

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

<!-- Плавное появление элемента по клику -->
<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
<script>
  // Элемент #book загружается как скрытый, а по клику медленно появляется
  $('#clickme').click(() => {
    $('#book').show('slow', () => {
      // Действия после завершения анимации
    });
  });
</script>

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

Перспективы

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

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

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

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

Дополнительные материалы

1. Почему в devtools не работает jQuery со знаком $

---

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Урок «Как эффективно учиться на Хекслете»
• Вебинар «Как самостоятельно учиться»