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

Прежде чем использовать библиотеку jQuery, ее необходимо вначале скачать со страницы https://jquery.com/download/, разместить на своем компьютере или сервере, а затем подключить к HTML-документу. Подключение производится с помощью тега <script>, в параметре src которого указывается абсолютный или относительный путь к библиотеке:

<script src="Путь к библиотеке jQuery"></script>

Сам тег <script> может быть размещен в разделе HEAD HTML-документа или в самом конце документа. В первом случае нужно дождаться события готовности документа, прежде чем получать доступ к элементам. Во втором случае документ уже загружен и готов к работе без дополнительных действий по ожиданию события готовности документа.

Библиотеку jQuery можно подгружать с сайта https://ajax.googleapis.com/. В этом случае подключение будет выглядеть так:

<script crossorigin="anonymous" 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>

Если посетитель ранее заходил на другой сайт, на котором библиотека jQuery также подгружалась с сайта https://ajax.googleapis.com/, то Web-браузер не будет повторно загружать библиотеку и использует данные, сохраненные в кеше. Таким образом, скорость работы вашего сайта может увеличиться. В этом и заключается преимущество данного метода. Однако если сайт https://ajax.googleapis.com/ не будет доступен, то возможны проблемы.

Можно также воспользоваться сайтом https://code.jquery.com/:

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

Перед установкой библиотек создадим следующую структуру каталогов:

book\
    css\
    img\
    js\

Каталог book лучше разместить в корне какого-либо диска. В моем случае это будет диск C:, следовательно, путь к содержимому каталога: C:\book. Можно создать каталог book и в любом другом удобном месте, т. к. мы будем указывать относительный путь до библиотек, а не абсолютный.

Внутри каталога C:\book нужно создать три вложенных каталога:

• css — в этом каталоге мы разместим файлы каскадных таблиц стилей (CSS);
• img — в этом каталоге мы станем сохранять изображения и значки;
• js — в этом каталоге мы разместим файлы программ на языке JavaScript.

Теперь приступим к загрузке всех необходимых файлов. Для загрузки библиотеки Bootstrap переходим на сайт https://getbootstrap.com/ и нажимаем кнопку Download. На открывшейся странице представлены все варианты получения библиотеки. Переходим в раздел Source files и нажимаем кнопку Download source, чтобы загрузить все исходные файлы библиотеки в виде архива. Прямая ссылка на архив: https://github.com/twbs/bootstrap/archive/v4.5.2.zip. Если нужны только сжатые файлы, то можно скачать архив из раздела Compiled CSS and JS. Распаковываем загруженный архив в какой-либо каталог. Сжатые файлы в архиве с исходными файлами расположены в каталоге dist. Если скачать архив из раздела Compiled CSS and JS, то его содержимое и есть содержимое каталога dist.

Итак, копируем файл bootstrap.min.css из каталога dist\css архива в каталог C:\book\css. Код для подключения файла стилей в файле C:\book\test.html будет выглядеть следующим образом (код размещаем в разделе HEAD HTML-документа):

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

Далее копируем файлы bootstrap.min.js и bootstrap.bundle.min.js из каталога dist\js архива в каталог C:\book\js. Код для подключения файла bootstrap.min.js в файле C:\book\test.html будет выглядеть следующим образом (код размещаем в самом конце HTML-документа после подключения библиотеки jQuery):

<script src="js/bootstrap.min.js"></script>

Файл bootstrap.bundle.min.js содержит код файла bootstrap.min.js, а также код библиотеки Popper.js. Поэтому подключать одновременно эти файлы нельзя. Библиотека Popper.js понадобится при работе с некоторыми компонентами, реализующими различные всплывающие элементы, например, подсказки. Можно скачать библиотеку Popper.js с сайта https://popper.js.org/ и подключить ее отдельно перед подключением файла bootstrap.min.js, но мы будем просто подключать файл bootstrap.bundle.min.js вместо файла bootstrap.min.js:

<script src="js/bootstrap.bundle.min.js"></script>

Для загрузки библиотеки jQuery переходим на страницу https://jquery.com/download/ и скачиваем файл jquery-3.5.1.min.js или сразу загружаем файл по ссылке https://code.jquery.com/jquery-3.5.1.min.js. Переименовываем файл jquery-3.5.1.min.js в jquery.min.js и сохраняем в каталоге C:\book\js. Подключение библиотеки jQuery в файле C:\book\test.html будет выглядеть следующим образом (подключение выполняется перед файлом bootstrap.min.js или bootstrap.bundle.min.js):

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

Таким образом структура файлов и каталогов будет выглядеть так:

C:\book\
    css\
        bootstrap.min.css
    img\
    js\
        bootstrap.min.js
        bootstrap.bundle.min.js
        jquery.min.js

Чтобы сократить объем кода в книге, далее в примерах мы будем использовать шаблон из листинга 1.0.

Листинг 1.0. Шаблон HTML-документа

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>Шаблон HTML-документа</title>
</head>
<body>

   <!-- Сюда вставляем HTML-код -->

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script>
// Сюда вставляем код на JavaScript
console.log('jQuery v' + $.fn.jquery);
console.log('Bootstrap v' + $.fn.tooltip.Constructor.VERSION);
</script>
</body>
</html>

Когда увидите такой код:

<div>Текст 1</div>
<div>Текст 2</div>

$('div').wrapInner('<b></b>');

Это означает, что инструкции до символа … нужно размещать внутри документа после комментария:

<!-- Сюда вставляем HTML-код -->
<div>Текст 1</div>
<div>Текст 2</div>

Инструкции после символа … размещаем внутри тега <script> после комментария:

// Сюда вставляем код на JavaScript
$('div').wrapInner('<b></b>');

Обновляем Web-страницу и смотрим результат в окне или в консоли.

Учебник по jQuery и AJAX в формате PDF