jQuery — обзор библиотеки

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Архитектору

jQuery

jQuery — компактная JavaScript-библиотека с открытым исходным кодом (лицензия MIT), которая упрощает выбор элементов в DOM, обработку событий, анимацию и AJAX-запросы. Создана Джоном Резигом (John Resig); публично представлена на конференции BarCamp NYC в январе 2006 года, первый стабильный релиз 1.0 — 26 августа 2006.

См. также: Справочник по jQuery · Работа с HTML (нативный DOM) · События · Асинхронность и fetch · React · SPA и выбор фреймворка

Официальная документация

jquery.com — сайт, загрузка, getting started · api.jquery.com — справочник методов · GitHub — исходники и релизы · шпаргалка по API — overapi.com/jquery

Маршрут по разделу

№	Тема	Статья
1	Обзор (вы здесь)	jQuery — обзор библиотеки
—	Справочник API	Справочник по jQuery
—	Нативный DOM	Работа с HTML в JavaScript
—	Современные UI	React, Vue

Что такое jQuery

jQuery — не фреймворк приложения. Она не задаёт маршруты, компоненты или глобальное состояние. Это тонкий слой удобства над браузерным API: вместо document.querySelectorAll и ветвлений под старые версии Internet Explorer вы получаете единый синтаксис $(селектор) и цепочки методов.

Аспект	jQuery	React / Vue
Модель	императивные правки реального DOM	декларативный UI, виртуальный DOM или реактивные шаблоны
Масштаб	страница, виджет, админка	SPA, крупные продукты
Подключение	один `<script>` или npm-пакет	сборщик, компоненты, экосистема
Статус в 2025+	legacy, CMS, простые сайты	greenfield-проекты

На пике (примерно 2011–2014) jQuery встречалась на ~75 % веб-сайтов: она сглаживала кросс-браузерные различия и сделала AJAX доступным до широкого распространения fetch. С ростом SPA её сменили библиотеки с компонентной моделью; тем не менее jQuery до сих пор встроена в WordPress, Drupal, многие корпоративные админки и старые лендинги.

История

Зарождение

Джон Резиг начал серьёзно изучать JavaScript около 2004 года, разочаровавшись в чужом коде для кастомного скроллинга. К 2006 году у него накопились повторяющиеся паттерны: выбор узлов, навешивание обработчиков, нормализация событий между IE и «нормальными» браузерами. Цель jQuery — вынести многоразовый код в библиотеку и не думать о кросс-браузерности на каждой странице.

Ключевые вехи

Год / версия	Событие
2006, BarCamp NYC	публичная презентация
2006, v1.0	первый стабильный релиз
2009, v1.3	в ядро вошёл движок селекторов Sizzle
2011, v1.5	Deferred — отложенные вызовы, переписан AJAX
2011, v1.7	унифицированные `.on()` / `.off()` для событий
2013, v2.0	отказ от IE 6–8 (отдельная ветка 1.x для старых IE)
2016, v3.0	Promises/A+, обновлён `$.ajax`
2008	партнёрство Microsoft (примеры в ASP.NET) и Nokia (мобильные виджеты)
2023, v3.7	актуальная стабильная ветка 3.x
2025–2026, v4.0	ES-модули, удаление устаревших API, `FormData`, без IE 10 и ниже

Разработка ведётся командой добровольцев; финансирование — через OpenJS Foundation и пожертвования сообщества.

Философия и принципы

Отделение поведения от разметки

Как CSS отделяет оформление от структуры HTML, jQuery помогает отделить поведение от разметки — в духе ненавязчивого JavaScript (unobtrusive JS). Вместо onclick="..." в HTML обработчики вешаются из скрипта:

// Поведение в JS, а не в атрибутах HTML
$('#submit').on('click', handleSubmit);

Компактное ядро + плагины

Авторы не стремились впихнуть в ядро всё подряд — это раздуло бы файл. Архитектура: маленькое универсальное ядро и плагины (jQuery UI, валидация форм, слайдеры, DataTables и тысячи сторонних расширений). На страницу подключают только нужное.

