Как обойтись без jQuery — Блог о языках, путешествиях и программировании

JQuery вездесущ. Но зачем он всё-таки нужен? Если вы пользуетесь только тем, о чём пойдёт речь дальше, то считайте, что jQuery вам не нужен. Достаточно обычного JavaScript.

1. Селекторы

Можно использовать функции querySelector (возвращает первый элемент из соответствующих критериям) и querySelectorAll (возвращает NodeList из всех элементов, удовлетворяющих критериям). Они покрывают почти все нужды.

2. Обработчики событий

Обработку событий сейчас легко делать с помощью addEventListener. Например, так:

btn.addEventListener("click", function () {

//Ваш код здесь

}

btn.addEventListener("click", function () { //Ваш код здесь }

btn.addEventListener("click", function () {
   //Ваш код здесь
}

3. Управление классами и атрибутами

Классы можно присваивать/удалять при помощи свойства classList.

Аттрибуты можно присваивать с помощью setAttribute().

4. Вставка и удаление элементов страницы

Это делать не так удобно, как на jQuery, но всё же возможно при помощи функций createElement (создать не привязанный к DOM новый элемент. До поры он будет «висеть в воздухе»), appendChild (добавить дочерний элемент, который может быть создан, например, предыдущей функцией), insertBefore(втсавить элемент перед тем, на котором вызывается функция) и т.п. Удалять элемент из дерева DOM можно функцией removeChild.

5. Получить содержимое элемента или поменять его

Это делается с помощью свойств элемента textContent (берем только текст) и innerHTML (берем полностью HTML внутри элемента).

6. Обработка массивов

Пройти по всем элементам массива можно сс помощью forEach или функции map

var numbers = [1, 4, 9];

var roots = numbers.map(Math.sqrt);

// теперь roots равен [1, 2, 3], а numbers всё ещё равен [1, 4, 9]

var numbers = [1, 4, 9]; var roots = numbers.map(Math.sqrt); // теперь roots равен [1, 2, 3], а numbers всё ещё равен [1, 4, 9]

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// теперь roots равен [1, 2, 3], а numbers всё ещё равен [1, 4, 9]

7. Осуществить действия по готовности страницы (document ready)

Это делается так:

document.addEventListener('DOMContentLoaded', function () {

// код, который надо выполнить

});

document.addEventListener('DOMContentLoaded', function () { // код, который надо выполнить });

document.addEventListener('DOMContentLoaded', function () {
    // код, который надо выполнить
});

Выводы

Все упомянутые вещи легко делать с помощью нативного JavaScript. За рамками рассмотрения остались некоторые другие часто нужные задачи, такие как навигация по DOM, но она тоже реализуется с помощью JavaScript достаточно легко, хотя и не так красиво, как в jQuery. Вместо AJAX-вызова jQuery можно использовать объекты XMLHttpRequest и его методы, либо какую-нибудь небольшую библиотеку, специально для этого предназначенную. Возможно, если ваш сайт нагружен визуальными эффектами вроде анимации, то отказываться от jQuery и рано, хотя если дело только в этом, то имеется много маленьких, быстрых специализированных библиотек для этих задач.