JQuery - JQuery

jQuery
JQuery logo.svg
Оригинальный автор (ы)Джон Ресиг
Разработчики)Команда jQuery
изначальный выпуск26 августа 2006 г.; 14 лет назад (2006-08-26)
Стабильный выпуск
3.5.1 / (4 мая 2020 г.; 6 месяцев назад (2020-05-04))[1]
Репозиторий
Отредактируйте это в Викиданных
Написано вJavaScript
ПлатформаУвидеть § Поддержка браузера
Размер27–274 КБ[2]
ТипБиблиотека JavaScript
ЛицензияМассачусетский технологический институт
Интернет сайтjquery.com

jQuery это Библиотека JavaScript разработан, чтобы упростить HTML ДОМ обход дерева и манипуляции с ним, а также обработка событий, CSS анимация, и Аякс.[3] это бесплатное программное обеспечение с открытым исходным кодом используя разрешительный Лицензия MIT.[4] По состоянию на май 2019 года jQuery используется 73% из 10 миллионов самых популярных веб-сайтов.[5] Интернет Анализ показывает, что это наиболее широко используемая библиотека JavaScript с большим отрывом, которая используется как минимум в 3-4 раза чаще, чем любая другая библиотека JavaScript.[5][6]

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

Набор Основные функции jQuery - Выбор, обход и манипуляции с элементами DOM - обеспечивается его селектор двигателя (названный «Sizzle» из v1.3), создал новый «стиль программирования», объединяющий алгоритмы и структуры данных DOM. Этот стиль повлиял на архитектуру других Фреймворки JavaScript любить YUI v3 и Додзё, позже стимулируя создание стандарта Селекторы API.[7] Позже этот стиль был улучшен за счет более глубокого слияния алгоритма и данных в наследнике jQuery, D3.js фреймворк.

Microsoft и Nokia связать jQuery на своих платформах.[8] Microsoft включает его в Visual Studio[9] для использования в Microsoft ASP.NET AJAX и ASP.NET MVC frameworks, а Nokia интегрировала его в платформу разработки виджетов времени выполнения в Интернете.[10]

Обзор

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

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

Принципы разработки с помощью jQuery:

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

История

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

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

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

  • В 2015 году jQuery использовался на 62,7% из 1 миллиона лучших веб-сайтов (по данным Построен с ) и 17% всех интернет-сайтов.[17]
  • В 2017 году jQuery использовался на 69,2% из 1 миллиона лучших веб-сайтов (по данным Libscore).[6]
  • В 2018 году jQuery использовался на 78% из 1 миллиона лучших веб-сайтов.[18]
  • В 2019 году jQuery использовался на 80% из 1 миллиона лучших веб-сайтов (по данным BuiltWith),[18] и 74,1% из 10 миллионов лучших (по данным W3Techs).[5]
  • По состоянию на февраль 2020 года jQuery используется 74,4% из 10 миллионов лучших веб-сайтов (по данным W3Techs)..[19]

особенности

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

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

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

jQuery 3.0 и новее поддерживает «текущие версии-1» (что означает текущую стабильную версию браузера и предшествующую ей версию) Fire Fox (и СОЭ), Хром, Сафари, и Край а также Internet Explorer 9 и новее. На мобильном телефоне он поддерживает iOS 7 и новее, и Android 4.0 и новее.[21]

Распределение

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

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

<сценарий src="jquery.js"></сценарий>

Пример подключения копии библиотеки из общедоступного CDN jQuery:

<сценарий  src="https://code.jquery.com/jquery-3.4.1.min.js"  целостность="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo ="  перекрестное происхождение="анонимный"></сценарий>

Интерфейс

Функции

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

Оба доступны через основной идентификатор jQuery: jQuery. У этого идентификатора есть псевдоним $.[25] Доступ ко всем функциям можно получить через любое из этих двух имен.

методы jQuery

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

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

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

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

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

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

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

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

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

или

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

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

Цепочка

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

$('div.test')  .на('щелкнуть', handleTestClick)  .addClass('фу');

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

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

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

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

$('выберите # марку автомобилей')  .добавить($('<опция>')    .attr({ ценность: "ВАГ" })    .текст('Фольксваген')  );

Аякс

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

$.ajax({  тип: 'СООБЩЕНИЕ',  url: '/process/submit.php',  данные: {    имя : 'Джон',    расположение : 'Бостон',  },}).тогда(функция(сообщение) {  предупреждение("Данные сохранены:" + сообщение);}).ловить(функция(xmlHttpRequest, statusText, errorThrown) {  предупреждение(    "Не удалось отправить вашу форму".      + 'Запрос XML Http:' + JSON.стягивать(xmlHttpRequest)      + ', Текст состояния:' + statusText      + ', Выбрана ошибка:' + errorThrown);});

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

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

плагины jQuery

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

