Как подключить 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 является самым распространенным, но в некоторых случаях может незначительно снижать быстродействие сайта.

JS рисунок

Подключение 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 вордпресс

Использование 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 картинка

Заключение

Итак, мы рассмотрели основные методы и узнали, как подключить скрипты JQuery к HTML-документу. В зависимости от поставленных целей и задач, а также опираясь на вопрос личного удобства, можно использовать любой вариант из предложенных.

Библиотека JQuery — это отличный способ расширить функционал сайта, не теряя в производительности.

Статья закончилась. Вопросы остались?
Комментарии 0
Подписаться
Я хочу получать
Правила публикации
Редактирование комментария возможно в течении пяти минут после его создания, либо до момента появления ответа на данный комментарий.