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

Урок №3 — Подключение jQuery

В видео уроке мы научимся подключать библиотеку jQuery к проекту. Без подключения jQuery ни одна из встроенных функция работать не будет, поэтому это первое что необходимо рассмотреть.

Видеоурок

При использовании любой сторонней библиотеки необходимо подключать её как отдельный файл внутрь HTML страницы.

Для подключения jQuery можно поступить двумя способами:

• скачать jQuery файл, добавить в проект и далее подключить локально с проекта;
• не скачивать jQuery файл и подключить удаленно с сервера других компаний.

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

Весь код будет доступен после подписки на проект!

Подключаем jQuery. Версии jQuery

jQuery — это библиотека функций, которая позволяет очень простым способом манипулировать элементами DOM (Объектной Модели документа — Document Object Model), добавляя интерактивность на html-страницу и отправлять данные с помощью AJAX. Эта библиотека имеет небольшой вес, она кроссбраузерна, т.е. позволяет использовать один и тот же код, не задумываясь, а будет ли он работать в Chrome, Safari, Edge (Internet Explorer) или в Mozilla Firefox. И еще-она позволяет очень просто использовать выборки элементов по селекторам css и фильтрам и манипулирование коллекциями элементов.

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

Например, получение или изменение текста внутри элемента в JS доступно с помощью свойства textContent , а в jQuery — с помощью функции text(). Свойство innerHTML в JavaScript позволяет не только получать или изменять текст, но еще и использовать html-теги. В jQuery на замену этому свойству приходит функция html() . Свойство value для элементов форм в jQuery трансформировалось в метод val() . И таких примеров можно привести еще много.

Скачать эту библиотеку вы можете на официальном сайте https://jquery.com/. Именно на нем вы найдете последнюю версию, а также все предыдущие, нажав на кнопку Download jQuery.

Подключаем jQuery

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

Как подключить 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

Первый вопрос, который возникает при начале работы с библиотекой 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() – удаление обработчика событий