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

О нас

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

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

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

Функции

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

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

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

jQuery поддерживает текущую стабильную версию и предыдущую версию или "текущий - 1 версия", из Chrome, Края, Firefox и Safari. Это также поддерживает текущую стабильную версию Opera.

Кроме того, jQuery 1.x поддерживает версию 6 Internet Explorer или выше. Однако поддержка 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 тщательно и ищите Переполнение стека дубликаты перед выяснением.
  2. Изолируйте проблематичный код и воспроизведите его в оперативной среде, такой как JSFiddle, JSBin или CodePen. Для Живого Подключения можно также использовать 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

Лучшие практики и обычно делаемые ошибки

Связанный вопрос: ловушки 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 () {}) выполнять функцию на "готовом" событии.

Избегайте конфликтов при помощи 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 обращается к элементу, из которого был запущен обработчик события Click. Код выше является и медленным и подробным; код ниже функций тождественно и намного короче, быстрее и более читаем.

$('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); 

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

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

Чат-комнаты

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

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

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

Общедоступные репозитории:

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

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