Как подключить библиотеку jQuery
Обновлено 2026/05/14
Подключить библиотеку jQuery можно несколькими способами: через CDN (Content Delivery Network), локальным файлом или как ES-модуль в современных сборщиках проектов.
Варианты подключения
Сегодня стандартом считается подключение скриптов через атрибут defer. Это позволяет браузеру загружать JavaScript параллельно с HTML и не блокировать отображение страницы.
Важно! Не рекомендуется подключать скрипты в верхней части страницы без defer или async. Это ухудшает скорость загрузки сайта и может негативно влиять на показатели Core Web Vitals и Lighthouse.
Как работает defer
Современный вариант подключения:
<head>
<script
defer
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous">
</script>
</head>
Что делает defer:
- браузер продолжает загружать HTML, пока скачивается скрипт;
- рендеринг страницы не блокируется;
- скрипт выполняется после построения DOM;
- сохраняется порядок выполнения подключаемых JS-файлов.
Разница между defer и подключением перед </body>:
| Способ | Особенности |
|---|---|
| Перед </body> | Подходит для старых и legacy-проектов |
| defer в <head> | Современный подход с лучшей производительностью |
Официальный jQuery CDN
Официальный CDN jQuery. Актуальная стабильная ветка — 3.7.1.
<script
defer
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous">
</script>
cdnjs CDN
Популярный CDN-сервис Cloudflare.
<script
defer
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
jsDelivr CDN
<script
defer
src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js">
</script>
Google CDN
Google Hosted Libraries продолжают работать, однако в РФ доступность сервисов Google может быть нестабильной. Для российских проектов чаще используют jsDelivr, cdnjs или локальное подключение.
<script
defer
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
Локальное подключение jQuery
Если проект должен работать независимо от CDN или требуется полный контроль над файлами, разместите библиотеку локально.
<script defer src="/js/jquery-3.7.1.min.js"></script>
Резервное подключение (Fallback)
Можно комбинировать CDN и локальный файл. Если CDN окажется недоступен, автоматически загрузится локальная копия.
<script
defer
src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js">
</script>
<script>
window.jQuery || document.write(
'<script src="/js/jquery-3.7.1.min.js"><\/script>'
);
</script>
Безопасность: integrity и crossorigin
При подключении через CDN рекомендуется использовать атрибуты integrity и crossorigin.
- integrity — проверяет хэш файла и защищает от подмены скрипта;
- crossorigin — позволяет браузеру корректно выполнять SRI-проверку для внешнего ресурса.
Такой механизм называется Subresource Integrity (SRI) и считается стандартом безопасности при работе с CDN.
Для генерации актуального SRI-хэша используйте данные с официального CDN или автоматически генерируйте хэш в процессе сборки проекта.
Как проверить, что jQuery подключён
Откройте DevTools браузера → вкладка Console и выполните:
console.log(jQuery.fn.jquery);
Если библиотека подключена корректно, в консоли появится версия jQuery:
3.7.1
Vanilla JS vs jQuery
Большинство задач фронтенда сегодня можно решить без jQuery благодаря современному JavaScript API.
Когда jQuery действительно нужен:
- поддержка старых проектов;
- legacy CMS и шаблонов;
- старые плагины и библиотеки;
- быстрая интеграция готовых решений.
Когда лучше использовать Vanilla JS:
- новые сайты и SPA;
- проекты с упором на производительность;
- минимизация JavaScript-зависимостей;
- оптимизация Core Web Vitals и Lighthouse.
Подключение jQuery увеличивает объём JavaScript на странице. Это может влиять на показатель LCP (Largest Contentful Paint), особенно на мобильных устройствах и медленном соединении.
Если библиотека используется только для простых действий — например, обработки кликов или добавления CSS-классов — чаще выгоднее использовать нативный JavaScript.
Пример на jQuery
$('.button').on('click', function () {
$('.block').addClass('active');
});
Аналог на Vanilla JS
document.querySelector('.button')
.addEventListener('click', function () {
document.querySelector('.block')
.classList.add('active');
});
Подключение jQuery через npm
В современных frontend-проектах jQuery чаще подключают через пакетный менеджер npm.
npm install jquery
Импорт в JavaScript:
import $ from 'jquery';
$('.title').addClass('active');
Такой способ используется в проектах на Vite, Webpack, Parcel и других сборщиках.
Официальный сайт jQuery — https://jquery.com/
Занимаюсь SEO‑продвижением сайтов в Хабаровске: от разработки стратегии до вывода в топ-10 Яндекса и Google. Опыт работы — с 2009 года.