jQuery

jQuery

Оригинальный автор(ы)	Джон Ресиг
Разработчики)	Команда jQuery
Начальная версия	26 августа 2006 г ( 26 августа 2006 )
Стабильная версия	3.7.1 / (28 августа 2023 г.; ( 28.08.2023 ) )
Предварительный выпуск	4.0.0-бета / 6 февраля 2024 г ( 06.02.2024 )
Репозиторий	github .с /jquery /jquery
Написано в	JavaScript
Платформа	См. § Поддержка браузера.
Размер	27–274 КБ
Тип	библиотека JavaScript
Лицензия	С
Веб-сайт	jquery .с

jQuery — это библиотека JavaScript , предназначенная для упрощения обхода и манипулирования деревом HTML DOM , а также обработки событий , анимации CSS и Ajax . Это бесплатное программное обеспечение с открытым исходным кодом, использующее разрешительную лицензию MIT . По состоянию на август 2022 г. , jQuery используется 77% из 10 миллионов самых популярных веб-сайтов. Веб- анализ показывает, что это наиболее широко используемая библиотека JavaScript с большим отрывом, ее используют как минимум в три-четыре раза больше, чем любую другую библиотеку JavaScript.

Синтаксис jQuery предназначен для упрощения навигации по документу, выбора DOM элементов , создания анимации , обработки событий и разработки приложений Ajax . jQuery также предоставляет разработчикам возможность создавать плагины поверх библиотеки JavaScript. Это позволяет разработчикам создавать абстракции для низкоуровневого взаимодействия и анимации, расширенные эффекты и высокоуровневые виджеты с поддержкой тем. Модульный подход к библиотеке jQuery позволяет создавать мощные динамические веб-страницы и веб-приложения.

Набор основных функций jQuery — выбор элементов DOM, обход и манипулирование — обеспечиваемый механизмом селектора (названным «Sizzle» из версии 1.3), создал новый «стиль программирования», объединяющий алгоритмы и структуры данных DOM. Этот стиль повлиял на архитектуру других JavaScript-фреймворков, таких как YUI v3 и Dojo , позже стимулировав создание стандартного API Selectors .

Microsoft и Nokia объединяют jQuery на своих платформах. Microsoft включает его в Visual Studio. для использования в рамках Microsoft ASP.NET AJAX и ASP.NET MVC , а Nokia интегрировала его в платформу разработки виджетов Web Run-Time.

Обзор

jQuery по своей сути представляет собой библиотеку манипулирования объектной моделью документа (DOM). DOM — это древовидное представление всех элементов веб-страницы. jQuery упрощает синтаксис для поиска, выбора и управления этими элементами DOM. Например, jQuery можно использовать для поиска элемента в документе с определенным свойством (например, всех элементов с h1 тег), изменение одного или нескольких его атрибутов (например, color, visibility) или заставить его реагировать на событие (например, щелчок мыши).

jQuery также предоставляет парадигму обработки событий, выходящую за рамки простого выбора и манипулирования элементами DOM. Назначение события и определение функции обратного вызова события выполняются за один шаг в одном месте кода. jQuery также стремится включить другие часто используемые функции JavaScript (например, плавное появление и исчезновение при сокрытии элементов, анимацию путем манипулирования свойствами CSS ).

Принципы разработки с использованием jQuery:

• Разделение JavaScript и HTML. Библиотека jQuery предоставляет простой синтаксис для добавления обработчиков событий в DOM с помощью JavaScript вместо добавления атрибутов событий HTML для вызова функций JavaScript. Таким образом, это побуждает разработчиков полностью отделять код JavaScript от разметки HTML.
• Краткость и ясность: jQuery обеспечивает краткость и ясность благодаря таким функциям, как «цепочные» функции и сокращенные имена функций.
• Устранение несовместимости между браузерами. Движки JavaScript в разных браузерах немного различаются, поэтому код JavaScript, который работает для одного браузера, может не работать для другого. Как и другие наборы инструментов JavaScript, jQuery обрабатывает все эти межбраузерные несоответствия и предоставляет согласованный интерфейс, который работает в разных браузерах.
• Расширяемость: можно легко добавлять новые события, элементы и методы, а затем повторно использовать их в качестве плагина.

