Как проверить правильно ли подключена библиотека jQuery
В прошлой статье я рассказал как подключить библиотеку jQuery. Но как проверить, всё ли правильно сделано и подгрузилась ли библиотека? А так же, как узнать используемую версию jQuery на странице сайта, я расскажу в этой статье.
Способ №1 — Опытный путь
Тут всё просто. К примеру, вы подключаете плагин Слайдшоу, пусть будет bxSlider. Этот слайдер выводит слайдер контента на странице сайта.
Добавили библиотеку к странице:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>Подключили необходимые CSS стили и JavaScript плагин:
<!--Javascript плагин bxSlider-->
<script src="/jscript/jquery.bxslider.min.js"></script>
<!-- Стили CSS bxSlider -->
<link href="/css/jquery.bxslider.css" rel="stylesheet" />Выполнили разметку, точно как по инструкции:
<ul class="bxslider">
<li><img src="/images/Изображение_1.jpg" /></li>
<li><img src="/images/Изображение_2.jpg" /></li>
<li><img src="/images/Изображение_3.jpg" /></li>
<li><img src="/images/Изображение_4.jpg" /></li>
</ul>И прописали скрипт запуска:
$(document).ready(function(){
$('.bxslider').bxSlider();
});И если все запустилось, и слайдер отобразился без ошибок — логично предположить что jQuery библиотека подключена правильно.
Способ №2 — Простой скрипт вывода версии jQuery
Этот способ чем-то похож по смыслу со способом, описанным выше.
Предлагаю вашему вниманию такой код:
<script>
$(document).ready(function(){
alert('Ваша версия jQuery ' + jQuery.fn.jquery);
});
</script>Этот код нужно вставить в любой части странице, после подключения самой библиотеки. Например в теге BODY.
Задача скрипта показать версию вашей библиотеки jQuery.
Метод проверки:
- Вставить вышеприведенный код в теге BODY
- Сохранить код страницы сайта
- Обновить страницу.
Если будет выведено такое окошко, значит библиотека jQuery подключена.
Ну а если этого не произошло, значит что-то не так, и вам нужно перепроверить правильность пути к файлу библиотеки. Не забывая при этом сохранять изменения, и обновлять страницу в браузере.
Способ №3 — Консоль разработчика в браузере
Это один из простейших способов узнать правильно ли всё подключено, и какая версия библиотеки используется. Для этого нужно воспользоваться так называемой Консолью разработчика встроенного в браузеры.
Эта функция есть в таких браузерах как: Google Chrome, Opera, Internet Explorer, Mozilla Firefox. Упоминая эти браузеры я имею ввиду последние их версии, на момент написания этой статьи.
Как зайти в консоль разработчика:
Google Chrome (версия 42)
Нажимаем клавишу F12 — Откроется Панель разработчика — Вкладка Console.
Internet Explorer (версия 11)
Клавиша F12 — Панель разработчика — Вкладка Консоль
Opera (версия 28)
Комбинация: Ctrl+Shift+I — Запуститься Панель разработчика — Вкладка Console
Mozilla Firefox (версия 37)
Клавиша F12 — Панель разработчика — Консоль
Код проверки jQuery
В консоли разработчика есть поле ввода, отмеченное знаком > . В это поле нужно ввести данный код полностью:
javascript:(function(){
var message;
if (window.jQuery) {message = 'Здесь используется jQuery версия: ' + jQuery.fn.jquery;} else
{message = 'jQuery не используется!';}
alert(message);})();;Тут, так же как и в способе №2 будет выводиться окошко с сообщением используемой версии. Если jQuery библиотека не подключена, то будет выведено окошко с сообщением «jQuery не используется!»
Так же вы можете ввести код из способа №2:
$(document).ready(function(){
alert('Ваша версия jQuery ' + jQuery.fn.jquery);
});Разница лишь в том, что при отсутствии использования библиотеки сообщения об этом не будет.
Заключение
Как видите выбор довольно не плохой. На мой взгляд самый универсальный именно способ №3. С помощью консоли можно проверить не только свой сайт, но и посмотреть какая версия используется на других сайтах. К тому же, в будущем вам очень пригодиться навык использования этой консоли в будущем. Не зря же ее называют Консолью разработчика .
Что доказывает проверка
Отсутствие alert не доказывает неправильный путь к файлу: возможны noConflict, ограничения CSP, порядок загрузки или другая ошибка JavaScript. Проверьте загрузку файла в Network и первую ошибку в Console. Успешный bxSlider подтверждает работу конкретного примера, а не отсутствие всех проблем.
Для проверки версии используйте window.jQuery && window.jQuery.fn.jquery. При noConflict переменная $ может принадлежать другой библиотеке. Старые номера версий в образцах — исторические.
Источники уточнений
Загрузка...
