JQuery
jQuery — библиотека для JavaScript, предназначенная для упрощения обхода и манипулирования деревом HTML, а также обработки событий, анимации CSS и поддержки Ajax[1]. Является свободным, открытым ПО под разрешительной лицензией MIT[2]. По состоянию на август 2022 года, jQuery используется на 77 % из 10 миллионов самых популярных сайтов[3]. Согласно анализу, jQuery — самая широко распространённая JS-библиотека, используемая в 3-4 раза чаще других подобных библиотек[3].[4]
Синтаксис jQuery создан для упрощённого навигирования по документу, поиска и изменения элементов DOM, создания анимаций, обработки событий и разработки Ajax-приложений. jQuery также предоставляет возможности для создания подключаемых модулей (плагинов), что позволяет разработчикам реализовывать абстракции для низкоуровневого взаимодействия, анимаций, сложных эффектов и высокоуровневых темизируемых виджетов. Модульный подход к архитектуре jQuery позволяет создавать мощные динамические веб-страницы и приложения.
Набор основных возможностей jQuery — выборка, обход и изменение DOM-элементов средствами специального селекторного движка (Sizzle, с версии 1.3) — сформировал характерный «стиль программирования», сочетающий алгоритмы и структуры данных DOM. Это повлияло на архитектуру других JavaScript-фреймворков, таких как YUI v3 и Dojo, а также стимулировало создание стандарта Selectors API[5].
Microsoft и Nokia включали jQuery в свои платформы[6]. Microsoft добавляла jQuery в поставку Visual Studio[7], для использования в ASP.NET AJAX и ASP.NET MVC, а Nokia интегрировала её в Web Run-Time для разработки виджетов[8].
Общие сведения
| jQuery | |
|---|---|
| Тип | JavaScript-библиотека |
| Автор | Джон Резиг |
| Разработчик | Команда jQuery |
| Написана на | JavaScript |
| Операционная система | кроссплатформенность |
| Первый выпуск | 26 августа 2006 |
| Последняя версия | 4.0.0-rc.1 (11 августа 2025) |
| Репозиторий | github.com/jquery/jquery |
| Лицензия | MIT |
| Сайт | jquery.com |
Обзор
jQuery в своей основе — библиотека для работы с DOM. DOM представляет собой древовидную структуру описания всех элементов веб-страницы. jQuery упрощает синтаксис поиска, выбора и изменения этих элементов. Например, с помощью jQuery можно найти элемент с определённым свойством (например, все элементы h1), изменить их атрибуты (цвет, видимость) или обработать событие, например клик мыши.
В jQuery реализован особый подход к обработке событий, выходящий за рамки базовой манипуляции DOM-элементами. Назначение события и определение обработчика производится единым способом, в одном месте кода. Также предоставляются простые средства для создания анимаций (например, плавное появление/затухание элементов при их показе или скрытии) и манипулирования свойствами CSS.
Основные принципы разработки с использованием jQuery:
- Разделение JavaScript и HTML: jQuery поощряет отделение JS-кода от разметки HTML.
- Краткость и наглядность: поддерживаются «цепочки» вызовов, сокращённые имена методов.
- Устранение проблем кроссбраузерности: jQuery выравнивает особенности JS-движков разных браузеров, обеспечивая единую точку входа.
- Расширяемость: добавление новых событий, элементов и методов возможно в виде подключаемых плагинов.
История
jQuery была создана в январе 2006 года на BarCamp NYC Джоном Резигом, под влиянием библиотеки cssQuery Дина Эдвардса[9].[10] В настоящее время поддерживается командой разработчиков под руководством Тимми Виллисона, а развитием селекторного движка Sizzle руководит Ричард Гибсон[11].
Изначально проект лицензировался под CC BY-SA 2.5, в 2006 году переключён на MIT[12]. В конце 2006 года проект стал распространяться по двойной лицензии MIT и GPL[13], однако из-за путаницы с 2012 года используется только MIT[14].
Популярность
- В 2015 году jQuery использовалась на 62,7 % из миллиона крупнейших сайтов (по BuiltWith), и на 17 % сайтов всего интернета[15].
- В 2017 году — на 69,2 % из топ-1 млн сайтов (по Libscore)[4].
- В 2018 году — на 78 % сайтов из топ-1 млн[16].
- В 2019 году jQuery была на 80 % сайтов из топ-1 млн (BuiltWith)[16], и на 74,1 % из топ-10 млн (W3Techs)[3].
- В 2021 году — на 77,8 % сайтов из топ-10 млн (W3Techs)[17].
Возможности
jQuery включает в себя:
- выделение элементов DOM благодаря открытому мультибраузерному движку Sizzle[18]
- манипуляции DOM на основе CSS-селекторов (по имени, атрибутам, id и классам)
- обработку событий
- эффекты и анимацию
- работу с Ajax
- объекты Promise и Deferred для работы с асинхронным кодом
- разбор JSON
- расширяемость (подключение плагинов)
- утилиты (например, обнаружение возможностей браузера)
- методы совместимости для старых браузеров (например,
jQuery.inArray()иjQuery.each()) - кроссбраузерную поддержку
Платформы и совместимость
Библиотека jQuery распространяется в виде одного файла JavaScript, содержащего все интерфейсы (DOM, события, Ajax и др). Она может быть подключена локально либо через публичные CDN. Официальный CDN размещён на MaxCDN[20], сервисы Google Hosted Libraries и Microsoft также предоставляют свои копии[21].[22]
Технические особенности
Архитектура и функции
jQuery предоставляет два вида функций: статические утилиты и методы объектов jQuery. Все они доступны через основной идентификатор jQuery (или его псевдоним $)[23].
Метод jQuery() создаёт объект, представляющий набор DOM-узлов, к которым можно применять цепочки методов (методы возвращают новый jQuery-объект). Поиск осуществляется CSS-селекторами, например: $("div.test") возвращает все div с классом test.
Статические утилиты (например, $.ajax()) не привязываются к объекту jQuery, а вызываются напрямую.
Режим no-conflict
Для избежания конфликтов переменных (например, если другая библиотека использует $) предусмотрена функция $.noConflict(), возвращающая управление другим скриптам[24].
Типовое использование
Инициализирующий код и обработчики событий обычно размещаются в $(handler), который срабатывает после полной загрузки DOM. Идиома $(document).ready(callback) постепенно замещается более краткой формой начиная с jQuery 3.0[25].
Цепочки вызовов
Методы объектов jQuery возвращают сам объект, позволяя формировать цепочки вызовов, например:
$('div.test')
.on('click', handleTestClick)
.addClass('foo');
Некоторые методы, возвращающие значения (например, val()), не поддерживают цепочки.
Создание новых DOM-элементов
jQuery позволяет создавать DOM-элементы непосредственно из HTML-строк и вставлять их в документ.
Ajax
Запросы Ajax осуществляются с помощью $.ajax(). Пример POST-запроса и обработки результата:
$.ajax({
type: 'POST',
url: '/process/submit.php',
data: {
name : 'John',
location : 'Boston',
},
}).then(function(msg) {
alert('Data Saved: ' + msg);
}).catch(function(xmlHttpRequest, statusText, errorThrown) {
alert(
'Your form submission failed.\n\n'
+ 'XML Http Request: ' + JSON.stringify(xmlHttpRequest)
+ ',\nStatus Text: ' + statusText
+ ',\nError Thrown: ' + errorThrown);
});
Интеграции и экосистема
Плагины jQuery
Архитектура jQuery допускает создание тысяч плагинов, расширяющих функциональность: помощники Ajax, работа со сторонними сервисами, динамические таблицы, списки, XML/XSLT, drag&drop, cookies, модальные окна и др[26]. Крупнейший каталог плагинов размещён по адресу plugins.jquery.com[26], однако его исходная версия была удалена в декабре 2011 года, и теперь используется репозиторий на GitHub[27].[28] Для изучения JavaScript и самостоятельной разработки плагинов предусмотрен раздел «Learning Center»[29].
Для автоматического преобразования кода jQuery в чистый JavaScript существуют специальные инструменты, например jQuery to JavaScript Converter[30].
Выпуски
| Версия | Дата первого выпуска | Последнее обновление | Минифицированный размер (КБ) | Примечания | Источник |
|---|---|---|---|---|---|
| 1.0 | 26 августа 2006 | Первый стабильный выпуск | |||
| 1.1 | 14 января 2007 | ||||
| 1.2 | 10 сентября 2007 | 1.2.6 | 54.5 | ||
| 1.3 | 14 января 2009 | 1.3.2 | 55.9 | В ядро внедрён селекторный движок Sizzle | |
| 1.4 | 14 января 2010 | 1.4.4 | 76.7 | ||
| 1.5 | 31 января 2011 | 1.5.2 | 83.9 | Управление Deferred callbacks, переписан модуль ajax | |
| 1.6 | 3 мая 2011 | 1.6.4 (12 сентября 2011) | 89.5 | Значительно ускорены attr() и val() | [31] |
| 1.7 | 3 ноября 2011 | 1.7.2 (21 марта 2012) | 92.6 | Новые Event API: .on() и .off() | [32] |
| 1.8 | 9 августа 2012 | 1.8.3 (13 ноября 2012) | 91.4 | Переработан Sizzle, улучшена анимация и $(html, props) | [33] |
| 1.9 | 15 января 2013 | 1.9.1 (4 февраля 2013) | 90.5 | Удалены устаревшие интерфейсы, рефакторинг | [34] |
| 1.10 | 24 мая 2013 | 1.10.2 (3 июля 2013) | 90.9 | Исправлены ошибки как в 1.9, так и 2.0 бета | [35] |
| 1.11 | 24 января 2014 | 1.11.3 (28 апреля 2015) | 93.7 | [36] | |
| 1.12 | 8 января 2016 | 1.12.4 (20 мая 2016) | 94.9 | [37] | |
| 2.0 | 18 апреля 2013 | 2.0.3 (3 июля 2013) | 81.7 | Отказ от поддержки IE 6-8 ради производительности и размера | |
| 2.1 | 24 января 2014 | 2.1.4 (28 апреля 2015) | 82.4 | ||
| 2.2 | 8 января 2016 | 2.2.4 (20 мая 2016) | 83.6 | ||
| 3.0 | 9 июня 2016 | 3.0.0 (9 июня 2016) | 84.3 | Promises/A+ для Deferreds, $.ajax и $.when, .data() совместим с HTML5 | [38] |
| 3.1 | 7 июля 2016 | 3.1.1 (23 сентября 2016) | 84.7 | Добавлен jQuery.readyException, ошибки ready теперь не поглощаются | |
| 3.2 | 16 марта 2017 | 3.2.1 (20 марта 2017) | 84.6 | Поддержка <template>, объявлены устаревшими старые методы |
[39] |
| 3.3 | 19 января 2018 | 3.3.1 (20 января 2018) | 84.9 | Устаревшие функции, поддержка классов в виде массива | [40][41] |
| 3.4 | 10 апреля 2019 | 3.4.1 (1 мая 2019) | 86.1 | Оптимизация, поддержка nonce и nomodule, исправления для radio, минорное исправление безопасности |
[42][43] |
| 3.5 | 10 апреля 2020 | 3.5.1 (4 мая 2020) | 87.4 | Исправления безопасности, .even() & .odd(), депрецирован jQuery.trim | [44][45] |
| 3.6 | 2 марта 2021 | 3.6.4 (8 марта 2023) | 88.2 | Исправления ошибок, возврат JSON при ошибке JSONP, поддержка новых селекторов Chrome | [46][47][48] |
| 3.7 | 11 мая 2023 | 3.7.1 (28 августа 2023) | 85.4 | .uniqueSort(), повышение производительности, улучшения работы .outerWidth(true)/.outerHeight(true), исправления работы с фокусом | [49][50][51] |
| 4.0 | 11 августа 2025 | 4.0.0-rc.1 (11 августа 2025) | 78.8 | Поддержка IE11 убрана, удалены устаревшие API, поддержка FormData, переход к ES-модулям | [52] |
Тестирование
Альтернативы jQuery
Поскольку проблема кроссбраузерности для современных браузеров практически утрачена, большинство возможностей jQuery могут быть реализованы на стандартном JavaScript, без ощутимых потерь в удобстве[56]. В частности, GitHub в 2018 году полностью отказался от использования jQuery на своих страницах[57].