История

jQuery был первоначально создан в январе 2006 года на BarCamp в Нью-Йорке Джоном Ресигом под влиянием более ранней библиотеки cssQuery Дина Эдвардса. В настоящее время его поддерживает группа разработчиков под руководством Тимми Уиллисона (механизм выбора jQuery Sizzle возглавляет Ричард Гибсон).

jQuery изначально лицензировался по лицензии CC BY-SA 2.5 , а в 2006 году был повторно лицензирован по лицензии MIT . В конце 2006 года он получил двойную лицензию GPL и MIT. Поскольку это привело к некоторой путанице, в 2012 году лицензия GPL была отменена и теперь лицензируется только по лицензии MIT.

Популярность

• В 2015 году jQuery использовался на 62,7% из 1 миллиона лучших веб-сайтов (по данным BuildingWith) и на 17% всех веб-сайтов в Интернете.
• В 2017 году jQuery использовался на 69,2% из 1 миллиона лучших веб-сайтов (по данным Libscore).
• В 2018 году jQuery использовался на 78% из 1 миллиона лучших веб-сайтов.
• В 2019 году jQuery использовался на 80% из 1 миллиона лучших веб-сайтов (по данным BuildingWith). и 74,1% из 10 миллионов лучших (по данным W3Techs).
• По состоянию на апрель 2021 года jQuery используют 77,8% из 10 миллионов крупнейших веб-сайтов (по данным W3Techs) .

Особенности

jQuery включает в себя следующие функции:

• Выбор элементов DOM с использованием многобраузерного механизма выбора с открытым исходным кодом Sizzle , дочернего проекта проекта jQuery.
• Манипулирование DOM на основе селекторов CSS, которые используют имена и атрибуты элементов, такие как идентификатор и класс, в качестве критериев для выбора узлов в DOM.
• События
• Эффекты и анимация
• Аякс
• Объекты Deferred и Promise для управления асинхронной обработкой.
• JSON Анализ
• Расширяемость через плагины
• Утилиты, такие как обнаружение функций
• Методы совместимости, которые изначально доступны в современных браузерах, но требуют резервных вариантов для старых браузеров, таких как jQuery.inArray() и jQuery.each().
• Кроссбраузерная поддержка

Поддержка браузера

jQuery 3.0 и новее поддерживают «текущие версии 1» (то есть текущую стабильную версию браузера и предшествовавшую ей версию) Firefox (и ESR), Chrome , Safari и Edge , а также Internet Explorer 9 и новее. На мобильных устройствах поддерживается iOS 7 и новее, а также Android 4.0 и новее.

Распространение

Библиотека jQuery обычно распространяется в виде одного файла JavaScript, который определяет все ее интерфейсы, включая функции DOM, Events и Ajax. Его можно включить в веб-страницу, связав его с локальной копией или ссылаясь на одну из многих копий, доступных на общедоступных серверах. jQuery имеет сеть доставки контента (CDN), размещенную на MaxCDN . Google в службе Google Hosted Libraries, а Microsoft также размещает библиотеку.

Пример локальной привязки копии библиотеки (с того же сервера, на котором размещена веб-страница):

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

Пример связывания копии библиотеки с общедоступным CDN jQuery:

<  script 
   src  =  "https://code.jquery.com/jquery-3.5.1.min.js" 
   целостности  =  "sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 
   crossorigin  =  "anonymous"  >/  script  > 

Интерфейс

Функции

jQuery предоставляет два типа функций : статические служебные функции и методы объекта jQuery . У каждого свой стиль использования.

Доступ к обоим осуществляется через основной идентификатор jQuery: jQuery. Этот идентификатор имеет псевдоним с именем $. Доступ ко всем функциям возможен через любое из этих двух имен.

Методы jQuery

The jQueryФункция — это фабрика для создания объекта jQuery, который представляет один или несколько узлов DOM. Объекты jQuery имеют методы для управления этими узлами. Эти методы (иногда называемые командами) можно объединять в цепочки, поскольку каждый метод также возвращает объект jQuery.

