Статья

Foops 19 Июня

📘 Урок 2: Как подключить jQuery к сайту — CDN и локально

Оглавление

🟡 Способ 2. Подключение jQuery локально

🔹 Важные советы по подключению

Цель урока: научиться правильно подключать библиотеку jQuery к HTML-документу, понимать разницу между подключением через CDN и локальным способом, а также устранять частые ошибки.

🔹 Зачем нужно подключать jQuery?

jQuery — это внешняя JavaScript-библиотека. Пока ты её не подключишь, функции и сокращения вроде $() или $.ajax() не будут работать на сайте.

🔹 Два основных способа подключения jQuery

Ты можешь подключить jQuery:

Через CDN (Content Delivery Network) — это ссылка на внешний сервер, где уже лежит jQuery.
Локально — загрузив файл jquery.min.js на свой сервер или хостинг.

🟢 Способ 1. Подключение jQuery через CDN

✅ Что такое CDN?

CDN (сеть доставки контента) — это глобальная сеть серверов, которая хранит копии популярных библиотек, таких как jQuery. Подключаясь к ним, ты получаешь:

Высокую скорость загрузки (ближайший сервер к пользователю),
Кэширование (если пользователь уже был на другом сайте с тем же jQuery),
Минимум нагрузки на твой хостинг.

📌 Как подключить?

Вставь этот тег в HTML-файл перед закрывающим </body> или в head (если нужен немедленный доступ к jQuery):

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

Для полной совместимости можно добавить integrity и crossorigin:

<script
  src="https://code.jquery.com/jquery-3.6.4.min.js"
  integrity="sha256-o88Awf4lgU5MDmH8rI+HCfUsyJv8o+0uc7+JlFec2xk="
  crossorigin="anonymous"></script>

📌 Где вставлять?

Пример HTML-документа с подключением jQuery:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta✱ charset="UTF-8">
  <title>Пример с jQuery</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

  <h1>Добро пожаловать!</h1>
  <button id="helloBtn">Нажми на меня</button>

  <script>
    $('#helloBtn').click(function() {
      alert('jQuery работает!');
    });
  </script>

</body>
</html>

🟡 Способ 2. Подключение jQuery локально

✅ Когда это нужно?

Ты хочешь, чтобы сайт работал без интернета (offline).
Тебе нужно точно контролировать версию библиотеки.
Твой проект не должен зависеть от внешних источников.
Ты работаешь в закрытой корпоративной сети.

📌 Как скачать jQuery?

Перейди на официальный сайт:

👉 https://jquery.com/download/

Там ты найдёшь:

Минифицированную версию (для продакшена): jquery-3.6.4.min.js
Полную версию (для изучения и отладки): jquery-3.6.4.js

Скачай нужный файл и положи его, например, в папку /js/.

📌 Как подключить локальный файл?

<script src="/js/jquery-3.6.4.min.js"></script>

Обрати внимание: путь должен быть указан правильно. Если файл находится в той же папке, что и HTML-документ, путь будет:

<script src="jquery-3.6.4.min.js"></script>

🔹 Важные советы по подключению

📌 1. Подключай jQuery до собственного скрипта

<script src="jquery.min.js"></script>
<script src="main.js"></script>

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

📌 2. Используй `$(document).ready()`

Иногда jQuery-скрипты нужно запускать после полной загрузки страницы, иначе они могут не найти элементы:

$(document).ready(function() {
  // jQuery код
});

Сокращённый вариант:

$(function() {
  // jQuery код
});

📌 3. Проверь консоль на ошибки

Если jQuery не работает — открой DevTools → Console (F12) и посмотри на ошибки. Часто это:

Неверный путь к файлу (404 not found)
Ошибка сети
Попытка использовать $ до подключения библиотеки

🔹 CDN vs Локально — что выбрать?

Критерий	CDN	Локально
Скорость загрузки	Обычно быстрее	Зависит от хостинга
Работа без интернета	❌	✅
Простота подключения	✅	Нужно скачать файл
Надёжность	Может зависеть от CDN	Полностью под твоим контролем
Использование на проде	✅ Рекомендуется	✅ Если хочешь полный контроль

🔹 Частые ошибки и как их исправить

❌ Ошибка: `$ is not defined`

💥 Причина: jQuery подключен после твоего скрипта.

✅ Решение: поменяй порядок, jQuery должен быть выше.

❌ Ошибка: файл не найден

💥 Причина: неправильный путь к jquery.min.js.

✅ Решение: убедись, что путь указан правильно. Проверь адрес в браузере вручную.

❌ jQuery не работает при вставке кода

💥 Причина: ты вставляешь код до загрузки DOM.

✅ Решение: используй $(document).ready() или $(function() { ... }).

🔹 Небольшая практика

Создадим кнопку, которая меняет текст на странице:

<button id="changeText">Поменять текст</button>
<p id="myText">Исходный текст</p>

<script>
  $('#changeText').click(function() {
    $('#myText').text('Новый текст!');
  });
</script>

📌 Заключение

Подключение jQuery — это первый шаг к динамическому и интерактивному сайту. Теперь ты умеешь:

Подключать jQuery через CDN и локально,
Выбирать способ в зависимости от условий,

Избегать ошибок и писать первые скрипты.

      * Упомянутые организации запрещены на территории РФ

Jquery

+ Читать