Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Подключение библиотеки 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-страницу и смотрим результат в окне или в консоли.
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов