Как подключить jQuery 4 к сайту?

В этом уроке вы узнаете:

• Какие существуют способы подключения jQuery?
• Как подключить библиотеку jQuery 4 к своему сайту?
• В чем разница между файлами compressed, uncompressed и slim?

Для начала создайте на своём компьютере папку jquery/, в ней будут храниться все файлы вашего проекта. В этой папке создайте файл index.html, откройте его с помощью текстового редактора. Я буду работать в текстовом редакторе Visual Studio Code (VS Code), вы можете использовать свой.

В текстовом редакторе создайте небольшую вёрстку (в VS Code проще всего это сделать введя в редакторе восклицательный знак ! и нажав клавишу Tab).

Должен появиться следующий код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

Подключение библиотеки jQuery 4

Подключить библиотеку jQuery 4 к своему сайту можно несколькими способами:

• Через файл (надёжный способ),
• Через CDN (работает если есть интернет),
• Через NPM (для сложных проектов).

В этом уроке рассмотрим два первых способа.

Подключение jQuery 4 через файл

Для того, чтобы подключить файл библиотеки jQuery 4 к HTML-странице (или сайту), его сначала нужно скачать с официального сайта, для этого:

• Перейдите на главную страницу сайта https://jquery.com,
• Нажмите по кнопке Download jQuery,
• Откроется страница загрузки файлов библиотеки https://jquery.com/download/,
• Кликните по ссылке Download the uncompressed development version of jQuery 4.0.0,
• Откроется страница с кодом текущей версией файла jQuery 4: https://code.jquery.com/jquery-4.0.0.js,
• Нажмите по странице правой кнопкой мыши,
• Выберите Сохранить как…,
• Сохраните файл в папку jquery/ (в будущем цифры у файла jQuery могут быть другими, например jquery-4.0.1.js или jquery-4.1.2.js и т.д.).

Подключите файл jQuery:

• Перед закрывающим тегом </body>,
• Вставьте строку <script src="jquery-4.0.0.js"></script>.

Вставьте код проверки работы jQuery:

• Перед закрывающим тегом </body> после строки <script src="jquery-4.0.0.js"></script>, вставьте код проверки подключения библиотеки jQuery: <script> console.log($); </script>.

В итоге, у вас должен получиться следующий код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <!-- Подключаем библиотеку jQuery -->
  <script src="jquery-4.0.0.js"></script>

  <!-- Проверяем подключён ли jQuery -->
  <script>
    console.log($);
  </script>
</body>
</html>

Проверка подключения библиотеки

Проверьте подключилась ли библиотека jQuery (проверка происходит в браузере Google Chrome, в других браузерах может немного отличаться):

• С помощью браузера откройте файл index.html (это делается кликнув два раза по файлу, если файл не открылся в браузере, то кликните правой кнопкой мыши по файлу и выберите Открыть с помощью > Google Chrome),
• Кликните правой кнопкой мыши по открытому браузеру (обычно это белая область),
• Выберите Просмотреть код,
• Откроется инспектор браузера,
• В инспекторе перейдите во вкладку Консоль,
• Если вы подключили jQuery правильно, то в консоли браузера Google Chrome, должен появиться вывод библиотеки jQuery (в других браузерах вывод может отличаться) он начинается с: ƒ ( selector, context ) { ....

Если всё работает, то можете приступать к следующему уроку. Далее информация для тех, кто хочет немного углубиться в урок, но на изучение базового курса эта информация никак не повлияет.

Подключение jQuery 4 через CDN

Вместо использования файла, библиотеку jQuery можно подключить к сайту через CDN. Это легче, но требует постоянного соединения с интернетом.

Для этого:

• Перейдите по ссылке: https://releases.jquery.com/,
• В разделе jQuery 4.x, нажмите по ссылке: uncompressed,
• В открывшемся модальном окне, нажмите сверху справа, по синей кнопке с иконкой бумаг,
• Скопированный код <script src="https://code.jquery.com/jquery-4.0.0.js"></script> разместите вместо кода подключения файла,
• Атрибуты integrity и crossorigin, можно удалить.

В итоге, у вас должен получиться следующий код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <!-- Подключаем библиотеку jQuery через CDN -->
  <script src="https://code.jquery.com/jquery-4.0.0.js"></script>

  <!-- Проверяем подключён ли jQuery -->
  <script>
    console.log($);
  </script>
</body>
</html>

Проверьте подключение библиотеки в консоли браузера. Как мы делали это выше.

В чем разница между файлами uncompressed, minified и slim?

На странице загрузки библиотеки jQuery: https://jquery.com/download/ есть несколько ссылок по которым можно загрузить библиотеку, это uncompressed, minified, slim. Подобные файлы имеются и при работе через CDN: https://releases.jquery.com/. В чем между ними разница?

• uncompressed — это обычный не минифицированный файл, его используют при разработке сайта. Мы будем работать с ним: https://code.jquery.com/jquery-4.0.0.js
• minified — это сжатая минифицированная версия файла: https://code.jquery.com/jquery-4.0.0.min.js в её коде отсутствуют пробелы, переводы строк, имена переменных созданы в виде одной буквы и т.д. Обычно его подключают к уже готовому сайту, чтобы уменьшить размер страницы.
• slim — это файл https://code.jquery.com/jquery-4.0.0.slim.js в котором отсутствуют методы, работающие с:
  • AJAX: https://api.jquery.com/category/ajax/
  • анимациями (эффектами): https://api.jquery.com/category/effects/.
  • Callbacks: https://api.jquery.com/category/callbacks-object/
  • Deferred: https://api.jquery.com/category/deferred-object/
  • Это сделано потому, что некоторые предпочитают работать с AJAX с помощью других библиотек, например Axios, а в качестве анимаций используют CSS-стили.

Файл slim также существует в двух версиях uncompressed и minified.