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

О

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, которые используют имена и атрибуты node (например, ID и class) в качестве критериев для создания селекторов
  • События
  • Эффекты и анимации
  • AJAX
  • Разбор JSON (для старых браузеров)
  • Расширяемость через плагины
  • Утилиты, такие как информация пользовательского агента, обнаружение функций
  • Способы совместимости, которые изначально доступны в современных браузерах, но нуждаются в резервных копиях для более старых - например, функции inArray() и each()
  • Поддержка нескольких браузеров (не путать с кросс-браузером)

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

jQuery поддерживает текущую стабильную версию, а предыдущую версию или "текущую версию - 1" из Chrome, Edge, Firefox и Сафари. Он также поддерживает текущую стабильную версию 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. Следуйте примечания к выпуску, чтобы быть в курсе с функциями.

Последние стабильные версии

ветвь 3.x: 3.2.1

ветвь 2.x: 2.2.4

ветвь 1.x: 1.12.4 (требуется для поддержки IE 6-8)

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

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

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

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

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

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

// callback for document load
$(function () {
    // select anchors and set click handler
    $("a").click(function (event) { 
        // prevent link default action (redirecting to another page)
        event.preventDefault();

        // show the message
        alert("Hello world!"); 
    });
});

Ресурсы

Видеоурок

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

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

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

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

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

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

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

$(function () { 
    /* code here */ 
});

// Or
$(document).ready(function () { 
    /* code here */ 
});

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

$(functionName);

// Or
$(document).ready(functionName);

Это альтернативы размещению кода JavaScript или тега script в 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("Hello world!"); 
    });
});

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

jQuery(function ($) {
    // In here, the dollar sign is an alias for jQuery only.
});

// Out here, other libraries can use the dollar sign as an alias.

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

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

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

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

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

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

$test.addClass('hello');
$test.css('color', 'orange');
$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 () {
    $(this).attr('src');  // Bad!
});

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

$('img').click(function () {
    this.src; // Much, much better
});

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

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

$('<p>', {
    text: 'This is a ' + variable, 
    "class": 'blue slider', 
    title: variable, 
    id: variable + i
}).appendTo(obj);

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

$('<p class="blue slider" id="' + variable + i + '" title="' + variable + '">This is a ' + variable + '</p>').appendTo(obj);

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

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

Чат-комнаты

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

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

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

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

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

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