jQuery — это JavaScript-библиотека для работы со страницей в браузере: она находит элементы по CSS-селекторам, меняет DOM, подключает обработчики событий и отправляет AJAX-запросы через короткий единый API. Библиотеку выпустил Джон Резиг в 2006 году, сейчас ее развивает OpenJS Foundation, лицензия MIT. Актуальная ветка на сентябрь 2026 — jQuery 4.x (4.0.0 вышла в январе 2026).
Содержание
- Мини-словарь: что с чем не путать
- Зачем jQuery появилась и почему ее статус изменился
- Как подключить
- Полный пример: список задач
- Разбор по строкам: четыре опоры jQuery
- Типовые ошибки: неверно -> результат -> как исправить
- AJAX в jQuery и отличие от fetch
- Нативные аналоги: таблица замен
- Когда jQuery уместна, а когда нет
- Выводы
- Где применяется / связь с практикой
- FAQ
Ниже — полный пример с разбором, типовые ошибки, AJAX и таблица замен на нативный JavaScript. Анимации оставляем за рамками.
Мини-словарь: что с чем не путать
- DOM — дерево объектов, в которое браузер превращает HTML. jQuery не заменяет DOM, а работает поверх него.
- jQuery-объект (
$("li")) — обертка над набором найденных DOM-элементов. Даже если найден один элемент, это набор, а не сам элемент. - DOM-элемент — то, что возвращает
document.querySelector(). Его методы (classList,textContent) у jQuery-объекта отсутствуют, и наоборот. - jQuery UI — отдельная библиотека виджетов поверх jQuery (календарь, диалоги, перетаскивание). jQuery Mobile — бывший мобильный фреймворк проекта, официально прекращенный; для новых проектов не подходит.
Зачем jQuery появилась и почему ее статус изменился
В конце 2000-х браузеры по-разному реализовывали события, выборку элементов и XMLHttpRequest. jQuery спрятала эти различия за функцией $() и цепочками методов: «найди элементы -> сделай с ними что-то».
С тех пор стандарт догнал библиотеку. В современных браузерах есть querySelectorAll, classList, closest, addEventListener, fetch. Поэтому в 2026 году jQuery — это legacy-технология: она живая и поддерживается, но для новых проектов ее обычно не выбирают.
При этом библиотека остается на большой доле действующих сайтов. Главные причины — WordPress (jQuery входит в его поставку, от нее зависят многие темы и плагины), старые админки и корпоративные системы, плагины, написанные под jQuery. Bootstrap начиная с 5-й версии от jQuery не зависит.
Как подключить
Два рабочих способа:
npm install jqueryПосле установки файл лежит в node_modules/jquery/dist/jquery.min.js: его можно скопировать в статику проекта или импортировать через сборщик. Второй вариант — подключить файл с официального CDN проекта по адресу, указанному на странице загрузки jQuery. Сборка jquery.slim.min.js легче, но в ней нет AJAX и эффектов.
Полный пример: список задач
Сначала целиком рабочая страница. Сохраните ее рядом с файлом jquery.min.js и откройте в браузере.
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Задачи на jQuery</title>
<style>.done { text-decoration: line-through; color: gray; }</style>
</head>
<body>
<input id="title" placeholder="Новая задача">
<button id="add">Добавить</button>
<ul id="tasks">
<li>Прочитать про DOM</li>
</ul>
<p>Осталось: <span id="left">1</span></p>
<script src="jquery.min.js"></script>
<script>
$(function () {
function updateCounter() {
$("#left").text($("#tasks li:not(.done)").length);
}
$("#add").on("click", function () {
const title = $("#title").val().trim();
if (!title) return;
$("<li>").text(title).appendTo("#tasks");
$("#title").val("");
updateCounter();
});
$("#tasks").on("click", "li", function () {
$(this).toggleClass("done");
updateCounter();
});
});
</script>
</body>
</html>Что увидите: после ввода «Новая задача» и нажатия кнопки в списке появится второй пункт, счетчик станет 2. Клик по пункту зачеркнет его, счетчик уменьшится. Повторный клик снимет зачеркивание.
Разбор по строкам: четыре опоры jQuery
Готовность DOM. $(function () { ... }) запускает код, когда DOM построен. Нативный аналог — событие DOMContentLoaded или атрибут defer у тега script.
Селекторы. $("#tasks li:not(.done)") принимает обычный CSS-селектор и возвращает набор. .length — число найденных элементов, на этом построен счетчик.
Манипуляции DOM. $("<li>") создает элемент, .text(title) задает текст, .appendTo("#tasks") вставляет в список. .val() читает и пишет значение поля ввода. Методы возвращают тот же набор, поэтому их можно выстраивать цепочкой.
События. .on("click", fn) вешает обработчик. Форма .on("click", "li", fn) — делегирование: обработчик стоит на ul, а срабатывает для любого li внутри, в том числе добавленного позже. Внутри обработчика this — DOM-элемент, $(this) оборачивает его обратно в jQuery-объект.
Типовые ошибки: неверно -> результат -> как исправить
Ошибка 1. Обработчик на элементах вместо делегирования.
$("#tasks li").on("click", function () {
$(this).toggleClass("done");
updateCounter();
});Результат (проверено прогоном): первый пункт зачеркивается, а добавленные кнопкой — нет. Селектор выполнился один раз при загрузке и нашел только существующий li. Исправление — вариант из полного примера: $("#tasks").on("click", "li", ...).
Ошибка 2. Пользовательский ввод через .html().
$("<li>").html(title).appendTo("#tasks");Результат: ввод <img src=x onerror=alert(1)> превращается в настоящий тег img с обработчиком, то есть в XSS. С .text(title) та же строка выводится как текст: <img src=x onerror=alert(1)>. Правило: данные от пользователя и с сервера вставлять через .text(), а .html() — только для своей проверенной разметки. У нативного innerHTML риск тот же.
Ошибка 3. Ожидание, что опечатка в селекторе даст ошибку.
const $missing = $("#mesage").addClass("active");
console.log("jQuery, найдено:", $missing.length);
document.querySelector("#mesage").classList.add("active");Результат:
jQuery, найдено: 0
TypeError: Cannot read properties of null (reading 'classList')
jQuery молча работает с пустым набором, нативный код падает. Тихое поведение удобно, но прячет опечатки: при отладке проверяйте .length. Текст TypeError приведен для движка V8 (Chrome, Node.js), в других браузерах формулировка другая.
AJAX в jQuery и отличие от fetch
$.getJSON("/api/tasks.json")
.done(function (tasks) {
tasks.forEach(function (t) {
$("<li>").text(t.title).appendTo("#tasks");
});
console.log("jQuery: загружено задач -", tasks.length);
})
.fail(function (jqXHR) {
console.log("jQuery: ошибка", jqXHR.status);
});Для адреса, который отдает JSON из двух задач, в консоли будет jQuery: загружено задач - 2. Для несуществующего адреса сработает .fail, и выведется jQuery: ошибка 404: jQuery считает HTTP-ошибку неудачей запроса.
У fetch логика другая, и это частая ловушка при переписывании:
async function loadTasks(url) {
const response = await fetch(url);
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
return response.json();
}
loadTasks("/api/tasks.json")
.then((tasks) => console.log("fetch: загружено задач -", tasks.length))
.catch((err) => console.log("fetch: ошибка", err.message));
loadTasks("/api/nope.json")
.then(() => console.log("fetch: успех?"))
.catch((err) => console.log("fetch: ошибка", err.message));
fetch("/api/nope.json")
.then((r) => console.log("fetch без проверки ok: then, status", r.status));fetch отклоняет промис только при сетевом сбое. Ответ 404 без проверки response.ok попадет в then. Поэтому проверка статуса обязательна:
fetch: загружено задач - 2
fetch: ошибка HTTP 404
fetch без проверки ok: then, status 404
Нативные аналоги: таблица замен
Тот же список задач на чистом JavaScript дает идентичный результат (проверено тем же сценарием кликов):
| Задача | jQuery | Нативный JavaScript |
|---|---|---|
| Найти все элементы | $(".item") |
document.querySelectorAll(".item") |
| Найти один элемент | $("#id") (пустой набор, если нет) |
document.querySelector("#id") (null, если нет) |
| Текст | .text("...") |
el.textContent = "..." |
| Разметка | .html(s) |
el.innerHTML = s (тот же риск XSS) |
| Классы | .addClass(), .toggleClass() |
el.classList.add(), .toggle() |
| Атрибуты | .attr("href") |
el.getAttribute("href") |
| data-атрибуты | .data("id") — приводит типы и кеширует |
el.dataset.id — всегда строка |
| Событие | .on("click", fn) |
el.addEventListener("click", fn) |
| Делегирование | .on("click", "li", fn) |
обработчик на родителе + event.target.closest("li") |
| DOM готов | $(fn) |
DOMContentLoaded или defer |
| Запрос к серверу | $.getJSON(), $.ajax() |
fetch() + проверка response.ok |
Нюанс с data-атрибутами проверен: для data-id="42" jQuery вернет число, dataset — строку. А .data("id", 7) не меняет сам атрибут, значение остается в кеше jQuery. При миграции это частый источник расхождений.
Когда jQuery уместна, а когда нет
| Ситуация | Что взять | Почему |
|---|---|---|
| Поддержка сайта, где jQuery уже есть (WordPress-тема, старая админка) | jQuery | переписывание не окупается, плагины на нее завязаны |
| Новая небольшая страница, пара обработчиков | нативный JavaScript | лишняя зависимость не нужна, API браузера хватает |
| Интерфейс со сложным состоянием | React, Vue, Svelte и подобные | jQuery не управляет состоянием, только DOM |
| Обновление старого кода | jQuery 4.x или 3.7.x + постепенная замена | в 4.0 удалены устаревшие функции |
При обновлении на 4.0 учитывайте: удалены давно помеченные устаревшими функции вроде $.trim, $.isArray, $.parseJSON, $.type, $.now (проверено: в 4.0.0 они undefined). Замены — str.trim(), Array.isArray(), JSON.parse(). Также прекращена поддержка старых версий Internet Explorer. Переходный плагин jQuery Migrate помогает найти в коде вызовы удаленного API.
И отдельно про безопасность: старые версии jQuery содержат известные уязвимости в обработке HTML. Если на сайте стоит древняя версия, обновление — задача безопасности, а не только стиля кода.
Выводы
- jQuery — библиотека поверх DOM: селекторы, манипуляции, события и AJAX через единый API
$(); актуальная ветка — 4.x. - В 2026 году это legacy: новые проекты обычно пишут на нативном JavaScript или фреймворках, но jQuery остается в WordPress и старом коде.
- Главные практические приемы — делегирование событий (
.on(событие, селектор, fn)) и вставка данных через.text(), а не.html(). - При переходе на
fetchпроверяйтеresponse.ok: в отличие от$.ajax, HTTP 404 не считается ошибкой. - Почти каждая функция jQuery имеет нативный аналог, но поведение отличается в деталях (
nullvs пустой набор, типы в.data()).
Где применяется / связь с практикой
Освойте тему на практике
jQuery чаще всего встречается при поддержке действующих сайтов: правка темы WordPress, доработка старой админки, перенос кода на нативный JavaScript. Чтобы уверенно делать такие задачи, нужна база самого языка — DOM, события, асинхронность и промисы, на которых строятся и jQuery, и современные фреймворки. Ее системно дает курс JavaScript Developer. Basic.
Освойте тему на практике
Посмотреть формат обучения и разобрать отдельные темы фронтенда можно на бесплатных открытых уроках Otus.
FAQ
Можно ли использовать jQuery вместе с React или Vue?
Технически да, но это конфликт подходов: фреймворк сам управляет DOM, и прямые правки через jQuery он может перезаписать. Обычно jQuery оставляют только для изолированного старого плагина.
Стоит ли учить jQuery новичку в 2026 году?
Отдельно с нуля — нет, лучше сначала освоить нативный DOM API. Синтаксис jQuery читается за вечер, если придется поддерживать старый код.
Работает ли jQuery на сервере в Node.js?
Сама по себе нет: ей нужен объект window с документом. В Node.js ее запускают вместе с эмулятором DOM (например, jsdom), в основном для тестов.
