Как подключить jQuery
Рассмотрим подключение jQuery через CDN и путём скачивания файла с официального сайта.
Подключение jQuery с помощью CDN
CDN — пути доставки контента. При таком подключении файл jQuery не нужно скачивать, т.к. он размещается на серверах, которые располагаются по всему миру. CDN будет иметь неплохое преимущество, если посетитель сайта уже загружал jQuery из этого CDN, то потребности в повторной загрузке не будет.
Рассмотрим несколько самых популярных CDN для подключения.
Заходим на сайт jQuery CDN. Выбираем версию jQuery и вид файла (например, минифицированный).
Вставляем его перед закрывающим тегом head.
Аналогичным образом копируем код нужной версии jQuery с сайта подключения библиотек Google.
Чтобы подключить jQuery, используя сайт Microsoft, перейдём по адресу. Выберем нужную версию и нужный формат кода. Правой кнопкой нажмём на выбранный код и скопируем адрес.
Подключение jQuery путём загрузки файла
Заходим на официальный сайт jQuery. Нажимаем Download jQuery.
Выбираем какой файл хотим скачать (сжатый или несжатый), нажимаем правой кнопкой Сохранить объект как. Сохраняем к себе в папку с сайтом.
В HTML файле перед закрывающим тегом body (иногда требуется подключение в шапке) подключаем файл следующим образом.
В атрибуте src указываем путь до файла.
Полезные ссылки
- Страница для скачивания библиотеки jQuery.
- Страница для подключения jQuery CDN.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
- Git SSH Windows — пошаговое руководство
- Настройка Gulp Babel
- Микроразметка сайта
- Как перенести сайт WordPress на хостинг
- Настройте показ всего текста во время загрузки веб-шрифтов
- Сниппеты в VS Code
Подключение библиотеки jQuery. 4 способа
Подключать библиотеку jQuery можно различными способами. Давайте рассмотрим разные способы.
Способ 1. Скачать в папку и подключить файл
Наиболее распространённый способ, если сайт могут просматривать локально, без подключения сети Интернет (неужели такие еще есть?).
Идем по адресу и жмем большую желто-оранжевую кнопку Download jQuery. Переходим на страницу где выбираем версию jQuery. Желательно выбирать последнюю из доступных (на момент написания статьи – это 2.2.3). Обозначение compressed – означает, что библиотека минимизирована, т.е. занимаем минимум места, но, к сожалению, читать исходных код трудно. Качаем! После сохранения подключаем файл библиотеки. Для моей структуры (все скрипты лежат в папке js), код выглядит следующим образом:
Как подключить jQuery
Первый вопрос, который возникает при начале работы с библиотекой jQuery – как её подключить? Странно, что я не написал об этом ранее и сейчас решил восполнить этот пробел.
В этой статье я расскажу как правильно добавить jQuery на обычном html-сайте и на популярных движках.
- Подключение jQuery со страницы своего сайта
- Подключение jQuery на страницы своего сайта с внешних источников
- Подключение jQuery на WordPress
- Подключение jQuery в Joomla 3
Подключение jQuery со страницы своего сайта
Самый распространенный способ подключения библиотеки. Для начала необходимо скачать свежую версию с сайта разработчика. На странице загрузки представлено несколько вариантов библиотеки, например сейчас предлагается скачать “Compressed, production jQuery 3.1.1” и “Uncompressed, development jQuery 3.1.1”. Первый вариант – это сжатый вариант библиотеки, оттуда удалены все комментарии, в этом случае библиотека занимает намного меньше места, следовательно страница, на которую она будет подключена будет загружаться быстрее. Второй вариант – это, грубо говоря, исходный код библиотеки, он структурирован в удобном для чтения виде с комментариями, и предназначен в первую очередь для разработчиков. Поэтому рекомендую использоваться сжатую версию библиотеки.
После того, как библиотека загружена, необходимо разместить её на сервере, где находятся файлы сайта. Я обычно в корне сайта создаю папку “js” в которую копирую нужные библиотеки и там же размещаю файл со своими функциями.
Теперь можно переходить непосредственно к подключению jQuery. Структура веб-страницы, на которую Вы подключаете jQuery, может быть разной. Но в ней обязательно присутствуют теги HTML, HEAD и BODY. Так вот для подключения jQuery необходимо добавить тег SCRIPT со ссылкой на библиотеку внутрь тега HEAD.
Заголовок сайта
В некоторых случаях, библиотеку подключают перед закрывающимся тегом body, что связанно с порядком обработки html страницы браузером. Поскольку браузер вычитывает строки последовательно, то при подключении jQuery в конце файла вначале браузер отобразит сайт, а затем уже подключит динамику. При медленном соединении, такой подход обеспечивает увеличение скорости загрузки сайта, и уже потом работу слайдеров и остального. Код при таком подключении выглядит так:
Заголовок сайта
Внимание! Желательно не менять название файла библиотеки jQuery (зачастую меняют на jquery.js), так как в дальнейшем сохранение официального названия файла поможет увидеть, какую версию библиотеки Вы используете (в моем примере используется версия 3.1.1).
Подключение jQuery на страницы своего сайта с внешних источников
Данный способ хорош тем, что библиотека подключается с сайта и не валяется на жестком диске. Особенно это актуально при большом количестве маленьких проектов и для обучения.
Этот способ подключения называется “Подключение с CDN”. Сеть доставки контента или как ее чаще называют CDN (Content Delivery Network) является сетью серверов по всему миру. Они помогают улучшить производительность вашего веб-сервера и уменьшают нагрузку на ваш трафик.
Наиболее популярные CDN для подключения jQuery:
Я обычно использую подключение от Google Developers. На странице проекта для нас уже подготовлены несколько сниппетов, достаточно скопировать строчку нужного нам и подключить ее в файл. При таком способе подключения код будет выглядеть так:
Заголовок сайта
Преимуществом данного способа, является то, что многие сайты подключают jQuery через Google API, а это значит, что с большой долей вероятности эта библиотека уже присутствует в кэше браузера пользователя, и она не будет загружаться второй раз вообще.
Подключение jQuery на WordPress
Подключение jQuery в WordPress производится автоматически, поэтому нет никакой необходимости подключать библиотеки других версий вручную. Это происходит в шаблоне с помощью php кода:
В итоге внутри тега HEAD появится строка подключения jQuery.
На момент написания статьи с WordPress поставляется jQuery v1.12.4 Но, как видите, версия библиотеки очень сильно отличается от той, которую подключали в примерах выше. Подключить свежую версию библиотеки возможно, но есть шанс возникновения конфликта.
Чтобы избежать конфликта, но при этом использовать ту версию библиотеки, которая необходима, нужно воспользоваться правильным способом подключения jQuery в файле functions.php:
add_action( 'wp_enqueue_scripts', 'my_jquery_scripts' ); ?>
Тут сначала отключается стандартная библиотека, а потом через Google API подключаем версию 3.1.1
Внимание! Учтите, этот код будет работать только в том случае, если в вашей теме присутствуют wp_head() и wp_footer().
Подключение jQuery в Joomla 3
Подключение jQuery в Joomla 3, так же как и в WordPress производится автоматически, поэтому нет необходимости подключать библиотеку вручную, а нужно использовать специальную конструкцию вызова:
JHtml::_('jquery.framework');
При этом библиотека jQuery будет загружена в режиме “no conlict”. Это означает, что к ней обращаются через пространственное наименование jQuery, а не $.
Для загрузки библиотеки jQuery обычном режиме используйте вызов:
JHtml::_('jquery.framework', false);
Похожие записи
- .dblclick() – обработчик двойного клика мышью
- .keyup() – обработчик возвращения клавиши клавиатуры в ненажатое состояние
- .keydown() – обработчик перехода клавиши клавиатуры в нажатое состояние
- .unbind() – удаление обработчика событий
Урок №3 — Подключение jQuery
В видео уроке мы научимся подключать библиотеку jQuery к проекту. Без подключения jQuery ни одна из встроенных функция работать не будет, поэтому это первое что необходимо рассмотреть.
Видеоурок
При использовании любой сторонней библиотеки необходимо подключать её как отдельный файл внутрь HTML страницы.
Для подключения jQuery можно поступить двумя способами:
- скачать jQuery файл, добавить в проект и далее подключить локально с проекта;
- не скачивать jQuery файл и подключить удаленно с сервера других компаний.
Второй вариант проще, поэтому вы можете перейти по этой ссылке и там будет представлен тег для подключения jQuery на страницы вашего сайта.
Весь код будет доступен после подписки на проект!