Как заменить jQuery на чистый Javascript
jQuery одна из самых популярных библиотек своего времени. Использовалась, да и часто до сих пор используется на многих сайтах для манипуляции DOM, AJAX запросов и прочего
Изначально она создавалась для решения проблем кросс-браузерности в работе JS-кода. Чтоб все было «четко» и работало везде. Также синтаксис был достаточно удобным для работы, что многим и сейчас по душе.
Однако в настоящее время среди frontend-разработчиков, ее использование сходит на «нет». Связано это в первую очередь с прогрессом самого языка JavaScript современная версия которого (ES6) во всю используется повсеместно, а браузеры достаточно хорошо прогрессируют в его поддержке. Использование jQuery в этом контексте становится моветоном…
Готовность 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");