Как подключить библиотеку jQuery

Последнее обновлене - 19 июня 2023 в 16:44

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

Вот какое определение библиотеки jQuery содержится на официальном сайте:

jQuery — это быстрая, небольшая и многофункциональная библиотека JavaScript. Она позволяет сделать намного проще такие вещи, как обход и манипулирование документами HTML, обработку событий, анимацию и Ajax, благодаря простому в использовании API, который работает во множестве браузеров. Благодаря сочетанию универсальности и расширяемости, jQuery изменил способ, которым миллионы людей пишут JavaScript.

Попробуем подключить jQuery и проверить на корректность работы.

Подключение jQuery в HTML

Подключиться можно прямо с официального сайта jQuery. Для этого, перед закрывающим тегом head необходимо разместить такую строку:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

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

Кроме того, можно включить в работу jQuery с CDN Google. Вместо вышеприведённой строчки внести запись:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Подключение jQuery с помощью файла js

Этот способ предусматривает копирование файла с актуальной версией jQuery на свой сервер. На главной странице официального сайта кликнуть по кнопке, как указано на скриншоте.

Появятся ссылки для скачивания. Лучше взять сжатую версию, так как она меньше весит, но работает точно также как и несжатая.

Этот файл закидываем в папку со своим сайтом. Можно создать для файла отдельную папку, например, js, если её до сих пор нет.

Теперь подключим js-файл. Для этого, опять же перед закрывающим тегом head, запишем:

<script src="js/jquery-3.5.1.js"></script>

Здесь важно правильно прописать путь к файлу jquery-3.5.1.js. Если он лежит прямо в корневом каталоге сайта вне каких-либо папок, то код скрипта будет выглядеть так:

<script src="jquery-3.5.1.js"></script>

С помощью файла functions.php

И ещё один альтернативный способ подключения jQuery предложен Kama, который считает, что его вариант наиболее правильный. Суть заключается в том, что в WordPress уже есть программный метод добавления скриптов на страницу при помощи функций, например:

wp_register_script()
wp_enqueue_script()
wp_deregister_script()

Такой метод предотвращает конфликты, когда один и тот же скрипт подключается разными плагинами. Это облегчает работу при оптимизации загрузки js файлов, что уменьшает время загрузки страниц сайта. В этом случае, скрипты можно объединить в один файл. А браузер получит их в сжатом виде.

Для правильного подключения jQuery надо воспользоваться функцией wp_enqueue_script(). Скрипт в данном случае подключается один раз. Файл functions.php необходимо дополнить такими строками:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
wp_enqueue_script( 'jquery' );
}

Теперь, если посмотреть исходный код страницы, то в head появится следующая запись:

<script src='https://your-super-site.ru/wp-includes/js/jquery/jquery.js?ver=3.5.1'></script>

Можно ли подключить jQuery по этому способу с CDN Google? Отличная новость — да! Вот этот код от Kama совершит чудо:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
// отменяем зарегистрированный jQuery
// чтобы отменить jquery-migrate, вместо "jquery-core" вписать "jquery"
wp_deregister_script( 'jquery-core' );
wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
wp_enqueue_script( 'jquery' );
}

Его снова вписываем в файл functions.php. Результат работы кода:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src='http://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

Когда jquery-migrate.js не требуется, но нужен только jQuery, то следует дополнить functions.php таким кодом:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
// отменяем зарегистрированный jQuery
wp_deregister_script('jquery-core');
wp_deregister_script('jquery');
// регистрируем
wp_register_script( 'jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', false, null, true );
wp_register_script( 'jquery', false, array('jquery-core'), null, true );
// подключаем
wp_enqueue_script( 'jquery' );
}

В этом случае увидим лишь такую строку в head:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

В строке 9 «true» означает что скрипт подключится, по возможности, в футер сайта.

И ещё один вариант подключения той версии jQuery, которую использует WordPress. Вот код:

add_action( 'wp_enqueue_scripts', 'my_scripts_method', 99 );
function my_scripts_method() {
// получаем версию jQuery
wp_enqueue_script( 'jquery' );
// для версий WP меньше 3.6 'jquery' нужно поменять на 'jquery-core'
$wp_jquery_ver = $GLOBALS['wp_scripts']->registered['jquery']->ver;
$jquery_ver = $wp_jquery_ver == '' ? '1.11.0' : $wp_jquery_ver;
wp_deregister_script( 'jquery-core' );
wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/'. $jquery_ver .'/jquery.min.js' );
wp_enqueue_script( 'jquery' );
}

Ещё вариант:

Этот код регистрирует и загружает jQuery библиотеку в WordPress.

add_action( 'init', 'true_jquery_register' ); — этот код добавляет действие, которое будет выполнено во время инициализации WordPress. Когда WordPress загрузится и начнет свою работу, функция true_jquery_register() будет вызвана.

if ( !is_admin() ) { — это условие проверяет, не является ли текущая страница страницей администратора WordPress.

wp_deregister_script( 'jquery' ); — это функция отменяет регистрацию стандартной библиотеки jQuery в WordPress.

wp_register_script( 'jquery', ( 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' ), false, null, true ); — эта функция регистрирует новую версию jQuery библиотеки, которая будет загружена с помощью Google CDN.

wp_enqueue_script( 'jquery' ); — этой функцией добавляется зарегистрированный скрипт в очередь загрузки скриптов WordPress. В итоге, данный код заменяет стандартную версию jQuery в WordPress на новую версию, которая будет загружена с помощью Google CDN.

Библиотека jQuery будет загружаться на фронтенд сайта, т.е. на страницы, которые видят пользователи. Это происходит благодаря строке if ( !is_admin() ), которая проверяет, что текущая страница не является страницей администратора WordPress. Если это так, то библиотека jQuery будет зарегистрирована и загружена на страницу.

Библиотека jQuery будет загружена в футере страницы, т.е. перед закрывающим тегом . Это происходит благодаря последнему параметру функции wp_register_script(), который установлен в true. Это означает, что скрипт будет загружаться в футере страницы.

Как проверить работу jQuery на сайте

А как проверить, подключена и работает ли библиотека jQuery на сайте? Сделать это достаточно просто. Можно пойти двумя путями: добавить небольшой скрипт в поле head или body, или воспользоваться возможностями браузера.

В сети нашёл несколько вариантов скриптов для этой цели:

<script>
$(document).ready(function(){
$('body').append('<br/>Этот текст добавлен с помощью jQuery');
});
</script>

Или так:

<script>
$(document).ready(function(){
alert(jQuery.fn.jquery);
});
</script>

Как это работает? Если jQuery подключена, то при переходе на любую страницу своего сайта, мы увидим надпись: «Этот текст добавлен с помощью jQuery».

Ещё один вариант скрипта:

<script>
if (window.jQuery) alert("jQuery подключен");
else alert("jQuery не подключен");
</script>
<script>
$(document).ready(function(){
alert(jQuery.fn.jquery);
});
</script>

Если jQuery не работает, то увидим такое сообщение: «jQuery не подключен».

Есть и более простой способ проверить правильность подключения jQuery. При помощи клавиши F12 вызвать консоль браузера и выполнить следующую команду:

$().jquery

Если увидели цифры, то это и есть версия подключенной jQuery.

Или так:

jQuery.fn.jquery

Попробуйте такой код в консоли:

var msg;
if (window.jQuery) {
msg = 'Вы используете такую версию jQuery: ' + jQuery.fn.jquery;
} else {
msg = 'jQuery не подключена';
}
alert(msg);

Всем WEB!