Подключаем библиотеку jQuery к вашему сайту
В этой статье, я расскажу, как подключать библиотеку jQuery к вашему сайту.
jQuery – библиотека JavaScript. Она помогает легко получить доступ к элементам DOM-дерева, и манипулировать ими.
В большинстве CMS (системы управления контентом) эта библиотека подключается автоматически. Но если, вы пишите сами свой сайт, то вам необходимо вручную подключать эту библиотеку.
Подключение jQuery со своего сайта
Для начала выберите поддерживаемую версию, совместимую с вашим проектом. Номера в образцах ниже относятся к 2015 году. Ее скачать вы можете с сайта разработчика, а именно jquery.com.
Есть два вида вариантов этой библиотеки – Production и Development. Разницы по функционалу в этих библиотеках нет, только разница в размере загружаемых файлов.
- Development – это исходный код библиотеки со всеми комментариями для разработчиков, и код четко структурирован. И поэтому размер ее составляет порядка 260 килобайт.
- Production – сжатый вид библиотеки, там удалены все комментарии, ненужные пробелы и так далее. Ну и размер соответственно 70 – 100 кбайт, в зависимости от версии библиотеки.
Немного о версиях
В обзоре апреля 2015 года рассматривались две ветки библиотеки — 1.x и 2.x. Их различия касались прежде всего поддержки старых браузеров. Эти ветки больше не поддерживаются.
jQuery 1.x – одна из первых версий библиотек, и обеспечивает совместимость с максимальным количеством браузеров. В апреле 2015 года описывалась версия – 1.11.2.
jQuery 2.x – это ветка, описанная в апреле 2015 года библиотеки, включает в себя API jQuery 1.x, но проблема в том, что нету поддержки нашего «любимого» Internet Explorer версий 6, 7, 8. Последняя версия — 2.1.3.
Подключаем jQuery к странице сайта
Итак, давайте подключим jQuery к нашей странице. Скачаем файл jquery-1.11.2.min.js с сайта jquery.com и перенесем в папку js, в директории нашего сайта.
Для того чтобы подключить библиотеку, нужно прописать путь к файлу в теге SCRIPT, внутри тега HEAD.
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>В итоге наша страница будет иметь вид:
<!DOCTYPE html>
<html lang="RU">
<head>
<meta charset="UTF-8" />
<title>Страница где подключим библиотеку jQuery</title>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
</head>
<body>
Общее "тело" нашей страницы
</body>
</html>Я думаю тут будет всем понятен общий смысл.
Атрибут type говорит, какой тип подключаемого файла. Атрибут src указывает путь к файлу.
Как подключить библиотеку jQuery с внешних источников
Подключение со своего сайта, это только один вариант. И он не так плох, но если смотреть в будущее и задуматься о скорости загрузки сайта, то можно найти и другой путь.
Как вам возможно известно, скачанные файлы сайта, такие как css и javascript, а так же изображения скачиваются в кэш браузера.
В исходной статье 2015 года преимуществом CDN называлось повторное использование файла из кэша после посещения другого сайта. Это историческое объяснение: Chrome с версии 86 разделяет HTTP-кэш по сайтам, поэтому такой переход не гарантирует загрузку без повторного скачивания.
Официальный сайт jQuery
Первый сайт, это конечно же официальный сайт разработчика jQuery — http://code.jquery.com/
На странице вы можете выбрать нужную вам версию, или непосредственно последнюю версию библиотеки. Для этого нужно подключить код к странице сайта:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>Google Libraries API
Второй сервис это всеми знакомый Google.
У Google есть проект – Google Libraries API. Этот проект предоставляет API для разработчиков на JavaScript, и позволяет подключать нужные библиотеки с серверов Google. Поддерживает не только библиотеки jQuery, но и Angular JS, Angular Material, Dojo, Ext Core, jQuery UI и другие.
Для подключения библиотеки с сайта Google используем код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>Подключение с сайта Microsoft
Подключается абсолютно так же, как и с другими сервисами.
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>От себя добавлю, что я редко видел, чтобы библиотека jQuery подключалась от Microsoft.
Заключение
Вот мы и узнали, как подключаются библиотеки к сайту, на примере jQuery. В будущем мы узнаем, как подключаются скрипты и плагины, для расширения функционала нашего сайта.
Уточнения для копирования кода
В исходнике версии 1.11.2 и 2.1.3 названы последними для 2015 года. Старые номера сохранены только в исторических примерах. Для действующего проекта выбирайте совместимую поддерживаемую версию и проверяйте руководство обновления.
Исправлены несовпадающий локальный путь, незакрытый html и HTTP-адреса загрузки. Не рассчитывайте на гарантированный общий кэш между разными сайтами и не используйте URL без закреплённой версии как обещание «последней».
Источники уточнений
Загрузка...
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: