Чистый JavaScript вместо jQuery. Примеры решений

Тенденция отказа от jQuery возникла очень давно и усиливалась по мере того, как браузеры улучшали поддержку ES6. Во многих проектах в числе требований упоминается избегание использования jQuery и плагинов. Самих плагинов становится все меньше. Большинство не обновляются годами, другие были переписана на JS без использования фреймворков, новых почти не пишут.

Тем не менее, отдельно взятые разработчики, чаще фрилансеры, все еще используют jQuery при разработке фронтенда. Особенно больно видеть, когда jQuery используется только как синтаксический сахар для селекторов или для переключения классов у элементов. То есть верстальщик все анимации и состояния описывает в CSS, но переключение осуществляет с помощью методов addClass(), removeClass() или toggleClass(). Иными словами, для такой простой процедуры тянется весь jQuery, который никогда не считался быстрым и легковесным фреймворком.

Если навыки программирования на JavaScript оставляют желать лучшего, то отказаться от jQuery может быть проблематично. Но стоит знать, что большинство типовых задач можно решить без фреймворков, при этом ненужно быть гуру JS. Ниже примеры кода с комментариями.

DOM Ready

Стандартная ситуация, когда сначала ждем загрузки DOM и только потом выполняем JavaScript-код. Особенно актуально, если много работаете с событиями.

Вариант jQuery:

// Ждем готовности DOM
$(document).ready(function() {
    // Поехали
});

// или так (рекомендуемый вариант)
$(function() {
    // Поехали
});

Вариант на ванильном JavaScript:

// Своя функция-аналог jQuery.ready()
const ready = (cb) => {
    if (document.readyState === "loading")  {
        cb();
    } else {
        document.addEventListener("DOMContentLoaded", cb);
    }
}

// Используем функцию
ready(() => {
    console.log('DOM already loaded');
})

Выборка элементов DOM

Думаю, не ошибаюсь, если предположу, что наибольшее впечатление при знакомстве с jQuery оставлял изящный способ выборки элементов из DOM.

// Выбор по тэгу
$('html');

// По имени класса
$('.class-name');

// По ID
$('#element-id');

Вариантов селектора, который можно использовать с jQuery, огромное множество. Это действительно изящный способ работы с DOM, от которого сложно отказываться. Обратная сторона медали – низкая скорость взаимодействия с DOM.

Вариант на ванильном JavaScript:

// Выбор по имени тэга
document.querySelector('body');

Вместо имени тэга может быть любой допустимый CSS селектор. Я давно не работал с jQuery и не могу уверенно сказать, умет ли он больше, но возможностей document.querySelector() должно быть достаточно.

Особенность такого доступа к элементам заключается в том, что метод вернет вам ПЕРВЫЙ элемент, который найдет. Что получить все элементы (так работает в jQuery), необходимо использовать querySelectorAll().

// Выбор по двум селекторам
const matches = document.querySelectorAll(".container, .block");

// Проходим по найденным элементам
matches.forEach(element => {
    console.log(element);
});

Элементы prev и next

Вариант jQuery:

// Предыдущий и следующий элементы
$(".block").prev();
$(".block").next();

Вариант на ванильном JavaScript:

const element = document.querySelector(".col");

// Предыдущий элемент
element.previousElementSibling;

// Следующий элемент
element.nextElementSibling;

Дочерние и родительский элементы

Вариант jQuery:

// Прямой родитель
$(".block").parent();

// Все дочерние элементы
$(".block").children();

Вариант на ванильном JavaScript:

// Родительский элемент
element.parentElement;

// Дочерние элементы
element.children;

// Первый дочерний элемент
element.firstElementChild;

// Последний дочерний элемент
element.lastElementChild;

Отдельно можно выделить необходимость поиска среди потомков текущего элемента.

Поиск потомков на jQuery:

// Ищем потомков с именем класса .block
$('.container').find('.block');

// Ищем потомков по имени тэга
$('.container').find('span');

Поиск потомков на ванильном JavaScript

const container = document.querySelector('.container');

container.querySelectorAll('.block');

Вызываем уже знакомый querySelector(), но не на document, а на объекте ранее выбранного элемента DOM.

Работа с событиями: прослушивание, инициация.

В разных версиях jQuery предлагала разные способы подписки на события, но в конечном счете все свелось к использованию метода on() или one().

Вариант jQuery:

$('.form').on('submit', (e) => {
    e.preventDefault();
});

// Слушатель события будет удален после первого срабатывания события
$('.btn').one('click', (e) => {
    e.preventDefault();
});

// Инициируем срабатывание событий "вручную"
$('.form').trigger('submit');
$('.btn').trigger('click');

Вариант на ванильном JavaScript:

const element = document.querySelector(".btn");

element.addEventListener("click", (e) => {
    e.preventDefault();
});

// Инициируем срабатывание события "вручную"
element.dispatchEvent(new Event('click'));

Работа с CSS классами

Это то, о чем я говорил в самом начале – добавление/удаление CSS классов у элемента. Большую часть методов, которые предлагает jQuery, можно заменить аналогичными на чистом JS.

Вариант jQuery:

if ($('.title').hasClass('title_bold')) {
    // У элемента есть класс .title_bold
}

// Добавление и удаление класса .title_red
$('.title').addClass('title_red');
$('.title').removeClass('title_bold');

// Переключение наличия класса .title_red
$('.title').toggleClass('title_red');

Вариант на ванильном JavaScript:

if (element.classList.contains('title_bold')) {
    // У элемента есть класс .title_bold
}

// Добавление и удаление
element.classList.add('title_red');
element.classList.remove('title_bold');

// Переключение
element.classList.toggle('title_red');

Динамические элементы

jQuery позволяет достаточно изящно менять DOM: добавлять, удалять и модифицировать элементы. На чистом JS эти операции выглядят более «многословно», но не являются сложными. Сравним создание нового элемента.

Вариант jQuery:

const button = $('<button/>', {
    class: 'btn',
    text: 'Кнопка'
}).css('color', 'blue');

$('#container').append(button);

Изменение цвета текста кнопки через метод css() не относится к работе с DOM, но для наглядности будет полезно. Теперь тоже самое на чистом JavaScript.

Вариант на ванильном JavaScript:

const element = document.createElement('button');
element.textContent = 'Кнопка';
element.classList.add('btn');
element.style.color = 'blue';

document.querySelector('.container').append(element);

Это далеко не все «быстрые» замены для привычных вам подходов, но для старта должно быть достаточно. Также замечу, что полностью отказываться от сторонних библиотек не всегда оправданно. Если быть точным, это почти всегда лишено смысла. Необходимо уметь пользоваться тем, что во что вложили свое время и усилия другие разработчики. Просто время jQuery ушло или уйдет совсем скоро, но есть другие современны инструменты. Рекомендую обратить свое внимание на Lodash, возможности которого многих не оставляют равнодушными.