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, вы должны:

  1. Внимательно прочитайте документацию по jQuery APIи поиск переполнения стеказа дубликаты, прежде чем спрашивать.
  2. Изолируйте проблемный код и воспроизводите его в онлайн-среде, такой как JSFiddle, JSBinили CodePen. Для Live Connect вы также можете использовать LiveWeave. Тем не менее, обязательно включите проблемный код в свой вопрос - не просто ссылку на онлайн-среду. Вы также можете использовать фрагменты стека, чтобы включить исполняемый код в самом вопросе.
  3. Отметьте вопрос соответствующим образом; всегда включайте jqueryи используйте другие теги веб-разработки (html, javascript, ajax) в зависимости от обстоятельств. Самые популярные плагины jQuery также имеют свои собственные теги, такие как jquery-ui, jquery-mobileи jquery-validate; для каждого другого подключаемого модуля добавьте тег jquery-plugins.
  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!"); 
    });
});

Ресурсы

Видеоурок

  • Codechool Try jQuery- интерактивное веб-руководство по бесплатной JQuery

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

Другие проекты 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:

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

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

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

Новые вопросы

2 Как переопределить новую вкладку при нажатии строки сетки с помощью javascript
2 Изменение цвета определенного слова в абзаце с помощью js
2 как изменить стиль шрифта при нажатии на иконку
2 Как включить и отключить тумблер на основе события щелчка
2 Удалить javascript поля формы
2 Я хочу изменить форму объекта, движущегося с номером, например, прямоугольник, треугольник, квадрат. КАК ЭТО СДЕЛАТЬ?
2 Перетаскивание элементов с помощью jQueryUI и с эффектом параллакса
5 Не отображать какой-либо контент и блокировать один элемент
2 Как я могу проверить, отмечены ли 2 флажка контактной формы 7 или нет, с использованием Jquery?
3 Как получить значение атрибута «заголовок» изображения в другой элемент с помощью jQuery
2 Обновление страницы после удаления с помощью Ajax в ASP.NET MVC
2 как я могу изменить отображение элемента после того, как пользователь закрыл меню
2 Я хочу навести курсор на кнопку и изменить другой класс, но это не работает
2 Как я могу разделить строки таблицы на 2 равных столбца с помощью JavaScript?
3 Как вернуть объект-оболочку вместо элемента HTML?
2 Скрытие определенных элементов в DataTables
2 как найти потомки в javascript?
4 Показать ID по клику JS
2 Мне нужно найти все элементы с одинаковым именем класса и обратиться к первому
2 JQuery, как обновить div нажатием кнопки
3 Как обернуть несколько div без изменения внутренней позиции div
2 Изменение цвета фона и цвета текста по клику
2 ASP .NET Core MVC JQuery AJAX - проблема с получением данных для просмотра через контроллер API с использованием ajax
2 Сравните старую и новую цену для каждого элемента, если они равны или нет.
2 JSON возвращает [object Object], а затем результат, а не только результат
Все вопросы по теме jquery >