jQuery - популярная кросс-браузерная библиотека JavaScript, которая облегчает обход объекта Document Object Model (DOM), обработку событий, анимацию и взаимодействие AJAX, минимизируя несоответствия между браузерами. Вопросительный тег jquery должен быть связан с jquery, поэтому jQuery должен использоваться соответствующим кодом, и, по крайней мере, в вопросе должны быть элементы, связанные с jquery.

О

jQuery (Core) - это кросс-браузерная библиотека JavaScript (созданная John Resig), который предоставляет абстракции для обычных клиентских задач, таких как обход DOM, манипулирование DOM, обработка событий, анимация и AJAX .

jQuery упрощает обход и обработку HTML-документов, обработку событий, анимацию и AJAX из-за своего API, который работает во множестве браузеров.

jQuery предоставляет платформу для создания плагинов, которые расширяют свои возможности, помимо тех, которые уже предоставлены библиотекой. Разработка jQuery и связанных с ним проектов координируется jQuery Foundation.

Функции

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

  • Выбор элементов DOM с использованием многосерверного механизма селектора с открытым исходным кодом Sizzle, выделение проекта jQuery
  • Обход и изменение DOM (включая поддержку CSS 1-3)
  • Управление DOM на основе селекторов CSS, которые используют имена и атрибуты узлов (например, ID и class) в качестве критериев для создания селекторов
  • События
  • Эффекты и анимации
  • AJAX
  • Разбор JSON (для старых браузеров)
  • Расширяемость через плагины
  • Утилиты, такие как информация пользовательского агента, обнаружение функций
  • Способы совместимости, которые изначально доступны в современных браузерах, но нуждаются в резервных копиях для более старых - например, функции inArray() и each()
  • Поддержка нескольких браузеров (не путать с кросс-браузером)

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

jQuery поддерживает текущую стабильную версию и предыдущую версию или версию current-1, "Chrome, Edge, Firefox и Safari. Он также поддерживает текущую стабильную версию Opera.

Кроме того, jQuery 1.x поддерживает Internet Explorer версии 6 или выше. Тем не менее, поддержка IE 6-8 была отключена jQuery 2.x и jQuery 3. x, которые поддерживают только IE 9 или выше.

Наконец, jQuery поддерживает мобильный браузер на Android 4.0 и выше, а Safari - на iOS 7 и выше.

jQuery Версии

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

jQuery CDN предоставляет ссылки для загрузки всех версий jQuery, включая последние стабильные версии каждой ветки.

При задании вопросов, связанных с jQuery, вы должны:

  • Внимательно прочитайте документацию jQuery API и Переполнение стека для дубликатов перед запросом.
  • Изолируйте проблемный код и воспроизведите его в онлайн-среде, например JSFiddle, JSBin или CodePen. Для Live Connect вы также можете использовать LiveWeave. Однако обязательно включите проблемный код в свой вопрос - не просто ссылку на онлайн-среду. Вы также можете использовать фрагменты стека, чтобы включить runnable code в самом вопросе.
  • Отметьте вопрос соответствующим образом; всегда включайте , и использовать другие теги для веб-разработки (, , ), если применимо. Самые популярные плагины jQuery также имеют свои собственные теги, такие как , и ; для каждого другого плагина включается тег .
  • Укажите версию используемой библиотеки jQuery, чтобы любые ответы могли предоставлять решения, соответствующие версиям.
  • Укажите, в каком браузере возникает код, и какие сообщения об ошибках, если таковые имеются, были брошены браузером. Если проблемы непротиворечивы в кросс-браузере, то это тоже ценная информация.

Часто задаваемые вопросы

Привет, пример мира

Это показывает "Привет, мир!" . в поле предупреждения по каждой ссылке нажмите после готовности DOM (JSFiddle):

 //обратный вызов для загрузки документа
$ (функция() {   // выберите привязки и установите обработчик кликов   $ ( "a" ). click (function (event) {       // предотвращать действие по умолчанию по умолчанию (перенаправление на другую страницу)       event.preventDefault();
       // показать сообщение       alert (  "Привет, мир!"  );   });
});
Код>

Ресурсы

Видеоурок

Популярные плагины

Другие проекты проекта jQuery

Рекомендации и часто совершаемые ошибки

Связанный вопрос: ошибки jQuery, чтобы избежать

Не забудьте использовать готовый обработчик

Если ваш код каким-то образом управляет DOM, вам необходимо убедиться, что он запущен после завершения загрузки DOM.

jQuery предоставляет способы сделать это с помощью анонимной функции:

  $(function() {   /* код здесь */
});

// Или
$ (document).ready(function() {   /* код здесь */
});
Код>