Важным источником подключаемых модулей jQuery является поддомен подключаемых модулей веб-сайта проекта jQuery.[28] Однако плагины в этом субдомене были случайно удалены в декабре 2011 года в попытке избавить сайт от спама.[29] Новый сайт GitHub -hosted репозиторий, который требовал от разработчиков повторной отправки своих плагинов и соответствия новым требованиям к отправке.[30] jQuery предоставляет «Центр обучения», который может помочь пользователям понять JavaScript и начать разработку подключаемых модулей jQuery.[31]

Чтобы создать эти плагины, разработчики могут либо написать свой собственный код с нуля, либо построить поверх существующей структуры, такой как Шаблон jQuery.

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

Версияизначальный выпускПоследнее обновлениеУменьшенный размер (КБ)Дополнительные примечания
1.026 августа 2006 г. (2006-08-26)Первый стабильный выпуск
1.114 января 2007 г. (2007-01-14)
1.210 сентября 2007 г. (2007-09-10)1.2.654.5
1.314 января 2009 г. (2009-01-14)1.3.255.9Sizzle Selector Engine введен в ядро
1.414 января 2010 г. (2010-01-14)1.4.476.7
1.531 января 2011 г. (2011-01-31)1.5.283.9Отложенное управление обратным вызовом, перезапись модуля ajax
1.63 мая 2011 г. (2011-05-03)1.6.489.5Значительные улучшения производительности функций attr () и val ()
1.73 ноября 2011 г. (2011-11-03)1.7.2 (21 марта 2012 г. (2012-03-21))92.6Новые API событий: .on () и .off (), в то время как старые API все еще поддерживаются.
1.89 августа 2012 г. (2012-08-09)1.8.3 (13 ноября 2012 г. (2012-11-13))91.4Переписан движок Sizzle Selector Engine, улучшена анимация и гибкость $ (html, props).
1.915 января 2013 г. (2013-01-15)1.9.1 (4 февраля 2013 г. (2013-02-04))90.5Удаление устаревших интерфейсов и очистка кода
1.1024 мая 2013 г. (2013-05-24)1.10.2 (3 июля 2013 г. (2013-07-03))90.9Включены исправления ошибок и различия, о которых сообщалось в бета-циклах 1.9 и 2.0.
1.1124 января 2014 г. (2014-01-24)1.11.3 (28 апреля 2015 г. (2015-04-28))93.7
1.128 января 2016 г. (2016-01-08)1.12.4 (20 мая 2016 г. (2016-05-20))94.9
2.018 апреля 2013 г. (2013-04-18)2.0.3 (3 июля 2013 г. (2013-07-03))81.7Прекращена поддержка IE 6–8 для повышения производительности и уменьшения размера файлов.
2.124 января 2014 г. (2014-01-24)2.1.4 (28 апреля 2015 г. (2015-04-28))82.4
2.28 января 2016 г. (2016-01-08)2.2.4 (20 мая 2016 г. (2016-05-20))83.6
3.09 июня 2016 г. (2016-06-09)[32]3.0.0 (9 июня 2016 г. (2016-06-09))84.3Поддержка Promises / A + для Deferreds, $ .ajax и $ .when, .data () HTML5-совместимая
3.17 июля 2016 г. (2016-07-07)3.1.1 (23 сентября 2016 г. (2016-09-23))84.7Добавлен jQuery.readyException, ошибки готового обработчика теперь не заглушаются
3.216 марта 2017 г. (2017-03-16)[33]3.2.1 (20 марта 2017 г. (2017-03-20))84.6Добавлена ​​поддержка для получения содержимого <template> элементы и отказ от различных старых методов.
3.319 января 2018 г. (2018-01-19)[34]3.3.1 (20 января 2018 г. (2018-01-20))[35]84.9Устарели старые функции, функции, которые принимают классы, теперь также поддерживают их в формате массива.
3.410 апреля 2019 г., (2019-04-10)[36]3.4.1 (1 мая 2019 г.)[37]86.1Улучшения производительности, nonce и номер поддержка, исправления для радиоэлементов, мелкое исправление безопасности.
3.510 апреля 2020 г. (2020-04-10)[1]3.5.1 (4 мая 2020 г.)[38]87.4Исправления безопасности, .даже() & .странный() методы, jQuery.trim устарел

Фреймворк для тестирования

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

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

Смотрите также