«Write less, do more»

Короткие выражения вместо многословного DOM-кода; цепочки методов (fluent interface) — каждый метод возвращает jQuery-объект, если не указано иное:

$('div.card')
  .addClass('active')
  .find('h2')
  .text('Заголовок')
  .end()
  .slideDown(300);

«$» как псевдоним

Глобальная функция $ — сокращение для jQuery. Если $ занят другой библиотекой (Prototype, MooTools), используют jQuery или оборачивают код:

jQuery(function ($) {
  // внутри блока $ — только jQuery
  $('p').hide();
});

Как устроена библиотека

IIFE и изоляция

Классическая сборка jQuery — самовызывающаяся функция (IIFE), которая не засоряет глобальную область лишними переменными; наружу экспортируются jQuery и $.

Два типа вызовов

$(селектор | элемент | HTML | функция) — возвращает jQuery-объект (коллекцию из 0..N DOM-узлов) с методами .addClass(), .on(), .ajax() через прототип.
$.method() — статические утилиты: $.each, $.ajax, $.extend, $.grep.

// Коллекция + методы экземпляра
$('li').addClass('item');

// Глобальная утилита
$.each([1, 2, 3], function (i, n) { console.log(n); });

jQuery-объект vs DOM-элемент

$('div')[0] или $('div').get(0) — нативный HTMLElement. Обратно: $(domElement) оборачивает узел в jQuery-коллекцию.

Sizzle — движок CSS-селекторов

С jQuery 1.3 селекторы обрабатывает Sizzle — кросс-браузерный движок, позже выделенный в отдельный проект. Он реализует CSS3-селекторы там, где старые браузеры не справлялись с querySelectorAll. Сейчас современные браузеры покрывают большинство селекторов нативно; Sizzle остаётся частью совместимости и истории jQuery.

Переход по дереву DOM

Методы .parent(), .children(), .find(), .siblings(), .next(), .prev(), .closest() — обход без ручного parentNode / childNodes. Поддержка XPath возможна через плагин, в ядре — CSS-селекторы.

Совместимость с нативным API

jQuery не заменяет DOM — она его оборачивает. Можно смешивать: выбрать через jQuery, вызвать нативный element.focus(), снова обернуть в $().

Подключение и установка

CDN (быстрый старт)

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Страница с jQuery</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
          integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
          crossorigin="anonymous"></script>
</head>
<body>
  <button id="go">Нажми</button>
  <script>
    $('#go').on('click', function () { alert('Готово'); });
  </script>
</body>
</html>

Актуальные ссылки и SRI-хеши — на jquery.com/download.

Локальный файл

Скачайте jquery-3.7.1.min.js и положите рядом со страницей:

<script src="js/jquery-3.7.1.min.js"></script>

npm и сборщик

npm install jquery

import $ from 'jquery';

$('#app').text('Hello from bundler');

В Webpack/Vite jQuery часто подключают как внешнюю зависимость legacy-страниц или через ProvidePlugin / autoProvide, если старый код ожидает глобальный $.

Готовность DOM

Код, обращающийся к элементам, запускают после построения DOM:

// Рекомендуемый способ
$(function () {
  // аналог DOMContentLoaded
  initWidgets();
});

// То же явно
$(document).ready(function () { initWidgets(); });

Версии 3.x и 4.x

Ветка	Назначение
3.7.x	стабильная для большинства проектов
4.x	ES-модули, чистка legacy API; проверяйте breaking changes перед миграцией

Для поддержки IE 8 и ниже исторически нужна была ветка 1.x — в новых проектах это уже неактуально.

Для чего используется

Манипуляция DOM — показ/скрытие блоков, подстановка HTML, классы, атрибуты.
События — клики, делегирование на родителе, preventDefault.
AJAX — $.get, $.post, $.ajax до эры fetch (и в legacy-коде по сей день).
Анимация — fadeIn, slideUp, .animate({ opacity: 0.5 }).
Плагины — валидация, карусели, lightbox, таблицы с сортировкой.
CMS и админки — WordPress, Drupal, 1C-Битрикс и др. тащат jQuery по умолчанию.

