Конвертируем jQuery в JavaScript

Конвертер обладает расширенным списком правил конвертации jQuery в JavaScript, включая специфические плагины, нужно охватить как можно больше методов и конструкций jQuery, заменяя их на их нативные JavaScript-аналоги.
Загрузить файл Удалить код Скачать код Копировать код

Описание правил конвертирования

Каждый раздел посвящен определенной категории правил (например, "Селекторы", "Манипуляции с DOM", "События" и т.д.). Рекомендуем демонстрацию используемых правил и примеры кода.

Селекторы

jQuery JavaScript Описание 
$('selector')
 
document.querySelector('selector')
 Выбор одного элемента. 
$('selector').find('child')
 
document.querySelector('selector').querySelectorAll('child')
 Поиск дочерних элементов. 
$('selector').children()
 
document.querySelector('selector').children
 Получение дочерних элементов. 
$('selector').parent()
 
document.querySelector('selector').parentElement
 Получение родительского элемента. 
$('selector').parents()
 
document.querySelector('selector').parentElement
 Получение всех родительских элементов. 
$('selector').siblings()
 
Array.from(document.querySelector('selector').parentElement.children)
 .filter(el => el !== document.querySelector('selector'))
 Получение соседних элементов. 
$('selector').next()
 
document.querySelector('selector').nextElementSibling
 Получение следующего элемента. 
$('selector').prev()
 
document.querySelector('selector').previousElementSibling
 Получение предыдущего элемента. 
$('selector').closest('parent')
 
document.querySelector('selector').closest('parent')
 Поиск ближайшего родительского элемента.

Манипуляции с DOM

jQuery JavaScript Описание 
$('div').html('<p>Привет</p>')
 
document.querySelector('div').innerHTML = '<p>Привет</p>';
 Изменение HTML-содержимого. 
$('div').text('Привет')
 
document.querySelector('div').textContent = 'Привет';
 Изменение текстового содержимого. 
$('div').append('<p>Новый элемент</p>')
 
document.querySelector('div').insertAdjacentHTML('beforeend', '<p>Новый элемент</p>');
 Добавление содержимого в конец элемента. 
$('div').prepend('<p>Новый элемент</p>')
 
document.querySelector('div').insertAdjacentHTML('afterbegin', '<p>Новый элемент</p>');
 Добавление содержимого в начало элемента. 
$('div').before('<p>Новый элемент</p>')
 
document.querySelector('div').insertAdjacentHTML('beforebegin', '<p>Новый элемент</p>');
 Добавление содержимого перед элементом. 
$('div').after('<p>Новый элемент</p>')
 
document.querySelector('div').insertAdjacentHTML('afterend', '<p>Новый элемент</p>');
 Добавление содержимого после элемента. 
$('div').remove()
 
document.querySelector('div').remove();
 Удаление элемента. 
$('div').empty()
 
document.querySelector('div').innerHTML = '';
 Очистка содержимого элемента. 
$('div').clone()
 
document.querySelector('div').cloneNode(true);
 Клонирование элемента.

Атрибуты и классы

jQuery JavaScript Описание 
$('selector').attr('name', 'value')
 
document.querySelector('selector').setAttribute('name', 'value')
 Установка атрибута. 
$('selector').attr('name')
 
document.querySelector('selector').getAttribute('name')
 Получение значения атрибута. 
$('selector').removeAttr('name')
 
document.querySelector('selector').removeAttribute('name')
 Удаление атрибута. 
$('selector').addClass('class')
 
document.querySelector('selector').classList.add('class')
 Добавление класса. 
$('selector').removeClass('class')
 
document.querySelector('selector').classList.remove('class')
 Удаление класса. 
$('selector').toggleClass('class')
 
document.querySelector('selector').classList.toggle('class')
 Переключение класса. 
$('selector').hasClass('class')
 
document.querySelector('selector').classList.contains('class')
 Проверка наличия класса.

События

jQuery JavaScript Описание 
$('button').click(function() { ... })
 
document.querySelector('button').addEventListener('click', function() { ... });
 Обработка кликов. 
$('button').on('click', function() { ... })
 
document.querySelector('button').addEventListener('click', function() { ... });
 Универсальный обработчик событий. 
$('input').focus(function() { ... })
 
document.querySelector('input').addEventListener('focus', function() { ... });
 Обработка фокуса. 
$('input').blur(function() { ... })
 
document.querySelector('input').addEventListener('blur', function() { ... });
 Обработка потери фокуса. 
$('input').change(function() { ... })
 
document.querySelector('input').addEventListener('change', function() { ... });
 Обработка изменения значения. 
$('form').submit(function() { ... })
 
document.querySelector('form').addEventListener('submit', function() { ... });
 Обработка отправки формы. 
$('input').keydown(function() { ... })
 
document.querySelector('input').addEventListener('keydown', function() { ... });
 Обработка нажатия клавиши. 
$('input').keyup(function() { ... })
 
document.querySelector('input').addEventListener('keyup', function() { ... });
 Обработка отпускания клавиши. 
$('input').keypress(function() { ... })
 
document.querySelector('input').addEventListener('keypress', function() { ... });
 Обработка нажатия и удержания клавиши. 
$('div').mouseenter(function() { ... })
 
document.querySelector('div').addEventListener('mouseenter', function() { ... });
 Обработка наведения курсора. 
$('div').mouseleave(function() { ... })
 
document.querySelector('div').addEventListener('mouseleave', function() { ... });
 Обработка ухода курсора. 
$('div').mousedown(function() { ... })
 
document.querySelector('div').addEventListener('mousedown', function() { ... });
 Обработка нажатия кнопки мыши. 
$('div').mouseup(function() { ... })
 
document.querySelector('div').addEventListener('mouseup', function() { ... });
 Обработка отпускания кнопки мыши. 
$('div').mousemove(function() { ... })
 
document.querySelector('div').addEventListener('mousemove', function() { ... });
 Обработка движения курсора. 
$('div').scroll(function() { ... })
 
document.querySelector('div').addEventListener('scroll', function() { ... });
 Обработка прокрутки.

AJAX

jQuery JavaScript Описание 
$.get('url', function(data) { ... })
 
fetch('url').then(response => response.json()).then(data => { ... });
 GET-запрос. 
$.post('url', { data: 'value' }, function(response) { ... })
 
fetch('url', { method: 'POST', body: JSON.stringify({ data: 'value' }) })
 .then(response => response.json())
 .then(data => { ... });
 POST-запрос. 
$.ajax({ url: 'url', method: 'GET', success: function(data) { ... } })
 
fetch('url', { method: 'GET' })
 .then(response => response.json())
 .then(data => { ... });
 Универсальный AJAX-запрос.

Утилиты

jQuery JavaScript Описание 
$.each(array, function(index, value) { ... })
 
array.forEach((value, index) => { ... });
 Перебор элементов массива. 
$.extend({}, obj1, obj2)
 
Object.assign({}, obj1, obj2);
 Объединение объектов. 
$.trim(' string ')
 
' string '.trim();
 Удаление пробелов. 
$.isArray(array)
 
Array.isArray(array);
 Проверка, является ли объект массивом. 
$.inArray(value, array)
 
array.indexOf(value);
 Поиск элемента в массиве.