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