Когда не нужен jQuery в новом коде: SPA на React/Vue, серверный рендер с минимальным клиентским JS, проекты где достаточно document.querySelector + fetch + classList.

Работа с DOM

Базовые операции (подробные таблицы — в справочнике):

Поиск

$('#header');           // по id
$('.menu-item');        // по классу
$('div.container p');   // вложенность
$('input[type=email]'); // по атрибуту

Содержимое и атрибуты

$('#title').text('Новый заголовок');       // только текст
$('#box').html('<strong>HTML</strong>');   // разметка (осторожно с XSS)
$('a').attr('href', 'https://example.com');
$('img').prop('src', '/logo.png');         // свойства DOM

Классы и видимость

$('#panel').addClass('open').removeClass('hidden');
$('#panel').toggleClass('active');
$('#panel').hide();   // display: none
$('#panel').show();
$('#panel').css('color', '#333');

Создание и вставка

const $li = $('<li>').text('Пункт');
$('#list').append($li);

// Или из строки HTML
$('#list').append('<li>Ещё пункт</li>');

Типичный сценарий: табы без перезагрузки

$(function () {
  $('.tabs-nav button').on('click', function () {
    const target = $(this).data('tab');
    $('.tabs-nav button').removeClass('active');
    $(this).addClass('active');
    $('.tab-pane').hide();
    $('#' + target).show();
  });
});

Нативный эквивалент тех же приёмов — в Работа с HTML.

События

С jQuery 1.7 предпочтительны .on() и .off() (старые .click(), .bind() устарели):

$('#btn').on('click', function (e) {
  e.preventDefault();
  console.log('Клик');
});

Делегирование

Один обработчик на родителе для динамически добавленных потомков:

$('#todo-list').on('click', '.remove', function () {
  $(this).closest('li').fadeOut(300, function () {
    $(this).remove();
  });
});

Однократный обработчик

$('#once').one('click', function () {
  console.log('Сработает один раз');
});

Пространства имён

$('#el').on('click.myPlugin', handler);
$('#el').off('click.myPlugin'); // снять только свой обработчик

Подробнее о модели событий в браузере — События в JavaScript.

Визуальные эффекты

Встроенные методы анимируют display, opacity, height и др.:

$('#box').fadeOut(1000);
$('#box').fadeIn(500);
$('#box').slideToggle('slow');
$('#box').animate({ marginLeft: '50px', opacity: 0.5 }, 600);

Для сложных анимаций сегодня чаще используют CSS transitions/animations или Web Animations API; jQuery-эффекты остаются в старом коде и быстрых прототипах.

AJAX

jQuery нормализовала XMLHttpRequest и дала единый API:

// Краткая форма
$.getJSON('/api/users', function (data) {
  console.log(data);
});

// Полный контроль
$.ajax({
  url: '/api/save',
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify({ name: 'Анна' }),
  success: function (res) { console.log(res); },
  error: function (xhr, status, err) { console.error(err); }
});

Deferred и цепочки

$.when и объект Deferred (с v1.5) позволяли строить цепочки до широкого появления Promise в языке:

$.when($.get('/a'), $.get('/b'))
  .done(function (resA, resB) {
    console.log('Оба запроса завершены');
  });

В новом коде предпочтительны fetch и async/await — см. Асинхронность. В legacy на jQuery 3.x $.ajax возвращает объект, совместимый с Promise (.then()).

JavaScript-плагины

Плагин — функция, расширяющая $.fn:

(function ($) {
  $.fn.highlight = function (color) {
    return this.css('background-color', color || 'yellow');
  };
})(jQuery);

// Использование
$('p.warning').highlight('#ffe066');

Правила:

возвращать this для поддержки цепочек;
итерировать коллекцию через this.each(function () { ... });
не ломать глобальный $ — оборачивать в IIFE с параметром $.

Каталог расширений: plugins.jquery.com (архив; многие плагины сейчас на npm/GitHub).

