jQuery to JS - Переход к нативному JavaScript
Переходим от библиотеки jQuery на чистый JavaScript. В статье вы найдёте следующие JavaScript методы: выбор элементов, перемещение по DOM-дереву, работа с атрибутами, событиями, классами; создание и удаление элементов, а также многое другое. Воспользуйтесь поиском ниже.
Выбор элементов
jQuery
$(el);
JavaScript
document.querySelector(el);
document.querySelectorAll(el);
jQuery
Выбор элемента по id$('#id');
JavaScript
Выбор элемента по iddocument.getElementById('id');
Поиск элемента
jQuery
$(el).find(selector);
JavaScript
el.querySelectorAll(selector);
Цикл по каждому элементу - Each
jQuery
$(selector).each(function(index, el) {
// code
});
JavaScript
var elements = document.querySelectorAll(el);
elements.forEach(function(el, index) {
// code
});
События
Событие загрузки DOM-дерева
jQuery
jQuery(function($) {
// code
});
JavaScript
document.addEventListener('DOMContentLoaded', () => {
// code
});
Событие «Изменение ширины/высоты экрана»
jQuery
$(window).resize(function () {
// code
});
JavaScript
window.addEventListener('resize', () => {
// code
});
Событие "on" (click, hover и т.п.)
jQuery
$(el).on('eventName', () => {
// code
});
JavaScript
el.addEventListener('eventName', () => {
// code
});
Перемещение по DOM
Предыдущий элемент
jQuery
$(el).prev();
JavaScript
el.previousElementSibling
Следующий элемент
jQuery
$(el).next();
JavaScript
el.nextElementSibling
Родительский элемент
jQuery
$(el).parent();
JavaScript
el.parentElement
// или
el.parentNode
Дочерний элемент (дети)
jQuery
Получить все дочерние элементы$(el).children();
JavaScript
Получить все дочерние элементыel.children
el.firstElementChild
// или
el.children[0]
el.lastElementChild
Работа с классами
Добавление класса
jQuery
$(el).addClass('className');
JavaScript
el.classList.add('className');
Изменение класса
jQuery
$(el).attr('class', 'className');
JavaScript
el.classList.replace('className');
Удаление класса
jQuery
$(el).removeClass('className');
JavaScript
el.classList.remove('className');
Удаление всех классов
jQuery
$(el).removeClass();
JavaScript
el.removeAttribute('class');
Добавление-удаление
jQuery
$(el).toggleClass('className');
JavaScript
el.classList.toggle('className');
Наличие класса
jQuery
$(el).hasClass('className');
JavaScript
el.classList.contains('className');
Получение класса
jQuery
$(el).attr('class');
JavaScript
el.getAttribute('class');
Работа с атрибутами
Получение атрибута
jQuery
$(el).attr('value');
JavaScript
el.getAttribute('value');
Добавление атрибута
jQuery
$(el).attr('style', 'color: #043641');
JavaScript
el.setAttribute('style', 'color: #043641');
Удаление атрибута
jQuery
$(el).removeAttr('style');
JavaScript
el.removeAttribute('style');
Выполнение функции при скролле
jQuery
$(window).scroll(function(){
// code
}
JavaScript
window.onscroll = () => {
// code
}
Ширина элемента
jQuery
$(el).width();
JavaScript
el.scrollWidth;
Ширина с padding, но без border
jQuery
$(el).innerWidth();
JavaScript
el.clientWidth;
Ширина с padding + border
jQuery
$(el).outerWidth();
JavaScript
el.offsetWidth;
Высота элемента
jQuery
$(el).height();
JavaScript
el.scrollHeight;
Высота с padding, но без border
jQuery
$(el).innerHeight();
JavaScript
el.clientHeight;
Высота с padding + border
jQuery
$(el).outerHeight();
JavaScript
el.offsetHeight;
Создание элементов
jQuery
$('<div/>');
JavaScript
document.createElement('tag');
Добавление элементов (узлов или строк)
Добавление до элемента (рядом)
jQuery
$(el).before(text);
JavaScript
el.before(node или строка);
Добавление после элемента (рядом)
jQuery
$(el).after(text);
JavaScript
el.after(node или строка);
Добавление внутри элемента (в начало)
jQuery
$(parentEl).prepend(el);
JavaScript
el.prepend(node или строка);
Добавление внутри элемента (в конец)
jQuery
$(parentEl).append(el);
JavaScript
el.append(node или строка);
Добавление элементов (HTML)
Добавление до элемента (рядом)
jQuery
$(el).before(html);
JavaScript
el.insertAdjacentHTML('beforebegin', html);
Добавление после элемента (рядом)
jQuery
$(el).after(html);
JavaScript
el.insertAdjacentHTML('afterend', html);
Добавление до элемента (внутри него)
jQuery
$(parentEl).prepend(el);
JavaScript
el.insertAdjacentHTML('afterbegin', html);
Добавление после элемента (внутри него)
jQuery
$(parentEl).append(el);
JavaScript
el.insertAdjacentHTML('beforeend', html);
Копирование (клонирование)
jQuery
$(el).clone();
JavaScript
el.cloneNode(true);
Замена элементов
jQuery
$(el).replaceWith(newHTML);
JavaScript
el.outerHTML = 'newHTML';
Замена тега с сохранением содержимого
Создание обёртки
jQuery
$(el).wrap('<div class="elWrapper"></div>');
JavaScript
tag = document.querySelector(el).innerHTML;
newTag = '<span id="">' + tag + '</span>';
document.querySelector(el).outerHTML = newTag;
Удаление обёртки
jQuery
$(el).unwrap();
JavaScript
wrapperEl = document.querySelector(el);
while (wrapperEl.firstChild) {
wrapperEl.before(wrapperEl.firstChild);
}
wrapperEl.remove();
Удаление элементов
jQuery
$(el).remove();
JavaScript
el.remove();
Текст
Получение текста
jQuery
$(el).text();
JavaScript
el.textContent
Изменение текста
jQuery
$(el).text('newText');
JavaScript
el.textContent = 'newText';
Изменение текста у элемента без тега
jQuery
Изменить текст у 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);
JavaScript
parentEl.childNodes[3].textContent = 'newText';
HTML
Получение HTML
jQuery
$(el).html();
JavaScript
el.innerHTML
Изменение HTML
jQuery
$(el).html('newHTML');
JavaScript
el.innerHTML = 'newHTML';
CSS
Получение CSS
jQuery
$(el).css('propertyName');
JavaScript
el.getComputedStyle(el)['propertyName']
Изменение CSS
jQuery
$(el).css('font-size', '17px');
JavaScript
el.style.fontSize = '17px';
Value
Получение value
jQuery
$(el).val();
JavaScript
el.value
Изменение value
jQuery
$(el).val('newValue');
JavaScript
el.value = 'newValue';
Форма
Сброс (обнуление) полей формы
jQuery
$('form').trigger('reset');
JavaScript
form.reset();
Эффекты
Hide
jQuery
$(el).hide();
JavaScript
el.style.display = 'none';
Show
jQuery
$(el).show();
JavaScript
el.style.display = '';
FadeIn
jQuery
$(el).fadeIn();
JavaScript
// 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
jQuery
$(el).fadeOut();
JavaScript
// 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
jQuery
$(el).fadeToggle();
JavaScript
el.classList.toggle('showEl');
el {
visibility: hidden;
opacity: 0;
transition: .25s visibility, .25s opacity;
}
.showEl {
visibility: visible;
opacity: 1;
}
AJAX
JSON
jQuery
$.getJSON('/path', function(data) {
// code
});
JavaScript
var request = new XMLHttpRequest();
request.open('GET', '/path', true);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
// при успешном подключении
var data = JSON.parse(this.response);
} else {
// подключились к серверу, но он вернул ошибку
}
};
request.onerror = function() {
// ошибка подключения
};
request.send();
GET
jQuery
$.ajax({
type: 'GET',
url: '/path',
success: function(resp) {
},
error: function() {
}
});
JavaScript
var request = new XMLHttpRequest();
request.open('GET', '/path', true);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
// при успешном подключении
var resp = this.response;
} else {
// подключились к серверу, но он вернул ошибку
}
};
request.onerror = function() {
// ошибка подключения
};
request.send();
POST
jQuery
$.ajax({
type: 'POST',
url: 'path/',
data: data
});
JavaScript
var request = new XMLHttpRequest();
request.open('POST', '/path', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
Альтернативный вариант: метод fetch
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии
- Комментариев пока нет.