jQuery - это библиотека JavaScript, рассмотрите возможность добавления тега JavaScript. jQuery - это популярная кросс-браузерная библиотека JavaScript, которая облегчает прохождение Document Object Model (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться в рассматриваемом коде, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.
Около
jQuery (Core)- это кроссбраузерная библиотека JavaScript (созданная Джоном Ресигом < / a>), который предоставляет абстракции для общих задач на стороне клиента, таких как обход DOM, манипуляции с DOM, обработка событий, анимация и AJAX.
JQuery упрощает прохождение и обработку документов HTML, обработку событий, анимацию и AJAX благодаря своему API, который работает во множестве браузеров.
JQuery предоставляет платформу для создания плагинов, которые расширяют его возможности за пределы возможностей, уже предоставленных библиотекой Разработка jQuery и связанных с ним проектов координируется Фондом jQuery.
Характеристики
JQuery включает в себя следующие функции:
- Выбор элементов DOM с помощью мультибраузерного движка с открытым исходным кодом Sizzle, дополнительного проекта jQuery
- Обход и модификация DOM (включая поддержку CSS 1–3)
- Управление DOM на основе селекторов CSS, которые используют имена и атрибуты узловых элементов (например,
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. Следуйте заметкам о выпуске, чтобы быть в курсе возможностей.
CDN jQuery предоставляет ссылки для загрузки всех версий jQuery, включая последние стабильные версии каждой ветви.
Задавая вопросы, связанные с jQuery, вы должны:
- Внимательно прочитайте документацию по jQuery APIи поиск переполнения стеказа дубликаты, прежде чем спрашивать.
- Изолируйте проблемный код и воспроизводите его в онлайн-среде, такой как JSFiddle, JSBinили CodePen. Для Live Connect вы также можете использовать LiveWeave. Тем не менее, обязательно включите проблемный код в свой вопрос - не просто ссылку на онлайн-среду. Вы также можете использовать фрагменты стека, чтобы включить исполняемый код в самом вопросе.
- Отметьте вопрос соответствующим образом; всегда включайте jqueryи используйте другие теги веб-разработки (html, javascript, ajax) в зависимости от обстоятельств. Самые популярные плагины jQuery также имеют свои собственные теги, такие как jquery-ui, jquery-mobileи jquery-validate; для каждого другого подключаемого модуля добавьте тег jquery-plugins.
- Укажите версию используемой библиотеки jQuery, чтобы любые ответы могли предоставить решения, соответствующие версии.
- Укажите, в каком браузере возникли проблемы с кодом, и какие сообщения об ошибках, если таковые имеются, были выданы браузером. Если проблемы согласованы между браузерами, то это тоже ценная информация.
Часто задаваемые вопросы
- Получение идентификатора элемента, который вызвал событие, используя jQuery
- Разница между этим и $ (этим)
- Разница между jQuery () и jQuery.fn
- jQuery.click () против onClick - jQuery против HTML
- Область действия в функции обратного вызова $ .ajax
- Как вернуть ответ от вызова AJAX
- Переключение фонового изображения DIV с помощью jQuery
- используя jQuery.on / делегирование события или привязку к событию на динамически создаваемых элементах
- Сохранить доступ к этой области
Привет мир пример
Это показывает "Привет, мир!" в окне предупреждения по каждой ссылке нажмите после того, как 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
- Официальная документация
- Официальный интерактивный учебник
- Официальный учебный центр jQuery
- Основы jQuery
- Страница jQuery на GitHub
- JQuery Source Viewer
- Google размещал библиотеки jQuery
- Список заметок о выпуске jQuery
- Официальный форум
- Официальный блог
- пакет NuGet (для использования в качестве части веб-сайта ASP.NET)
Видеоурок
- Codechool Try jQuery- интерактивное веб-руководство по бесплатной JQuery
Популярные плагины
- Проверка
- Cycle2
- Tableorter
- Таблицы данных
- jQuery Grid
- prettyPhoto для лайтбокса
- Retina Display Image
- Параллакс
- Superfish для меню навигации
- [Gijgo] 50
- Хранилище плагинов
Другие проекты 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 () {})
для запуска функции по событию "ready".
Избегайте конфликтов, используя noConflict()
и другой псевдоним для jQuery
Если ваш код jQuery конфликтует с другой библиотекой, которая также использует знак $
в качестве псевдонима, используйте в {{Х1}} метод:
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 с другими пользователями Stack Overflow:
Альтернативы / Конкуренты
Другие известные библиотеки JavaScript:
- Библиотека YUI- Библиотека пользовательского интерфейса Yahoo (не активно поддерживается).
- MooTools
- Подчеркивать
- Лодаш
Публичные репозитории:
- cdnjs- проект сообщества Cloudflare, который в настоящее время используется примерно 1 143 000 веб-сайтов по всему миру.
- jsdelivr- одинаково бесплатная альтернатива CDN cdnjs с открытым исходным кодом.