Описание тега jquery

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

Около

jQuery (Core) - это кроссбраузерная библиотека JavaScript (созданная Джоном Ресигом), которая предоставляет абстракции для общих задач на стороне клиента, таких как обход DOM, манипулирование DOM, обработка событий, анимация и AJAX 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 поддерживает текущую стабильную версию и предыдущую или "текущую версию 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. Следуйте примечаниям к выпуску, чтобы не упустить возможности.

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

Задавая вопросы, связанные с jQuery, вы должны:

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

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

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

Это показывает "Hello world!" в окне предупреждения при каждом щелчке по ссылке после того, как 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 с другими пользователями stackru:

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

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

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

  • cdnjs - проект, управляемый сообществом Cloud Flare, в настоящее время используется около 1143000 веб-сайтов по всему миру.
  • jsdelivr - такая же бесплатная альтернатива cdnjs с открытым исходным кодом.

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