jQuery to JS — Переход к нативному JavaScript

Переходим от библиотеки jQuery на чистый JavaScript. В статье вы найдёте следующие JavaScript методы: выбор элементов, перемещение по DOM-дереву, работа с атрибутами, событиями, классами; создание и удаление элементов, а также многое другое. Воспользуйтесь поиском ниже.

  1. Выбор элементов
  2. Поиск
  3. Цикл по каждому элементу
  4. События
  5. Перемещение по DOM
  6. Работа с классами
  7. Работа с атрибутами
  8. Ширина элемента
  9. Высота
  10. Создание тега
  11. Добавление узлов или строк
  12. Добавление HTML
  13. Копирование (клонирование)
  14. Замена
  15. Удаление элементов
  16. Работа с текстом
  17. Работа с HTML
  18. CSS
  19. Value
  20. Форма
  21. AJAX
  22. Эффекты

В левой колонке jQuery, а в правой будет ванильный JavaScript.

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

Выбо одного или нескольких элементов:

$(el);

Выбор одного элемента:

document.querySelector(el);

Выбор сразу нескольких:

document.querySelectorAll(el);

Пример. Выбор элемента по id:

$("#id");

Пример. Выбор элемента по id:

document.getElementById("id");

Поиск элемента

$(el).find(selector);
el.querySelectorAll(selector);

Цикл по каждому элементу - Each

$(selector).each(function (index, el) {
    // code
});
let elements = document.querySelectorAll(el);
elements.forEach(function (el, index) {
    // code
});

События

Событие загрузки DOM-дерева

jQuery(($) => {
    // code
});
document.addEventListener("DOMContentLoaded", () => {
    // code
});

Событие «Изменение ширины/высоты экрана»

$(window).resize(() => {
    // code
});
window.addEventListener("resize", () => {
    // code
});

Событие "on" (click, hover и т.п.)

$(el).on("eventName", () => {
    // code
});
el.addEventListener("eventName", () => {
    // code
});

Выполнение функции при скролле