Доступ к нескольким узлам DOM и манипулирование ими в jQuery обычно начинается с вызова $функция со строкой селектора CSS. Это возвращает объект jQuery, ссылающийся на все соответствующие элементы на HTML- странице. $("div.test")например, возвращает объект jQuery со всеми div элементы, имеющие класс test. Этим набором узлов можно манипулировать, вызывая методы возвращаемого объекта jQuery.

Статические утилиты

Это служебные функции, которые не действуют напрямую на объект jQuery. Доступ к ним осуществляется как статические методы по идентификатору jQuery или $. Например, $.ajax() это статический метод.

Бесконфликтный режим

jQuery предоставляет $.noConflict() функция, которая отказывается от контроля над $имя. Это полезно, если jQuery используется на веб-странице и связывает другую библиотеку, требующую $символ в качестве его идентификатора. В бесконфликтном режиме разработчики могут использовать jQuery в качестве замены $ без потери функциональности.

Типичная отправная точка

Обычно jQuery используется путем помещения кода инициализации и функций обработки событий в $(handler). Это запускается jQuery, когда браузер завершает создание DOM для текущей веб-страницы.

$  (  function   ()   { 
         // Эта анонимная функция вызывается после завершения загрузки страницы. 
         // Здесь можно разместить код для создания объектов jQuery, обработки событий и т. д. 
 }); 

или

$  (  фн  );    // Функция с именем fn, определенная в другом месте, вызывается при загрузке страницы. 

Исторически, $(document).ready(callback)де-факто это идиома запуска кода после того, как DOM готов. Однако, начиная с jQuery 3.0, разработчикам рекомендуется использовать гораздо более короткий вариант. $(handler) подпись вместо этого.

Цепочка

Методы объекта jQuery обычно также возвращают объект jQuery, что позволяет использовать цепочки методов :

$  (  'div.test'  ) 
   .   on  (  'click'  ,   handleTestClick  ) 
   .   addClass  (  'фу'  ); 

Эта строка находит все div элементы с атрибутом класса test , затем регистрирует обработчик событий для каждого элемента для события «щелчок», затем добавляет атрибут класса foo каждому элементу.

Некоторые методы объекта jQuery извлекают определенные значения (вместо изменения состояния). Примером этого является val()метод, который возвращает текущее значение элемента ввода текста . В этих случаях такое утверждение, как $('#user-email').val() не может использоваться для цепочки, поскольку возвращаемое значение не ссылается на объект jQuery.

Создание новых элементов DOM

Помимо доступа к существующим узлам DOM через jQuery, также можно создавать новые узлы DOM, если строка передается в качестве аргумента $()фабрика выглядит как HTML. Например, приведенный ниже код находит HTML-код. select элемент и создает новый option элемент со значением VAG и этикетка Volkswagen, который затем добавляется в меню выбора :

$  (  'select#car-brands'  ) 
   .   add  (  $  (  '<option>'  ) 
     .prop  (  .  value  ,  "VAG"  ) 
     text  ;  (  'Volkswagen'  ) 
   ) 

Аякс

Можно выполнять запросы Ajax (с кроссбраузерной поддержкой) с помощью $.ajax() для загрузки и управления удаленными данными.

