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

Около

jQuery (Core) - это кросс-браузерная библиотека JavaScript (созданная Джоном Ресигом), которая обеспечивает абстракции для обычных клиентских задач, таких как обход 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() для более старых - например, функции inArray() и each()
  • Мульти-браузер (не путать с кросс-браузером)

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

jQuery поддерживает текущую стабильную версию и предыдущую версию или "текущую версию 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, вы должны:

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

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

Привет, мир

Это показывает "Привет, мир!". в окне предупреждения по каждой ссылке нажмите после готовности 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 Foundation

Лучшие практики и часто совершаемые ошибки

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

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

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

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

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

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

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

$(functionName);

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

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

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

Избегайте конфликтов с помощью 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.

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