Как подключить jquery в html

Как подключить JQuery к HTML-документу

JQuery — это самая объемная и популярная библиотека скриптов для того, чтобы максимально дополнить функционал веб-страницы. Ее использование считается во многих случаях более предпочтительным, чем написание отдельных скриптов для сайта, потому что данную библиотеку отличает надежность и возможность работы во всех браузерах, в том числе, на их старых версиях. Также использование JQuery оптимизирует работу сайта и создает гораздо меньшую нагрузку, чем «чистый» код на JavaScript.

В этой статье мы разберемся, как подключить JQuery к вашему сайту.

Как скачать JQuery

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

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

Соответственно, мы можем видеть, что последняя версия библиотеки Jquery на сегодняшний день (октябрь 2018 года) — v3.3.1. Рекомендуется следить за обновлениями и регулярно подключать актуальную версию, чтобы избежать ошибок в отображении информации на сайте.

После того, как файл скачан, его нужно разместить в директории на хостинге, где выложены другие файлы сайта. Если веб-страница еще не выложена в сеть, а находится на компьютере, скачанный файл просто помещают в соответствующую папку. Если она уже перенесена на сервер, то нужно воспользоваться любым файловым менеджером для переноса данных (к примеру, WinSCP или FileZilla).

Для хранения JS-скриптов лучше выделить отдельную папку. В нее переносится и JQuery.

Подключение скачанной библиотеки

Как подключить библиотеку JQuery в HTML документ. Сначала откройте в любом редакторе текста или кода все HTML страницы вашего сайта. В том случае, если вы проводите работу на какой-либо CMS, требуется зайти в раздел, где вносятся изменения в блок head.

Далее в области вводится следующий код со ссылкой, которая указывает, как подключить скрипты JQuery и ведет в соответствующую директорию.

Выглядеть это будет следующим образом:

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

JQuery - библиотека готовых решений на языке JavaScript, позволяющая легко добавить на страницу интерактивность. Она состоит из набора функций, упрощающих процесс написания кода. Разработка сайта с использованием jQuery упрощается тем, что для выборки элементов в этой библиотеке используется CSS. Программистам, знакомым с CSS, намного удобнее работать с готовыми функциями, а не писать сложный JS-код.

Преимущества jQuery

Многие решения уже созданы, потому верстальщикам нет смысла тратить время на написание кода с нуля. В процессе работы над проектом часто возникают ситуации, когда необходимо оперативно добавить на сайт какой-то функционал, уже разработанный кем-то другим. Редкий заказчик оценит по достоинству код для слайдера, написанный за 10 часов на чистом JavaScript, если намного быстрее подключить jQuery или добавить фреймворк – часть уже написанного кода, и получить удобный интерактивный элемент за пару минут. После этого достаточно применить готовый слайдер к выбранным элементам. Тем самым программист экономит время заказчика и свое собственное, не тратя его на «создание велосипеда».

При помощи библиотеки создаются галереи, слайд-шоу, можно добавлять на страницу разнообразные эффекты и работать с AJAX (асинхронными запросами к серверу). JQuery поддерживает кроссбраузерность, облегчает работу с событиями и легко подключается.

Рассмотрим, как подключить jQuery в HTML на примере создания слайдера. Для этого достаточно выполнить пять простых шагов:

1. Открыть HTML-код страницы, где будет размещен интерактивный элемент.
2. Создать функционал для реализации кода. Добавить ссылки на изображения, которые будут перемещаться в слайдере.
3. Перейти на официальный сайт библиотеки jQuery и скачать ее на компьютер. Если подключать ее через ссылку, в какой-то момент она может перестать работать, потому использование скачанного скрипта надежнее.
4. Перетащить полученный файл в папку с проектом.
5. Теперь требуется подключить jQuery – сделать это можно способом, похожим на подключение стилей CSS. В тег head добавляем скрипт и прописываем его адрес. Он выглядит примерно так:

Как правильно подключить jQuery и другие скрипты к Вордпресс

Разгребая чужой код, иногда нарываешься на такие «интересные» решения, что буквально впадаешь в ступор. Недавно на одном сайте видел, как jQuery подключался несколько раз на странице. Думаю, нужно рассказать, как это правильно делается в Вордпресс.

У разработчика не было злого умысла, он пошел на это скорее всего по своей неопытности — используемая им карусель jQuery Roundabout 2.4.2 очень старая, и со свежей версией jQuery некорректно работала анимация. Точнее, не работала совсем. К сожалению, он не нашел ничего лучшего, как перед загрузкой карусели прямо в коде загрузить старую версию jQuery 1.7.1. Про консоль браузера, в которую посыпалась куча ошибок, этот горе-разработчик видимо не слышал. Многие ошибки были критические и положили часть функционала сайта. Именно по этой причине, сайт попал ко мне в работу.

Как подключить jQuery к Вордпресс

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

Если в HTML-коде сайта нет упоминаний о jQuery, значит инициируем его подключение в файле functions.php активной темы. jQuery в Вордпресс подключается проще всего, т.к. он зарегистрирован по-умолчанию, его можно загрузить сразу по имени-ярлыку ‘jquery’.

wp_enqueue_script('jquery');

Как подключить к Вордпресс другой jQuery

Рассмотрим другую ситуацию, когда jQuery уже подключен в теме или плагине, а нужна его другая версия или необходимо загрузить jQuery из другого источника, например, с CDN.

Сначала нужно дерегистрировать ранее загруженный jQuery.

wp_deregister_script('jquery');

А затем зарегистрировать новый. Например, так:

wp_register_script('jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js', false, null); wp_enqueue_script('jquery');

Напомню, функция wp_register_script() имеет несколько параметров: wp_register_script($handle, $src, $deps, $ver, $in_footer);

• $handle — ярлык, уникальное имя скрипта;
• $src — путь к скрипту;
• $deps — массив скриптов от которых зависит загружаемый скрипт;
• $ver — версия;
• $in_footer — загрузка скрипта в футере.

Как подключить к Вордпресс другие скрипты

С другими скриптами тоже ничего сложного нет. Допустим, у нас есть некий скрипт script.js, который лежит в директории /js/ активной темы. Он подключается аналогично в functions.php, указываем путь и придумываем уникальный ярлык ‘myscript’, например.

wp_enqueue_script('myscript', get_template_directory_uri() . '/js/script.js');

В заключение

Никогда не подключайте в Вордпресс скрипты напрямую, обязательно регистрируйте их. Даже если кажется, что всё работает, после установки очередного плагина, могут посыпаться ошибки.

И возвращаясь к jQuery Roundabout. Чтобы карусель работала со свежими версиями jQuery, в коде Roundabout нужно найти такую строку:

newBearing = methods.normalize.apply(null, [newBearing]);

и заменить её на такой код:

if (true) { newBearing = passedData.start + ((bearing - passedData.start) * newBearing); }

Ничего сложного.

Всё самое новое и интересное из мира Вордпресс в моём Телеграм-канале. Подписываемся!

---

Смотрите также

• 
  Троеточие css в конце
• 
  Как быстро пронумеровать строки в word
• 
  Как в word 2010 сделать альбомную страницу
• 
  Solid в css
• 
  Как html перевести в jpg
• 
  Как в word очистить список последних документов
• 
  Как преобразовать файлы pdf в word
• 
  Как установить на ubuntu php
• 
  Как в word писать над чертой
• 
  Как в word отключить режим ограниченной функциональности
• 
  Цвет фона в css