Подключение библиотеки jQuery. 4 способа
Подключать библиотеку jQuery можно различными способами. Давайте рассмотрим разные способы.
Способ 1. Скачать в папку и подключить файл
Наиболее распространённый способ, если сайт могут просматривать локально, без подключения сети Интернет (неужели такие еще есть?).
Идем по адресу и жмем большую желто-оранжевую кнопку Download jQuery. Переходим на страницу где выбираем версию jQuery. Желательно выбирать последнюю из доступных (на момент написания статьи – это 2.2.3). Обозначение compressed – означает, что библиотека минимизирована, т.е. занимаем минимум места, но, к сожалению, читать исходных код трудно. Качаем! После сохранения подключаем файл библиотеки. Для моей структуры (все скрипты лежат в папке js), код выглядит следующим образом:
<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Document</title> <!—Подключаем библиотеку—> <script src=»js/jquery-2.2.3.min.js»></script> </head> <body> </body> </html>
<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Document</title> <!—Подключаем библиотеку—> <script src=»js/jquery-2.2.3.min.js»></script> </head> <body> </body> </html> |
Так выглядит структура проекта, библиотеку jQuery скачали в папку js
В некоторых случаях, библиотеку подключают перед закрывающимся тегом
<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Document</title> </head> <body> <!—Подключаем библиотеку—> <script src=»js/jquery-2.2.3.min.js»></script> </body> </html>
<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Document</title> </head> <body>
<!—Подключаем библиотеку—> <script src=»js/jquery-2.2.3.min.js»></script> </body> </html> |
Какой из способов лучше? Это вопрос философии и привычки. Второй способ, используется в фреймворке materialize
Способ 2. Подключаем напрямую с CDN
Данный способ хорош тем, что библиотека подключается с сайта и не валяется на жестком диске. Особенно это актуально при большом количестве маленьких проектов и для обучения.
Для подключения рекомендую использоваться подключение от Google Developers, обычно я нахожу данную страницу по ссылке jquery google. Наша задача скопировать строку:
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»></script>
и подключить ее в файл. Выглядит это так:
<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Document</title> <!—Подключаем библиотеку—> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»></script> </head> <body> </body> </html>
<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Document</title> <!—Подключаем библиотеку—> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»></script> </head> <body> </body> </html> |
Второй способ подключения, перед закрывающимся тегом body:
<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Document</title> </head> <body> <!—Подключаем библиотеку—> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»></script> </body> </html>
<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Document</title> </head> <body> <!—Подключаем библиотеку—> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»></script> </body> </html> |
Все просто!
w3.org.ua
jQuery — Как подключить jQuery?
Подключаем jQuery со страницы своего сайта
И так, ситуация первая. Предположим, что у Вас есть сайт (не важно где, на локальном или реальном хостинге). Вы сами пишете этот сайт или его страницу, то есть не используете никаких CMS (систем управления сайтом), как WordPress. И вот, Вы хотите
1. Загружаем свежую версию jQuery
Самое первое, что стоит сделать, это скачать её свежую версию с сайта разработчика. Там, сразу на главной странице, нам предложат 2 варианта jQuery (PRODUCTION и DEVELOPMENT). По функциональности эти варианты идентичны. Вариант “DEVELOPMENT” («разработка») — это, грубо говоря, исходный код этой библиотеки, он структурирован в удобном для чтения виде с кучей комментариев, и предназначен в первую очередь для разработчиков, которые захотят посмотреть, как всё устроено внутри jQuery, что-то там изменить или найти ошибки. Вариант “PRODUCTION” — это сжатый вариант библиотеки, оттуда удалены все комментарии, и этот вариант занимает намного меньше места (32Кб против 250Кб), следовательно страница, на которую будет подключена эта библиотека, будет загружаться быстрее. Так что советую Вам выбрать именно эту версию. Затем надо будет нажать кнопку «Download». Скорее всего, перед Вами появиться jQuery в текстовом виде, и библиотеку можно будет сохранить в нужное место через меню браузера «Сохранить страницу как».
2. Закачиваем jQuery на сайт
Затем библиотеку необходимо «положить» в какое-то место на сайте, то есть закачать на сайт. Если Вы используете реальный хостинг, то сделать это можно, загрузив jQuery через панель управления сайта, или же через FTP. Далее будем считать, что в главной директории Вашего сайта есть поддиректория “javascript”, в которую складываются всякие библиотеки, и jQuery Вы тоже положили туда.
Если Вы используете локальный хостинг типа Денвера, тогда тоже можно создать директорию “javascript” в корневом каталоге Вашего сайта, и скопировать туда библиотеку.
3. Создаём веб-страницу и вставляем туда ссылку на jQuery
Структура веб-страницы, на которую Вы подключаете jQuery, может быть разной. Но в ней обязательно присутствуют теги HTML, HEAD и BODY. Так вот, подключить jQuery можно, если добавить тег SCRIPT со ссылкой на библиотеку внутрь тега HEAD.
<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>
После добавления, Ваша страница может иметь такой вид:
<!DOCTYPE html> <html dir="ltr" lang="ru-RU"> <head> <meta charset="UTF-8" /> <title>Страница, на которую я подключаю jQuery</title> <script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script> </head> <body> Контент моей страницы </body> <html>
Значение атрибута SRC тега script указывает на путь к внешнему JavaScript, который необходимо подключить на страницу. Обычно так подключается любой внешний JavaScript (хотя не обязательно вставлять тег SCRIPT именно в секцию HEAD, но так принято делать). В нашем случае внешним JavaScript-ом является библиотека jQuery. На момент написания статьи последняя версия jQuery — 1.7.2, но когда Вы будете читать эту статью, ситуация может измениться, следовательно, обратите внимание на имя скачанного файла js и подставьте его в код.
web-answers.ru
Как подключить библиотеку jQuery к вашему сайту
В большинстве CMS (системы управления контентом) эта библиотека подключается автоматически. Но если, вы пишите сами свой сайт, то вам необходимо вручную подключать эту библиотеку.
Подключение jQuery со своего сайта
Итак, для начала нужно непосредственно скачать свежую версию. Ее скачать вы можете с сайта разработчика, а именно jquery.com.
Есть два вида вариантов этой библиотеки – Production и Development. Разницы по функционалу в этих библиотеках нет, только разница в размере загружаемых файлов.
- Development – это исходный код библиотеки со всеми комментариями для разработчиков, и код четко структурирован. И поэтому размер ее составляет порядка 260 кбайт.
- Production – сжатый вид библиотеки, там удалены все комментарии, ненужные пробелы и так далее. Ну и размер соответственно 70 – 100 кбайт, в зависимости от версии библиотеки.
Немного о версиях
Если обобщить, то существует две версии этой библиотеки. Разница между ними в основном в совместимости браузеров.
jQuery 1.x – одна из первых версий библиотек, и обеспечивает совместимость с максимальным количеством браузеров. На данный момент последняя версия – 1.11.2.
jQuery 2.x – это последняя выпущенная версия библиотеки, включает в себя 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.9.1.min.js»></script>
<script type=»text/javascript» src=»js/jquery-1.9.1.min.js»></script> |
В итоге наша страница будет иметь вид:
<!DOCTYPE html> <html lang=»RU»> <head> <meta charset=»UTF-8″ /> <title>Страница где подключим библиотеку jQuery</title> <script type=»text/javascript» src=»js/jquery-1.9.1.min.js»></script> </head> <body> Общее «тело» нашей страницы </body> <html>
<!DOCTYPE html> <html lang=»RU»> <head> <meta charset=»UTF-8″ /> <title>Страница где подключим библиотеку jQuery</title>
<script type=»text/javascript» src=»js/jquery-1.9.1.min.js»></script>
</head> <body>
Общее «тело» нашей страницы
</body> <html> |
Я думаю тут будет всем понятен общий смысл.
Атрибут type говорит, какой тип подключаемого файла. Атрибут src указывает путь к файлу.
Как подключить библиотеку jQuery с внешних источников
Подключение со своего сайта, это только один вариант. И он не так плох, но если смотреть в будущее и задуматься о скорости загрузки сайта, то можно найти и другой путь.
Как вам возможно известно, скаченные файлы сайта, такие как css и javascript, а так же изображения скачиваются в кэш браузера.
Положительный момент в том, что если на каком-то другом сайте использовалась та же, библиотека jQuery, то при переходе на ваш сайт браузер не будет скачивать его заново, а это повышает скорость загрузки страницы.
Для такого случая, существуют разнообразные сервисы с библиотеками jQuery. С помощью этих сервисов, можно подключить самую последнюю версию библиотеки. А так как многие разработчики пользуются этими сервисами, шанс того что эта же версия уже будет у посетителя сайта повышается.
Официальный сайт jQuery
Первый сайт, это конечно же официальный сайт разработчика jQuery — http://code.jquery.com/
На странице вы можете выбрать нужную вам версию, или непосредственно последнюю версию библиотеки. Для этого нужно подключить код к странице сайта:
<script type=»text/javascript» src=»http://code.jquery.com/jquery-2.1.3.min.js»></script>
<script type=»text/javascript» src=»http://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 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/jquery.min.js»></script>
<script type=»text/javascript» src=»https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js»></script> |
Здесь главное в 1 – это показатель версии. А именно указывает на то что будет использовать библиотека последней версии jQuery 1.
Подключение с сайта Microsoft
Подключается абсолютно так же, как и с другими сервисами.
<script type=»text/javascript» src=»http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js»></script>
<script type=»text/javascript» src=»http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js»></script> |
От себя добавлю, что я редко видел, чтобы библиотека jQuery подключалась от Microsoft.
Заключение
Вот мы и узнали, как подключаются библиотеки к сайту, на примере jQuery. В будущем мы узнаем, как подключаются скрипты и плагины, для расширения функционала нашего сайта.
hi-blog.ru
Как подключить jQuery
Сейчас появилось много плагинов, использующих скрипты Java. Одной из самых популярных библиотек скриптов является jQuery. Наверняка вы слышали и читали о ней. При установке этих новомодных плагинов требуется наличие подключенной библиотеки jQuery. Эта библиотека позволяет творить просто чудеса, снабжая блог фантастически красивыми эффектами и большими возможностями.
Я, как ничего в этом не понимающий профан, долго и упорно смотрел на надпись “подключите jQuery”, которую выдавали мне многие инструкции по установке плагинов. И в один прекрасный момент я сказал себе: хватит смотреть на это, как баран на новые ворота — пора действовать! Я решил разобраться с этим раз и навсегда, поэтому и выкладываю инструкцию, как подключить jQuery к вашему блогу, написанную простым, человеческим языком (я очень постараюсь).
Всего три простых шага, на выполнение которых уйдет максимум три минуты — и библиотека jQuery будет подключена.
Шаг первый
Для начала скачиваем библиотеку jQuery с сайта разработчиков.
В большинстве браузеров скачивается файл, название которого выглядит примерно так: jquery-1.4.2.min.js
Однако в некоторых браузерах этот файл не скачивается, а открывается, как обычный текстовый. И это понятно, ведь он и является по сути обычным текстовым файлом.
Если вместо скачивания файл пытается открыться, то в окне, которое показывает содержимое этого файла, скопируйте путь к нему,
а потом воспользуйтесь менеджером закачки.
Шаг второй
Все, файл у нас. Его нужно записать на сайт. Для этого воспользуйтесь FTP-менеджером. Если не знаете, какой выбрать, то посмотрите, что я советовал по этому поводу. Обычно js-скрипты записываются в специальную папку, которая находится в папке с вашей темой. Я, например, обзываю эту папку JS, и закачиваю в нее все нужные мне скрипты. Так и поступим с jQuery.
Шаг третий
Все, файл на нашем сайте, и теперь осталось только подключить его. При открытии страниц блога в браузере первым делом загружается все, что прописано в файле header.php (находится в папке вашей темы оформления). Вот с этим файлом и будем работать. Откройте его и найдите такие строчки:
<html xmlns="http://www.w3.org/1999/xhtml" >
Вот сразу после них нужно вставить указание подгружать библиотеку jQuery:
<script type="text/javascript" src="/js/jquery-1.4.2.min.js">
Обратите внимание на эту строчку, особенно на то, что записано в простых скобках внутри src=”…” — это путь к библиотеке, которую мы загрузили на сайт. Код автоматически вставляет путь к теме, которую вы используете, а js — это и есть та папка, которая находится в папке вашей темы, и в которую мы закачали файл.
Все, библиотека jQuery подключена. Вот ради этой одной строчки я написал всю эту “простыню” сверху.
Важное послесловие
Если вы уже поняли, можно вообще не закачивать библиотеку jQuery к себе на сайт, а просто прописать эту одну строчку, в которой в качестве пути к файлу указать прямую ссылку на него (то, откуда мы его скачали). Однако, если по каким-либо причинам браузер посетителя не сможет достучаться до места, где лежит библиотека jQuery (например, власти перекроют доступ к зарубежным сайтам), то ваш блог будет работать с ошибками. Поэтому я бы все же крайне рекомендовал закачивать файл к себе на сайт, чтобы все грузилось из одного места, и работа блога не зависела от работы посторонних сайтов.
Надеюсь, что столь подробная инструкция по подключению библиотеки jQuery окажется некоторым полезной. Пользуйтесь!
n-wp.ru
Как подключить jQuery | Only to top
Рассмотрим подключение jQuery через CDN и путём скачивания файла с официального сайта
Подключение jQuery с помощью CDN
CDN — пути доставки контента. При таком подключении файл jQuery не нужно скачивать, т.к. он размещается на серверах, которые располагаются по всему миру. CDN будет иметь неплохое преимущество, если посетитель сайта уже загружал jQuery из этого CDN, то потребности в повторной загрузке не будет.
Рассмотрим несколько самых популярных CDN для подключения.
jQuery CDN
Заходим на сайт jQuery CDN. Выбираем версию jQuery и вид файла (например, минифицированный).
Копируем код.
Вставляем его перед закрывающим тегом head.
Google CDN
Аналогичным образом копируем код нужной версии jQuery с сайта подключения библиотек Google.
Microsoft CDN
Чтобы подключить jQuery, используя сайт Microsoft, перейдём по адресу. Выберем нужную версию и нужный формат кода. Правой кнопкой нажмём на выбранный код и скопируем адрес.
Подключение jQuery путём загрузки файла
Заходим на официальный сайт jQuery. Нажимаем Download jQuery.
Выбираем какой файл хотим скачать (сжатый или несжатый), нажимаем правой кнопкой Сохранить объект как. Сохраняем к себе в папку с сайтом.
В HTML файле перед закрывающим тегом body подключаем файл в формате.
<script src="js/jquery-3.3.1.min.js"></script>В атрибуте src указываем путь до файла.
Полезные ссылки
- Страница для скачивания библиотеки jQuery.
- Страница для подключения jQuery CDN.
Изучаем английский
| English | Russian |
|---|---|
| Content Delivery Network | Сеть доставки контента |
| Query | Запрос |
| Uncompressed | Несжатый |
| Minified | Минимизированный |
| Snippet | Фрагмент |
only-to-top.ru
Как подключить на свой сайт jQuery
Для многих новичков в создании сайтов непонятно, что же такое JQuery, хоть они и постоянно слышат о нем и даже возможно пользовались.
Как мы знаем есть язык JavaScript, который позволяет работать динамически с элементами на странице и делать страницу более привлекательной.
JQuery — библиотека функций, основанных на JavaScript. Если вы уже имели дело с js(JavaScript), то вам все станет ясно.
Эту библиотеку специально разработали специалисты, чтобы упростить использование js, так как многие сложные вещи на js реализовать не так просто. А JQuery позволяет использовать такие сложные конструкции вызовом только одной функции, а не полным составлением ее самим.
Можно выделить два способа подключения JQuery на ваш сайт:
- Подключать файл библиотеки с помощью одного из сервисов google
- Скачать файл библиотеки на сервер сайта и подключать как внутренний файл.
Подключение библиотеки JQuery с помощью одного из сервисов google
Возможно это более удобный вариант для некоторых людей, любой файл с js кодом подключается к HTML странице примерно следующим кодом:
<script type="text/javascript" src="/путь до файла с js-кодом"></script>
В случае подключения файла с другого ресурса необходимо просто указать полный путь до этого файла. У Google есть специальный сервис, на котором есть все версии JQuery, к которым вы можете получить доступ по адресу вида:
https://ajax.googleapis.com/ajax/libs/jquery/*версия_Jquery*/*формат библиотеки*
Здесь за место *версии Jquery* нужно подставить интересуемую вас версию, самая последняя 2.1.3 на данный момент именно в таком виде и нужно подставлять версию. Сейчас существуют две основных версии, это начинающиеся на 1 и на 2, вторая более свежая и содержит больше возможностей. Но многие предпочитают использовать более старые по разным причинам, например, они весят меньше и подгружаются быстрее.
Под *формат библиотеки* сейчас понимаются полные версии и минимизированные. Отличие в количестве кода, полные версии весят гораздо больше минимизированных и редко используются, так как нагружают сайт лишним. Если за место формата библиотеки писать jquery.js, то это будет полная версия, а если jquery.min.js, то это будет сжатая версия. Попробуйте собрать адреса до разных вариантов, и перед вами прямо в браузере откроется код JQuery библиотеки. Вот некоторые пример таких адресов:
https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js
Теперь приведу пример подключения JQuery в вашем файле HTML страницы, помещенному в <head></head> секцию:
<head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script> </head>
Подключение JQuery как внутренний файл
Тут все просто, качаем файл минимизированный или полной библиотеки JQuery, как вам захочется. Скидываем этот файл поближе к HTML странице, куда будет подключать, обычно такие файлы кидают в специальную папку, под названием js. Подключаем этот файл все тем же способом, только уже файл будет лежать у на на сервере, выглядеть это будет примерно так:
<head> <script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script> </head>
www.web.cofp.ru
Как подключить на свой сайт jQuery
Для многих новичков в создании сайтов непонятно, что же такое JQuery, хоть они и постоянно слышат о нем и даже возможно пользовались.
Как мы знаем есть язык JavaScript, который позволяет работать динамически с элементами на странице и делать страницу более привлекательной.
JQuery — библиотека функций, основанных на JavaScript. Если вы уже имели дело с js(JavaScript), то вам все станет ясно.
Эту библиотеку специально разработали специалисты, чтобы упростить использование js, так как многие сложные вещи на js реализовать не так просто. А JQuery позволяет использовать такие сложные конструкции вызовом только одной функции, а не полным составлением ее самим.
Можно выделить два способа подключения JQuery на ваш сайт:
- Подключать файл библиотеки с помощью одного из сервисов google
- Скачать файл библиотеки на сервер сайта и подключать как внутренний файл.
Подключение библиотеки JQuery с помощью одного из сервисов google
Возможно это более удобный вариант для некоторых людей, любой файл с js кодом подключается к HTML странице примерно следующим кодом:
<script type="text/javascript" src="/путь до файла с js-кодом"></script>
В случае подключения файла с другого ресурса необходимо просто указать полный путь до этого файла. У Google есть специальный сервис, на котором есть все версии JQuery, к которым вы можете получить доступ по адресу вида:
https://ajax.googleapis.com/ajax/libs/jquery/*версия_Jquery*/*формат библиотеки*
Здесь за место *версии Jquery* нужно подставить интересуемую вас версию, самая последняя 2.1.3 на данный момент именно в таком виде и нужно подставлять версию. Сейчас существуют две основных версии, это начинающиеся на 1 и на 2, вторая более свежая и содержит больше возможностей. Но многие предпочитают использовать более старые по разным причинам, например, они весят меньше и подгружаются быстрее.
Под *формат библиотеки* сейчас понимаются полные версии и минимизированные. Отличие в количестве кода, полные версии весят гораздо больше минимизированных и редко используются, так как нагружают сайт лишним. Если за место формата библиотеки писать jquery.js, то это будет полная версия, а если jquery.min.js, то это будет сжатая версия. Попробуйте собрать адреса до разных вариантов, и перед вами прямо в браузере откроется код JQuery библиотеки. Вот некоторые пример таких адресов:
https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js
Теперь приведу пример подключения JQuery в вашем файле HTML страницы, помещенному в <head></head> секцию:
<head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script> </head>
Подключение JQuery как внутренний файл
Тут все просто, качаем файл минимизированный или полной библиотеки JQuery, как вам захочется. Скидываем этот файл поближе к HTML странице, куда будет подключать, обычно такие файлы кидают в специальную папку, под названием js. Подключаем этот файл все тем же способом, только уже файл будет лежать у на на сервере, выглядеть это будет примерно так:
<head> <script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script> </head>
www.web.cofp.ru