или с именованной функцией:

<Предварительно > <код > $(FunctionName); // Или $ (Документ).ready(FunctionName); Код >

Это альтернативы размещению кода JavaScript или тега скрипта в HTML прямо перед закрывающим тегом </body>.

В jQuery 3.x, рекомендуемый способ добавления готового обработчика - это $(function() {}), тогда как другие формы, такие как $(document).ready(function() { }) устарели. Кроме того, jQuery 3.x удаляет возможность использования .on( "ready", function() {}) для запуска функции в событии "ready".

Избегайте конфликтов с помощью noConflict() и другого псевдонима для jQuery

Если ваш код jQuery конфликтует с другой библиотекой, которая также использует знак $ в качестве псевдонима, затем используйте метод noConflict():

<Предварительно > <код > jQuery.noConflict(); Код >

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

В качестве альтернативы вы можете позвонить

  $jq = jQuery.noConflict();
Код>

и используйте $jq как псевдоним для jQuery. Например:

  $jq (function() {   $ jq ( "a" ). click (function (event) {       event.preventDefault();       alert (  "Привет, мир!"  );   });
});
Код>

Также можно назначить jQuery $в пределах определенной области:

  jQuery (function ($) {   // Здесь знак доллара является псевдонимом только для jQuery.
});

// Здесь, другие библиотеки могут использовать знак доллара как псевдоним.
Код>

Затем вы можете использовать $ как псевдоним для jQuery внутри этого функционального блока, не беспокоясь о конфликтах с другими библиотеками.

При необходимости кэшируйте объекты и цепочку jQuery по возможности

Вызов функции jQuery $() стоит дорого. Повторное вызов крайне неэффективно. Избегайте этого:

<Предварительно > <код > $( 'тест ') addClass (' привет'). $ ('. test'). css ('color', 'orange'); $ ('. test'). prop ('title', 'Hello world'); Код >

Вместо этого кешируйте свой объект jQuery в переменной:

  var $test = $('. test');

$ Test.addClass( 'привет');
$ test.css( "цвет", "оранжевый" );
$ test.prop('title', 'Hello world');
Код>

Или еще лучше, используйте цепочку для уменьшения повторения:

  $('. test'). addClass ('hello'). css ('color', 'orange'). prop ('title', 'Hello world');
Код>

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

  $('. test'). css ('color', 'orange'). css ('background-color', 'blue');
Код>

использование:

  $('. test'). css ({'color': 'orange', 'background-color': 'blue'});
Код>

Переменные соглашения об именах

Обозначенные переменными jQuery обычно называются начиная с $, чтобы отличить их от стандартных объектов JavaScript.

  var $this = $(this);
Код>

Знайте свои свойства и функции DOM

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

  $('img'). click (function() {   $ (Это).attr( 'SRC');//Плохо!
});
Код>

В приведенном выше коде this относится к элементу, из которого был запущен обработчик события клика. Вышеприведенный код является медленным и подробным; приведенный ниже код функционирует одинаково и намного короче, быстрее и читабельнее.

  $('img'). click (function() {   this.src;//Многое, намного лучше
});
Код>

Идиоматический синтаксис для создания элементов

Хотя следующие два примера кажутся функционально эквивалентными и синтаксически правильными, предпочтительным является первый пример:

  $('<p>', {   text: 'Это' + переменная,    "класс":  "синий слайдер",   title: переменная,   id: variable + i
}) AppendTo (OBJ).
Код>

Для сравнения, подход конкатенации строк гораздо менее читабельен и гораздо более хрупкий:

  $('< p class=  "синий слайдер"  id = "' + variable + я + ' "title=" ' + variable + '" > Это' + variable + '</р >. ') appendTo (OBJ);
Код>

В то время как первый пример будет медленнее второго, преимущества большей ясности, вероятно, превысят номинальные разницы во всех, кроме самых чувствительных к производительности приложений.

Более того, идиоматический синтаксис устойчив к инъекции специальных символов. Например, во втором примере символ кавычки в переменной преждевременно закрывал атрибуты. Выполнение правильной кодировки самостоятельно остается возможным даже если не рекомендуется, поскольку он подвержен ошибкам.

Чат-комнаты

Чат о jQuery с другими пользователями:

Альтернативы/Конкуренты

Другими известными библиотеками JavaScript являются:

Публичные репозитории:

  • cdnjs - проект сообщества, работающий под управлением облачного флекса, в настоящее время используется ~ 1 143 000 веб-сайтов по всему миру.
  • jsdelivr - одинаково свободный и открытый исходный код CDN для cdnjs.

Связанные теги