Подключение библиотеки jQuery к HTML-документу – необходимый шаг перед началом работы. Рассмотрим два основных способа: загрузка с официального сайта и использование CDN Google.
Загрузка jQuery с официального сайта
Официальным сайтом jQuery является jquery.com. На главной странице раздела «Download» можно скачать сжатую (jquery.min.js) или несжатую версию библиотеки. Сжатая версия имеет меньший размер (примерно 96 Кб против 284 Кб у несжатой), так как не содержит пробелов и отступов, что делает её нечитаемой для человека, но оптимальной для браузера. Несжатая версия удобна для чтения, но значительно больше по размеру. В практической работе рекомендуется использовать сжатую версию.
Подключение jQuery к документу осуществляется через тег <script>:
<script type="text/javascript" src="path/to/jquery.min.js"></script>
Замените path/to/jquery.min.js на путь к скачанной jquery.min.js.
Подключение jQuery через CDN Google
Более удобный способ – использование CDN (Content Delivery Network) Google. Google предоставляет сжатую версию библиотеки по адресу:
//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
В этом адресе:
- 3.6.0 – номер версии jQuery. Номер версии может меняться.
- jquery.min.js – указывает на сжатую версию библиотеки.
Для подключения через CDN Google вставьте следующий код в HTML-документ:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Этот способ не требует загрузки и хранения файла jQuery на сервере. Google гарантирует доступность и высокую скорость загрузки. Для работы необходим доступ в интернет.
Проверка подключения и пример использования
После подключения jQuery можно проверить его работоспособность. Создадим простой блок с id «test» и присвоим ему обработчик события click, который будет скрывать этот блок с помощью функции hide():
<div id="test">Тестовый блок</div>
<script>
$("#test").click(function(){
$(this).hide();
});
</script>
В этом коде:
- $("#test") – селектор jQuery, выбирающий элемент с id «test».
- .click(function(){…}) – присваивает обработчик события клика.
- $(this).hide(); – скрывает элемент, на который был совершен клик (блок с id «test»).
Этот пример демонстрирует краткость и удобство использования jQuery по сравнению с нативным JavaScript.
Рассмотрены два способа подключения библиотеки jQuery: загрузка с официального сайта и использование CDN Google. Второй способ удобнее, так как не требует загрузки файла и обеспечивает высокую доступность. Проверка работоспособности может быть выполнена с помощью простого примера, демонстрирующего использование основных функций jQuery.