$(window).scroll(() => {
    // code
}
el.addEventListener("scroll", () => {
    // code
});

Перемещение по DOM

Предыдущий элемент

$(el).prev();
el.previousElementSibling

Следующий элемент

$(el).next();
el.nextElementSibling

Родительский элемент

$(el).parent();
el.parentElement
// или
el.parentNode

Дочерний элемент (дети)

Получить все дочерние элементы

$(el).children();
el.children

Первый дочерний элемент

el.firstElementChild
// или
el.children[0]

Последний дочерний элемент

el.lastElementChild

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

Добавление класса

$(el).addClass("className");
el.classList.add("className");

Изменение (замена) класса

$(el).attr("class", "className");
el.classList.replace("className");

Удаление класса

$(el).removeClass("className");
el.classList.remove("className");

Удаление всех классов

$(el).removeClass();
el.removeAttribute("class");

Добавление-удаление класса

Есть класс есть - удалить, если нет - добавить.

$(el).toggleClass("className");
el.classList.toggle("className");

Наличие класса

$(el).hasClass("className");
el.classList.contains("className");

Получение класса

$(el).attr("class");
el.getAttribute("class");

Работа с атрибутами

Получение атрибута

$(el).attr("value");
el.getAttribute("value");

Добавление атрибута

$(el).attr("style", "color: #043641");
el.setAttribute("style", "color: #043641");

Удаление атрибута

$(el).removeAttr("style");
el.removeAttribute("style");

Ширина элемента

$(el).width();
el.scrollWidth;

Ширина с padding, но без border

$(el).innerWidth();
el.clientWidth;

Ширина с padding + border

$(el).outerWidth();
el.offsetWidth;

Высота элемента

$(el).height();
el.scrollHeight;

Высота с padding, но без border

$(el).innerHeight();
el.clientHeight;

Высота с padding + border

$(el).outerHeight();
el.offsetHeight;

Создание элементов

$("<div/>");
document.createElement("tag");

Добавление элементов (узлов или строк)

Добавление элементов (узлов или строк) JavaScript

Добавление до элемента (рядом)

$(el).before(text);
el.before(node или строка);

Добавление после элемента (рядом)

$(parentEl).prepend(el);
el.prepend(node или строка);

Добавление внутри элемента (в начало)

$(parentEl).prepend(el);
el.prepend(node или строка);

Добавление внутри элемента (в конец)

$(parentEl).append(el);
el.append(node или строка);

Добавление элементов (HTML)

Добавление элементов (узлов или строк) JavaScript

Добавление до элемента (рядом)

$(el).before(html);
el.insertAdjacentHTML("beforebegin", html);

Добавление после элемента (рядом)

$(el).after(html);
el.insertAdjacentHTML("afterend", html);

Добавление до элемента (внутри него)

$(parentEl).prepend(el);
el.insertAdjacentHTML("afterbegin", html);

Добавление после элемента (внутри него)

$(parentEl).append(el);
el.insertAdjacentHTML("beforeend", html);

Копирование (клонирование)

$(el).clone();
el.cloneNode(true);

Замена элементов

$(el).replaceWith(newHTML);
el.outerHTML = "newHTML";

Замена тега с сохранением содержимого

Создание обёртки

$(el).wrap('<div class="elWrapper"></div>');
const tag = document.querySelector(el).innerHTML;
const newTag = "<span>" + tag + "</span>";
document.querySelector(el).outerHTML = newTag;

Удаление обёртки

$(el).unwrap();
let wrapperEl = document.querySelector(el);

while (wrapperEl.firstChild) {
    wrapperEl.before(wrapperEl.firstChild);
}
wrapperEl.remove();

Удаление элементов

$(el).remove();
el.remove();

Работа с текстом

Получение текста

$(el).text();
el.textContent

Изменение текста

$(el).text("newText");
el.textContent = "newText";

Изменение текста у элемента без тега

Изменить текст у 1-го элемента

jQuery.fn.textNodes = function () {
    return this.contents().filter(function () {
        return (
            this.nodeType === Node.TEXT_NODE &&
            this.nodeValue.trim() !== ""
        );
    });
}

$(parentEl).textNodes().first().replaceWith(newText);

Изменить текст у всех таких элементов

jQuery.fn.textNodes = function () {
    return this.contents().filter(function () {
        return (
            this.nodeType === Node.TEXT_NODE &&
            this.nodeValue.trim() !== ""
        );
    });
}

$(parentEl).textNodes().replaceWith(newText);

childNodes[{ номер_DOM_узла }]

childNodes[{номер_DOM_узла}]

parentEl.childNodes[3].textContent = "newText";

HTML

Получение HTML

$(el).html();
el.innerHTML

Изменение HTML

$(el).html("newHTML");
el.innerHTML = "newHTML";

CSS

Получение CSS

$(el).css("propertyName");
el.getComputedStyle(el)["propertyName"]

Изменение CSS

$(el).css("font-size", "17px");
el.style.fontSize = "17px";

Value

Получение value

$(el).val();
el.value

Изменение value

$(el).val("newValue");
el.value = "newValue";

Форма

Сброс (обнуление) полей формы

$("form").trigger("reset");
form.reset();

AJAX

GET

$.ajax({
    type: "GET",
    url: "/path",
    success: function (response) {

    },
    error: function () {

    }
});
let request = new XMLHttpRequest();
request.open("GET", "/path", true);

request.onload = function () {
    if (this.status >= 200 && this.status < 400) {
        // при успешном подключении
        let response = this.response;
    } else { }
};

request.onerror = function () {
    // ошибка подключения
};

request.send();

JSON

$.getJSON("/path", function(data) {
    // code
});
let request = new XMLHttpRequest();
request.open("GET", "/path", true);

request.onload = function () {
    if (this.status >= 200 && this.status < 400) {
        // при успешном подключении
        let data = JSON.parse(this.response);
    } else {
        // подключились к серверу, но он вернул ошибку
    }
};

request.onerror = function () {
    // ошибка подключения
};

request.send();

POST

$.ajax({
    type: "POST",
    url: "path/",
    data: data
});
let request = new XMLHttpRequest();
request.open("POST", "/path", true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
request.send(data);

Альтернативный вариант: метод fetch.

Эффекты

Hide

$(el).hide();
el.style.display = "none";

Show

$(el).show();
el.style.display = "block";

FadeIn

$(el).fadeIn();
// fadeIn function
function fadeIn(el, display) {
    el.style.opacity = 0;
    el.style.display = display || "block";
    (function fade() {
        var val = parseFloat(el.style.opacity);
        if (!((val += .1) > 1)) {
            el.style.opacity = val;
            requestAnimationFrame(fade);
        }
    })();
}

Пример:

fadeIn(document.querySelector(".hiddenEl"), "flex");

FadeOut

$(el).fadeOut();
// fadeOut function
function fadeOut(el) {
    el.style.opacity = 1;
    (function fade() {
        if ((el.style.opacity -= .1) < 0) {
            el.style.display = "none";
        } else {
            requestAnimationFrame(fade);
        }
    })();
};

FadeToggle

$(el).fadeToggle();
el.classList.toggle("showEl");
el {
    visibility: hidden;
    opacity: 0;
    transition: .25s visibility, .25s opacity;
}

.showEl {
    visibility: visible;
    opacity: 1;
}
Микроразметка сайта Клик вне элемента (блока)