jQuery UI

jQuery UI — официальный набор виджетов и эффектов поверх ядра: datepicker, dialog, autocomplete, sortable, draggable, resizable, тема оформления Themeroller.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

$('#date').datepicker({ dateFormat: 'dd.mm.yy' });
$('#dialog').dialog({ modal: true, width: 400 });

jQuery UI развивается медленнее ядра; в новых интерфейсах виджеты часто заменяют компонентами React/Vue или нативными <dialog>, <input type="date"> и CSS.

jQuery Mobile

jQuery Mobile — фреймворк мобильных веб-приложений (страницы, переходы, touch-события) поверх jQuery. Пик популярности — эпоха до зрелых responsive-сайтов и нативных/PWA-приложений.

Статус: проект в режиме поддержки; для новых мобильных проектов выбирают responsive CSS, PWA или кроссплатформенные стеки (React Native, Flutter). jQuery Mobile полезен при сопровождении старых мобильных сайтов.

jQuery сегодня: когда учить и когда отказываться

Ситуация	Рекомендация
Сопровождение WordPress / legacy CMS	знать jQuery обязательно
Новый SPA	React, Vue, Svelte
Простой лендинг без сборки	vanilla JS или jQuery по вкусу команды
Миграция с jQuery	заменять по модулям: селекторы → `querySelectorAll`, события → `addEventListener`, AJAX → `fetch`

Инструмент jQuery Migrate помогает найти устаревшие вызовы при переходе между мажорными версиями.

Сравнение: jQuery и нативный JavaScript

Задача	jQuery	Нативный JS (современный браузер)
Выбор	`$('.item')`	`document.querySelectorAll('.item')`
Класс	`$(el).addClass('x')`	`el.classList.add('x')`
Событие	`$(el).on('click', fn)`	`el.addEventListener('click', fn)`
HTTP	`$.get(url)`	`fetch(url).then(r => r.json())`
Готовность DOM	`$(fn)`	`document.addEventListener('DOMContentLoaded', fn)`

Нативные API стали достаточно удобными; ценность jQuery сегодня — единый стиль в существующей кодовой базе, а не необходимость для каждого нового файла.

Что читать дальше

Справочник по jQuery — таблицы методов, шпаргалка в стиле overapi.com/jquery.
Работа с HTML в JavaScript — DOM без библиотек.
SPA и выбор frontend-фреймворка — куда двигаться после jQuery.
Экосистема JavaScript — модули, сборщики, общая карта инструментов.

Практика

Возьмите простую HTML-страницу с кнопкой и списком; реализуйте добавление и удаление пунктов на jQuery, затем перепишите на querySelector + addEventListener — так видна разница в объёме кода и в том, что jQuery не даёт «магии», а сокращает обёртки.

jQuery​

Маршрут по разделу​

Что такое jQuery​

История​

Зарождение​

Ключевые вехи​

Философия и принципы​

Отделение поведения от разметки​

Компактное ядро + плагины​

«Write less, do more»​

«$» как псевдоним​

Как устроена библиотека​

IIFE и изоляция​

Два типа вызовов​

jQuery-объект vs DOM-элемент​

Sizzle — движок CSS-селекторов​

Переход по дереву DOM​

Совместимость с нативным API​

Подключение и установка​

CDN (быстрый старт)​

Локальный файл​

npm и сборщик​

Готовность DOM​

Версии 3.x и 4.x​

Для чего используется​

Работа с DOM​

Поиск​

Содержимое и атрибуты​

Классы и видимость​

Создание и вставка​

Типичный сценарий: табы без перезагрузки​

События​

Делегирование​

Однократный обработчик​

Пространства имён​

Визуальные эффекты​

AJAX​

Deferred и цепочки​

JavaScript-плагины​

jQuery UI​

jQuery Mobile​

jQuery сегодня: когда учить и когда отказываться​

Сравнение: jQuery и нативный JavaScript​

Что читать дальше​

Связанные темы

См. также

Справочник по jQuery