Как заменить jQuery на чистый Javascript

Как заменить jQuery на чистый Javascript

jQuery одна из самых популярных библиотек своего времени. Использовалась, да и часто до сих пор используется на многих сайтах для манипуляции DOM, AJAX запросов и прочего

Изначально она создавалась для решения проблем кросс-браузерности в работе JS-кода. Чтоб все было «четко» и работало везде. Также синтаксис был достаточно удобным для работы, что многим и сейчас по душе.

Однако в настоящее время среди frontend-разработчиков, ее использование сходит на «нет». Связано это в первую очередь с прогрессом самого языка JavaScript современная версия которого (ES6) во всю используется повсеместно, а браузеры достаточно хорошо прогрессируют в его поддержке. Использование jQuery в этом контексте становится моветоном…

По теме:

Дабы помочь начинающим разработчикам давайте рассмотрим альтернативы типичным методам jQuery и заменим их на «чистый» Javascript.


Готовность DOM

Метод ready используется в jQuery для выполнения кода после загрузки всего DOM. Благодаря этому вы можете быть уверены в том, что функции анимации или изменения элементов на сайте, будут работать правильно. До выхода версии jQuery 3.0 типичный вызов был таков:

$(function() {
  // Здесь ваш код по готовности DOM
});

А как проверить готовность DOM на чистом javascript?

Достаточно просто:

document.addEventListener("DOMContentLoaded", function(){
  // Здесь ваш код по готовности DOM
});

Проверка загрузки всего документа

Для того чтобы выполнить JS-код после полной загрузке документа мы можем привязаться к событию load для объекта window проверить загрузку всего документа

jQuery вариант:

$( window ).load(function() {
    // Здесь ваш код после полной загрузки всей страницы
});

Чистый JS вариант:

window.addEventListener('load', function() {
 // Здесь ваш код после полной загрузки всей страницы
});

Выборка элементов страницы из DOM

Собственно за эту простоту во многом и любили jQuery. Все знали что для того чтобы получить например контейнер меню с id="menu" достаточно сделать:

// jQuery
var menu = $("#menu");

и все - весь контейнер меню теперь в переменной menu.

Примерно тоже самое было с классами и элементами:

// jQuery
// Получение элементов с классом widget
$(".widget");
// Получение всех изображений на странице
$("img")

В чистом JavaScript в сравнение с jQuery мы имеем несколько вариантов выборки элементов. Самым универсальными похожим на $() является document.querySelector() и document.querySelectorAll()

Данный код найдет первый элемент с нужным селектором:

var el = document.querySelector(".myclass");
А этот найдет все элементы с классом `.myclass`:
var elements = document.querySelectorAll(".myclass");

Комментарии