Как подключить JQuery к HTML-документу
JQuery — это крупнейшая библиотека скриптов, позволяющих наполнить сайт интерактивными элементами и добавить интересные дизайнерские функции. Она считается более оптимизированной и производительной, чем использование "чистого" JavaScript. В этой статье подробно рассмотрим, как подключить JQuery к вашей странице.
Где скачать JQuery
Скачивание библиотеки выполняется на официальном сайте. Посмотрите на скриншот ниже. При нажатии на большую оранжевую кнопку вы попадете на страницу, где можно выбрать нужную версию JQuery для своей операционной системы.
На сегодняшний день последняя версия библиотеки — 3.3.1. Предыдущие версии уже не поддерживаются, поэтому если вы пользовались ими раньше, нужно заменить их на последнюю, она оптимизирована под все современные браузеры и будет отображаться корректно.
Выберите любую версию JQuery, которая вам требуется, нажмите на ссылку правой кнопкой мышки, затем нажмите "Сохранить страницу как" — файл сохранится в формате JS.
После скачивания библиотека JQuery будет доступна для работы.
Варианты библиотеки JQuery
Прежде чем подключить JQuery, важно разобраться, какой именно файл будет использован. Дело в том, что данная библиотека доступна в виде двух версий: сжатой и несжатой. Чем они отличаются?
Из сжатой версии убраны все лишние символы, табуляция и пробелы. Это сделано для того, чтобы сократить вес документа, на который будет ссылаться ваша страница при работе с библиотекой. В названии этой версии присутствует .min — это указание на то, что вы используете именно сжатую версию.
В несжатой версии JQuery код расположен так, что позволяет вносить любые требуемые правки, он удобен для отладки. Его также можно подключить к веб-странице, однако использование этой версии может снизить быстродействие сайта.
Подключаем библиотеку к HTML-документу
Есть несколько способов, позволяющих подключить JQuery в HTML.
Самый простой — использование тега <script>, дающего возможность ссылаться на внешние файлы, содержащие JavaScript.
Для того чтобы использовать скачанную библиотеку, поместите файл в папку, где хранятся все остальные файлы вашего сайта. Можно добавить ее в корневую директорию, но лучше создать отдельную папку только для скриптов, это поможет удобнее ориентироваться в структуре страницы.
Далее заходим в HTML-документ и прописываем там код, подключающий JQuery к веб-странице.
Код будет выглядеть так:
<!DOCTYPE html>
<html>
<head>
<script src="/js/jquery.min.js"></script>
</head>
<body>
</body>
</html>Располагается тег <script> с атрибутом src, показывающим на искомый файл, в теге <head>.
Обратите внимание: на этом примере мы подключаем к странице сжатую версию библиотеки JQuery, которая расположена в папке "js" в корневом каталоге сайта. Всегда внимательно прописывайте путь к подключаемым файлам, иначе документ не сможет на них ссылаться.
Таким образом, код нужно будет разместить на всех страницах сайта, где используется JQuery.
Второй способ — через Google подключить JQuery.
Это еще проще: необходимо зайти на сервис Google Developers, в разделе библиотек для оптимизации найти JQuery и скопировать код:
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Этот код ссылается на актуальную версию библиотеки. Его можно прописать либо в тег <head> аналогично предыдущему варианту, либо внизу страницы перед закрывающим тегом </body>.
Этот способ подключения JQuery хорош тем, что не перегружает вашу страницу лишней информацией, а ссылается напрямую на библиотеку на стороннем ресурсе. Сервисы Google достаточно надежны, поэтому можно не волноваться о том, что на вашем сайте что-то перестанет работать. Подключить JQuery таким образом — оптимальный вариант, если вам не требуется отладка исходного кода библиотеки.
Google также ссылается на сжатую версию библиотеки.
JQuery при работе с CMS Wordpress
Большое количество сайтов выполнены на движке Wordpress, он считается наиболее гибким и удобный для разработчиков. Поэтому есть специальный инструмент, позволяющий подключить JQuery к сайту на этой CMS.
Откройте файл functions.php и впишите в него следующий код:
function theme_scripts_method(){
wp_enqueue_script( 'jquery');
}
add_action( 'wp_enqueue_scripts', 'theme_scripts_method' );В заключение
Библиотека Jquery обладает широким функционалом, ее можно использовать для придания веб-странице интерактивности и добавления интересных дизайнерских элементов. Ее используют как новички в создании сайтов, так и опытные разработчики.
Jquery не снижает производительность сайта и очень проста в подключении.