$  .   ajax  ({ 
   тип  :   'POST'  , 
   URL  :   '/process/submit.php'  , 
   данные  :   { 
     имя   :   'Джон'  , 
     местоположение   :   'Бостон'  , 
   }, 
 }).   then  (  function  (  msg  )   { 
   alert  (  'Данные сохранены: '   +   msg  ); 
 }).   catch  (  function  (  xmlHttpRequest  ,   statusText  ,   errorThrown  )   { 
   alert  ( 
     'Не удалось отправить форму.\n\n' 
       +   'XML Http-запрос: '   +   JSON  .  stringify  (  xmlHttpRequest  ) 
       +   ',\nStatus Text: '   +   statusText 
       +   ' ,\nВыброшенная ошибка: '   +   errorThrown  } ) 
 ; 

В этом примере публикуются данные name=John и location=Boston к /process/submit.phpна сервере. Когда этот запрос завершается, вызывается функция успеха, чтобы предупредить пользователя. Если запрос не выполнен, он предупредит пользователя об ошибке, статусе запроса и конкретной ошибке.

В приведенном выше примере используется .then() и .catch()методы для регистрации обратных вызовов, которые запускаются после завершения ответа. Эти обратные вызовы обещаний необходимо использовать из-за асинхронной природы запросов Ajax .

Плагины jQuery

Архитектура jQuery позволяет разработчикам создавать код плагина для расширения его функций. В Интернете доступны тысячи плагинов jQuery. которые охватывают ряд функций, таких как помощники Ajax, веб-службы , сетки данных, динамические списки, XML и XSLT инструменты , перетаскивание , события, обработка файлов cookie и модальные окна .

Важным источником плагинов jQuery является поддомен плагинов веб-сайта проекта jQuery. Однако плагины в этом поддомене были случайно удалены в декабре 2011 года в попытке избавить сайт от спама. Новый сайт представляет собой репозиторий, размещенный на GitHub , который потребовал от разработчиков повторно отправить свои плагины и соответствовать новым требованиям к отправке. jQuery предоставляет «Центр обучения», который может помочь пользователям понять JavaScript и начать разработку плагинов jQuery.

История выпусков

Версия	Начальная версия	Последнее обновление	Уменьшенный размер (КБ)	Дополнительные замечания
1.0	26 августа 2006 г. ( 26 августа 2006 г. )			Первый стабильный выпуск
1.1	14 января 2007 г. ( 14 января 2007 г. )
1.2	10 сентября 2007 г. ( 10 сентября 2007 г. )	1.2.6	54.5
1.3	14 января 2009 г. ( 14 января 2009 г. )	1.3.2	55.9	Sizzle Selector Engine введен в ядро
1.4	14 января 2010 г. ( 14.01.2010 )	1.4.4	76.7
1.5	31 января 2011 г. ( 31.01.2011 )	1.5.2	83.9	Управление отложенным обратным вызовом, перезапись модуля ajax
1.6	3 мая 2011 г. ( 03.05.2011 )	1.6.4 (12 сентября 2011 г. ( 12.09.2011 ) )	89.5	Значительное улучшение производительности функций attr() и val().
1.7	3 ноября 2011 г. ( 03.11.2011 )	1.7.2 (21 марта 2012 г. ( 21.03.2012 ) )	92.6	Новые API событий: .on() и .off(), хотя старые API по-прежнему поддерживаются.
1.8	9 августа 2012 г. ( 09.08.2012 )	1.8.3 (13 ноября 2012 г. ( 2012-11-13 ) )	91.4	Переписан механизм выбора Sizzle, улучшена анимация и гибкость $(html, props).
1.9	15 января 2013 г. ( 15.01.2013 )	1.9.1 (4 февраля 2013 г. ( 04.02.2013 ) )	90.5	Удаление устаревших интерфейсов и очистка кода.
1.10	24 мая 2013 г. ( 24 мая 2013 г. )	1.10.2 (3 июля 2013 г. ( 03.07.2013 ) )	90.9	Включены исправления ошибок и различия, о которых сообщалось как в бета-циклах 1.9, так и в 2.0.
1.11	24 января 2014 г. ( 24.01.2014 )	1.11.3 (28 апреля 2015 г. ( 28.04.2015 ) )	93.7
1.12	8 января 2016 г. ( 08.01.2016 )	1.12.4 (20 мая 2016 г. ( 20.05.2016 ) )	94.9
2.0	18 апреля 2013 г. ( 18 апреля 2013 г. )	2.0.3 (3 июля 2013 г. ( 03.07.2013 ) )	81.7	Прекращена поддержка IE 6–8 для повышения производительности и уменьшения размера файла.
2.1	24 января 2014 г. ( 24.01.2014 )	2.1.4 (28 апреля 2015 г. ( 28-04-2015 ) )	82.4
2.2	8 января 2016 г. ( 08.01.2016 )	2.2.4 (20 мая 2016 г. ( 20 мая 2016 г. ) )	83.6
3.0	9 июня 2016 г. ( 09.06.2016 )	3.0.0 (9 июня 2016 г. ( 09.06.2016 ) )	84.3	Поддержка Promises/A+ для Deferreds, $.ajax и $.when, .data(), совместимая с HTML5.
3.1	7 июля 2016 г. ( 07.07.2016 )	3.1.1 (23 сентября 2016 г. ( 23.09.2016 ) )	84.7	Добавлен jQuery.readyException, ошибки обработчика готовности теперь не отключаются.
3.2	16 марта 2017 г. ( 16.03.2017 )	3.2.1 (20 марта 2017 г. ( 20.03.2017 ) )	84.6	Добавлена ​​поддержка получения содержимого <template> элементы и устаревание различных старых методов.
3.3	19 января 2018 г. ( 19.01.2018 )	3.3.1 (20 января 2018 г. ( 20.01.2018 ) )	84.9	Устаревшие старые функции: функции, принимающие классы, теперь также поддерживают их в формате массива.
3.4	10 апреля 2019 г. ( 10.04.2019 )	3.4.1 (1 мая 2019 г.)	86.1	Улучшения производительности, nonce и nomodule поддержка, исправления радиоэлементов, небольшое исправление безопасности.
3.5	10 апреля 2020 г. ( 10.04.2020 )	3.5.1 (4 мая 2020 г.)	87.4	Исправления безопасности, .even() & .odd() методы, jQuery.trim устарел
3.6	2 марта 2021 г. ( 2021-03-02 )	3.6.4 (8 марта 2023 г.)	88.2	Исправлены ошибки, возврат JSON при возникновении ошибки JSONP, обработка новых селекторов Chrome.
3.7	11 мая 2023 г. ( 11.05.2023 )	3.7.1 (28 августа 2023 г.)	85.4	.uniqueSort() метод, улучшение производительности, .outerWidth(true) & .outerHeight(true) обработка отрицательных полей, исправление фокуса
4.0	6 февраля 2024 г. ( 06.02.2024 )	4.0.0-бета	77.1

Платформа тестирования

QUnit — это среда автоматизации тестирования, используемая для тестирования проекта jQuery. Команда jQuery разработала ее как собственную библиотеку модульного тестирования. Команда jQuery использует его для тестирования своего кода и плагинов, но она может тестировать любой общий код JavaScript, включая код JavaScript на стороне сервера.

По состоянию на 2011 год команда тестирования jQuery использует QUnit с TestSwarm для тестирования каждой версии базы кода jQuery.

Альтернативы jQuery

Упрощая такие задачи, как обход HTML-документов, анимацию и обработку событий, надежная библиотека JavaScript jQuery изменила лицо веб-разработки. По состоянию на май 2019 г. По данным исследовательской компании W3Techs, jQuery по-прежнему используется на 74 процентах известных веб-сайтов. Тем не менее, библиотека jQuery, дебютировавшая в августе 2006 года, сейчас рассматривается некоторыми разработчиками как старая технология, время которой прошло. В последние годы появились альтернативы jQuery, такие как библиотека Cash или даже современный, ванильный JavaScript, теперь, когда все веб-браузеры обрабатывают JavaScript одинаково, и jQuery больше не нужен для решения проблем совместимости. Аргументы на Reddit и видео на YouTube доказывают, что jQuery устарел или, по крайней мере, не так важен, как раньше.

- Пол Крилл, InfoWorld (2019)

Поскольку кросс-браузерная совместимость больше не является такой уж большой проблемой, большую часть jQuery сегодня можно заменить современными веб-стандартами без особой потери удобства. Частично из-за этого GitHub удалил jQuery со своих страниц в 2018 году.

См. также

• Сравнение веб-фреймворков на основе JavaScript
• jQuery для мобильных устройств
• jQuery пользовательский интерфейс
• Веб-фреймворк
• библиотека JavaScript

Дальнейшее чтение

• Джон Резиг (спикер) (13 апреля 2007 г.). Джон Резиг: Развитие JavaScript с помощью библиотек (видео на YouTube) . Театр ЮИ . Проверено 9 января 2018 г.
• Крил, Пол (31 августа 2006 г.). «Разработчики JavaScript и .Net помогли в отдельном проекте» . Инфомир . Проверено 15 апреля 2019 г.
• Тафт, Дэррил К. (30 августа 2006 г.). «jQuery упрощает разработку JavaScript и AJAX» . электронная неделя . Проверено 15 апреля 2019 г.

Внешние ссылки

• Официальный веб-сайт