Как заменить 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() {
 // Здесь ваш код после полной загрузки всей страницы
});
Сергей Мочалов

Сергей Мочалов

Веб-разработчик. Создаю и поддерживаю сайты для клиентов с 2009 года

Комментарии