использованная литература

  1. ^ а б "Выпущен jQuery 3.5.0!". Блог jQuery. 2020-04-10. Получено 2020-04-11.
  2. ^ «Библиотеки с открытым исходным кодом и размеры файлов - PageCDN». pagecdn.com. Получено 2020-07-21.
  3. ^ «jQuery: меньше пиши, больше делай, библиотека JavaScript». Проект jQuery. Получено 29 апреля 2010.
  4. ^ «Лицензия проекта jQuery». Фонд jQuery. Получено 2017-03-11.
  5. ^ а б c «Использование библиотек JavaScript для веб-сайтов». W3Techs. В архиве из оригинала на 2019-11-15. Получено 2019-11-15. jQuery (74,1%) в 3,7 раза популярнее Bootstrap (19,9%).
  6. ^ а б "Libscore". Архивировано из оригинал на 2017-02-19. Получено 2017-02-11. Лучшие скрипты: 1. jQuery (692 981 сайт); 2. jQuery UI (193 680 сайтов); 3. Facebook SDK (175 369 сайтов); 4. Twitter Bootstrap JS (158 288 сайтов); 5. Модернизр (155 503 сайта).
  7. ^ "Селекторы API уровня 1, рекомендация W3C "(21 февраля 2013 г.). Этот стандарт превратил" вспомогательные методы "jQuery в собственные методы JavaScript, а широкое использование jQuery стимулировало быстрое усыновление из querySelector / querySelectorAll в основные веб-браузеры.
  8. ^ Ресиг, Джон (2008-09-28). "jQuery, Microsoft и Nokia". Блог jQuery. jQuery. Получено 2009-01-29.
  9. ^ Гатри, Скотт (2008-09-28). «jQuery и Microsoft». Блог ScottGu. Получено 2019-04-15.
  10. ^ «Guarana UI: библиотека пользовательского интерфейса на основе jQuery для Nokia WRT». Форум Nokia. Архивировано из оригинал на 2011-08-16. Получено 2010-03-30.
  11. ^ Йорк, Ричард (2009). Начало разработки JavaScript и CSS с помощью jQuery. Вайли. п. 28. ISBN  978-0-470-22779-4.
  12. ^ Ресиг, Джон (31 октября 2007 г.). «История jQuery». Получено 2019-04-15.
  13. ^ "Команда jQuery". jquery.com. JS Foundation. Получено 2019-05-22. Команда: Тимми Уиллисон (руководитель jQuery Core), Ричард Гибсон (руководитель Sizzle, jQuery Core).
  14. ^ jquery-под-лицензией-мит на jquery.org (2006)
  15. ^ лицензия на jquery.org (заархивировано 2010 г.)
  16. ^ jquery-лицензирование-изменения на jquery.org (2012)
  17. ^ «Обработка 15 000 запросов в секунду: рост за jQuery». www.maxcdn.com. MaxCDN. 20 июня 2015 г.. Получено 2018-07-02.
  18. ^ а б «Статистика использования jQuery (декабрь 2019 г.)». Trends.builtwith.com. 2019-12-31. Архивировано из оригинал на 2020-02-21. Получено 2020-02-21.
  19. ^ «Статистика использования и рыночная доля библиотек JavaScript (февраль 2020 г.)». W3Techs. 2020-02-21. В архиве из оригинала от 21.02.2020. Получено 2020-02-21.
  20. ^ Ресиг, Джон (14 января 2009 г.). «jQuery 1.3 и jQuery Foundation». Блог jQuery. Получено 2009-05-04.
  21. ^ Поддержка браузера | jQuery
  22. ^ jquery.org, jQuery Foundation -. "jQuery CDN".
  23. ^ "API библиотек Google - Руководство разработчика". Получено 11 марта, 2012.
  24. ^ «Сеть доставки контента Microsoft Ajax». ASP.net. Корпорация Майкрософт. Получено 2019-04-15.
  25. ^ js.foundation, JS Foundation -. "jQuery () | Документация по API jQuery". api.jquery.com. Получено 2018-07-02.
  26. ^ "jQuery.noConflict () jQuery API Documentation".
  27. ^ jquery.org, jQuery Foundation -. «Руководство по обновлению jQuery Core 3.0 - jQuery».
  28. ^ а б "Плагины". Проект jQuery. Получено 2019-04-15.
  29. ^ "Что происходит с сайтом плагинов jQuery?". Блог jQuery. Получено 22 апреля 2015.
  30. ^ "jquery / plugins.jquery.com". GitHub. Получено 22 апреля 2015.
  31. ^ "Центр обучения jQuery". Фонд jQuery. Получено 2014-07-02.
  32. ^ Честерс, Джеймс (2016-06-15). «Долгожданный jQuery 3.0 приносит тонкую сборку». infoq.com. Получено 2017-01-28.
  33. ^ "jQuery 3.2.0 вышел!". Блог jQuery. 16 марта 2017 г.. Получено 12 марта 2018.
  34. ^ «jQuery 3.3.0 - ароматный букет устаревших рекомендаций и… это новая функция?». Блог jQuery. 2018-01-19. Получено 2019-04-15.
  35. ^ «jQuery 3.3.1 - исправлены зависимости в теге выпуска». Блог jQuery. 2018-01-20. Получено 2019-04-15.
  36. ^ «Выпущен jQuery 3.4.0». Блог jQuery. 2018-04-10. Получено 2019-04-15.
  37. ^ «jQuery 3.4.1: запуск событий фокуса в IE и поиск корневых элементов в iOS 10». Блог jQuery. Фонд jQuery.
  38. ^ «Выпущен jQuery 3.5.1: исправление регрессии». Блог jQuery. jQuery Foundation.
  39. ^ а б "История". qunitjs.com. Получено 2019-04-15.
  40. ^ "Вики группы тестирования jQuery".

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

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