jQuery to JS — Переход к нативному JavaScript
Переходим от библиотеки jQuery на чистый JavaScript. В статье вы найдёте следующие JavaScript методы: выбор элементов, перемещение по DOM-дереву, работа с атрибутами, событиями, классами; создание и удаление элементов, а также многое другое. Воспользуйтесь поиском ниже.
- Выбор элементов
- Поиск
- Цикл по каждому элементу
- События
- Перемещение по DOM
- Работа с классами
- Работа с атрибутами
- Ширина элемента
- Высота
- Создание тега
- Добавление узлов или строк
- Добавление HTML
- Копирование (клонирование)
- Замена
- Удаление элементов
- Работа с текстом
- Работа с HTML
- CSS
- Value
- Форма
- AJAX
- Эффекты
В левой колонке 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");
Добавление элементов (узлов или строк)

Добавление до элемента (рядом)
$(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)

Добавление до элемента (рядом)
$(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;
}
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии (4)
- Евгения
- Only to top
- Александр
- Иван