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');

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

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

Вместо:

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

Сам JQuery при этом является прекрасным примером DSL (предметно-ориентированный язык). Как правило, код на 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 UI

Перспективы

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

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

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


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
120
курсов
900
упражнения
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия

Фронтенд-разработчик

Разработка фронтенд-компонентов веб-приложений
16 июня 8 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».