Переход на чистый JavaScript
Всё, что делает jQuery, сегодня умеет сам браузер. Отказ от библиотеки уменьшает размер страницы примерно на 30 КБ в сжатом виде и убирает лишнюю зависимость. Переписывать проект целиком не обязательно: код переводят постепенно, по одному файлу.
Таблица соответствий
| jQuery | Чистый JavaScript |
|---|---|
$(function () {}) | document.addEventListener('DOMContentLoaded', fn) |
$('#tasks') | document.querySelector('#tasks') |
$('li') | document.querySelectorAll('li') |
$el.find('li') | el.querySelectorAll('li') |
$el.closest('li') | el.closest('li') |
$el.parent() | el.parentElement |
$el.text() | el.textContent |
$el.html() | el.innerHTML |
$el.attr('href') | el.getAttribute('href') |
$el.prop('checked') | el.checked |
$el.data('id') | el.dataset.id (строка) |
$el.addClass('done') | el.classList.add('done') |
$el.toggleClass('done') | el.classList.toggle('done') |
$el.css('color', 'red') | el.style.color = 'red' |
$('<li>') | document.createElement('li') |
$list.append($item) | list.append(item) |
$el.remove() | el.remove() |
$el.on('click', fn) | el.addEventListener('click', fn) |
$list.on('click', 'li', fn) | обработчик на list и проверка event.target.closest('li') |
$input.val() | input.value |
$form.serialize() | new URLSearchParams(new FormData(form)).toString() |
$('li').each(fn) | document.querySelectorAll('li').forEach(fn) |
$.getJSON(url) | fetch(url).then((r) => r.json()) |
$el.fadeOut() | CSS transition или el.animate() |
$.extend({}, a, b) | { ...a, ...b } |
$.Deferred() | new Promise() |
Список дел без jQuery
Тот же список дел, что в уроке о делегировании, но без библиотеки:
<style>
.done { text-decoration: line-through; color: gray; }
</style>
<input id="title" placeholder="Новая задача">
<button id="add">Добавить</button>
<ul id="tasks"></ul>
<script>
const list = document.querySelector('#tasks');
const input = document.querySelector('#title');
document.querySelector('#add').addEventListener('click', () => {
const item = document.createElement('li');
const title = document.createElement('span');
title.className = 'title';
title.textContent = input.value;
const button = document.createElement('button');
button.className = 'delete';
button.textContent = 'Удалить';
item.append(title, ' ', button);
list.append(item);
});
list.addEventListener('click', (event) => {
if (event.target.closest('.delete')) {
event.target.closest('li').remove();
} else if (event.target.closest('.title')) {
event.target.closest('.title').classList.toggle('done');
}
});
</script>Поведение то же: задачи добавляются, отмечаются щелчком и удаляются кнопкой. Кода немного больше, но он не зависит от библиотеки.
Порядок перехода
- Новый код пишите без jQuery.
- Переводите старые файлы по одному, проверяя страницу после каждого.
- Найдите в проекте оставшиеся вызовы
$(иjQuery(. Когда их не останется, уберите тег<script>с jQuery. - Плагины на jQuery (слайдеры, маски) замените современными библиотеками без зависимостей — пока они есть, jQuery удалять нельзя.
Если же нужно не убрать jQuery, а обновить её до новой версии, помогает официальный плагин jQuery Migrate: он выводит в консоль предупреждения об устаревших вызовах.
Частая ошибка
Переносить привычку работать с набором целиком: document.querySelectorAll('li').classList.add('done'). У списка из querySelectorAll() нет classList, будет ошибка. Без jQuery каждый элемент обрабатывают в цикле: document.querySelectorAll('li').forEach((li) => li.classList.add('done')). И помните: querySelector() возвращает null, если элемент не найден, а пустой набор jQuery молча ничего не делал.