Подключение jquery к html


Приветствую вас на моем блоге start-luck.ru. Сегодня рассмотрим, как подключить jquery в html. Для разработки профессионального интернет-проекта знания одного css недостаточно. Созданный блог должен быть удобным для пользователей.

Проанализируйте поведение человека на вашем сайте. Как это сделать посмотрите в статье «Что такое поведенческие факторы». Также вы должны уметь обрабатывать события, перемещаться по элементам на странице и управлять анимацией. Вот для этого нам и пригодится jquery.

Что это такое

Jquery — это фреймворк JavaScript. Если говорить простыми словами, то это библиотека скриптов написанная на JS, включающая в себя набор готовых функций, облегчающих создание приложений на JavaScript.

Подключение jquery к html

Уметь работать с ним должен любой вебмастер, который хочет создать профессиональный интернет-проект. Перед началом изучения ознакомьтесь с моей статьей «JavaScript для чайников».  Она поможет вам в дальнейшем изучении jquery. Используя эту библиотеку, вы получите такие преимущества по сравнению с использованием javascript:


  • Работает со всеми современными браузерами;
  • Быстрое внедрение визуальных эффектов, а также скрытие и появление элементов на блоге;
  • Много плагинов, облегчающих работу — галереи, слайдеры формы, выпадающее меню и другие элементы страницы.
  • Работа с ajax. Это технология, разрешающая отправлять запрос к серверу без перезагрузки браузера.

Как добавить библиотеку в html

Работать с фреймворком можно добавив ссылку в исходный код вашего блога с официального интернет-проекта Jquery, или же скачав библиотеку к себе на сервер.

Используем первый способ

Для подключения переходим на официальный сайт jquery.com и нажимаем ссылку «Загрузить».

Подключение jquery к html

Откроется страница, где нажимаем правой кнопкой мыши по «Download the compressed» и выбираем в открывшемся окне строку «Копировать адрес ссылки».

Подключение jquery к html

Далее осталось в исходном коде перед закрывающимся тегом head написать следующее:

В кавычках и будет адрес скопированной ссылки.

Атрибут «src» указывает путь к внешнему файлу. Хотелось бы отметить, что не обязательно подключать данный скрипт в тег «head». На момент написания статьи последняя версия была 3.2.1. Когда вы будете читать данный пост, она может измениться. Выйдет новая.


Важно! Перед началом работы с данным фреймворком у вас должны быть начальные знания в области веб-программирования. Это не так сложно, как кажется. На начальных этапах обучения рекомендую почитать статью «Первые шаги в коддинге».

Как подключить, скачав файл на свой сервер

На официальном сайте, так же, как и в первом способе, жмем на кнопку «Загрузить».

В новом окне нажимаем ссылку «Download the compressed» левой кнопкой мыши и прописываем путь, куда нужно скачать файл библиотеки.

Подключение jquery к html

На сервере создайте папку, например, «JS» и скопируйте в него этот файл.

Теперь его нужно подключить для этого в теге «head» пишем такой код:

Наблюдательный читатель заметит, что можно скачать сжатую и полную версию файла.

Подключение jquery к html

Они отличаются размером. Сжатая версия, та что использовалась в примере, имеет размер 85 килобайт, а полная — 260. В первом варианте были убраны все пробелы и переводы строк. Также сократили имена переменных. Больше между ними разницы нет. Я советую использовать способ, описанный выше, так как в нем размер подключаемого файла меньше и поэтому загружаться он будет быстрее. Полная версия используется разработчиками, и вебмастерами, которые захотят изучить работу библиотеки подробнее.

Как проверить правильность подключения


Чтобы убедиться, что все работает как следует, напишите такой скрипт в html-коде между тегами «head»:

Если добавление выполнено правильно, то в окне браузера появится слово «Работает».

Важно! Не изменяйте название скачанного файла. Хотя ошибки в работе не возникнет, все-таки лучше будет если вы оставите официальное название, полученное при загрузке. Это нужно для того, чтобы знать какая версия использовалась. Хотелось отметить, что подключение к файлу придется выполнить на всех страницах сайта, где будет работать фреймворк.

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

Работать с jquery возможно если интернет-проект создан на Вордпресс. Если вы не в теме, посмотрите статью «Обзор популярных движков». Для этого подключите библиотеку при помощи функции wp_enqueue_script(). Ее напишите в файле с темой header.php:

Важно! Эту функцию поместите до wp_head(). В таком случае загрузка библиотеки будет происходить быстрее.

Подключение с внешнего ресурса

Альтернативный вариант добавления библиотеки в исходный код на странице — использование CDN. В переводе это значит сеть доставки контента. При таком варианте ядро фреймворка находится на стороннем ресурсе. Это может быть Гугл, Майкрософт, Яндекс.


Подключение jquery к html

Преимущество такого способа в том, что файлы загружаются через ссылку с ближайшего к вам сервера. Это увеличит скорость работы. Если человек был раньше на вашем блоге, то библиотека добавляется в кэш браузера и не будет загружаться еще раз.  Использование такого способа актуально, если имеется несколько небольших интернет-проектов. Для подключения CDN от Гугла используйте такой код:

Своя сборка

Исходный код библиотеки скачайте с github.com. Он разделен на модули. Поэтому если не требуется поддержка какой-то функции, например, Аякс, то этот модуль исключите. Инструкцию как это сделать посмотрите по ссылке на github.com.

Остались еще вопросы? Рекомендую ознакомиться с видеокурсом от Михаила Русакова. В нем подробно, с практическими примерами показано, как работать с этой библиотекой.

Подключение jquery к html

Вывод

Итак, подключить рассмотренный фреймворк к сайту не сложно. Используйте эту технологию для создания уникального и профессионального интернет-проекта. Чтобы повысить уровень знаний в области создания сайтов, рекомендую посетить портал программистов GeekBrains.ru. Здесь вы найдете для себя полезную информацию.

Подписывайтесь в мою группу ВКонтакте, в ней есть что посмотреть.

start-luck.ru

Как подключить jQuery


Есть два варианта подключения:

1. Удаленный:

Добавляем на страницу код в «head» либо в самом конце страницы…всё! В зависимости от того, как требуется загрузка jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

2. Локальный:

Заходим на официальный сайт jQuery

Нажимаем Download jQuery

Подключение jQuery

У нас открывается новая страница. где нас интересует две строчки — это первая строка — несжатая библиотека jQueryИ сжатая!

Какая между ними разница!? Они отличаются весом (первый вариант весит 85 Кб, а второй 260(вес может немного отличаться в зависимости от версий…)) и структурой кода(первый вариант оптимизированный, а второй для разработчиков).

А в остальном они одинаковые! Логично, что стоит использовать первый вариант

Подключение jQuery

Если не случилась загрузка jQuery


Вы нажали на кнопку загрузить, но загрузка не произошла, а вышло новое окно, где вы увидели много кода! Что делать с ним!?

Нажимаем ПКМ и выбираем строку сохранить как… Показываем место сохраняем.

Подключение jQuery

Вернемся к подключению…

После того, как скачали файл jQuery, его нужно переместить на сервер, где он и будет находиться…

Как и в первом варианте создаем код, в котором нужно прописать путь до файла…

<script src="http://ВАШ_САЙТ/ПУТЬ_ДО_ФАЙЛА/НАЗВАНИЕ_ФАЙЛА.js"></script>

Какой из вариантов подключения выбрать!?

В сети очень часто видишь, что, когда говорят о подключении jQuery, то рекомендуют удаленное подключение.

Я конечно не знаю — они все очень умные, и мне до них как до луны!

Но сами себя спросите, что лучше расположение на удаленном сервере или на локальном!?

Лично я сторонник того, чтобы никаким образом, если это возможно — никогда не зависеть от второго лица!

Зачем нужен jQuery !?

Мы не будем вдаваться во всякие мудрствования, о том откуда пошел jQuery , почему так сложилось, что javascript по ощущениям … какой-то ущербный без jQuery .


Давайте приведем простой пример, который показал бы, что без jQuery javascript – довольно тяжел для запоминания и понимания… не буду что-то придумывать свое, вот пример из интернета:

<script>

var elem = document.getElementById('p');

var elem = $('#p');

</script>

dwweb.ru

Подключение 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:

  • jQuery CDN
  • Google CDN
  • Microsoft CDN
  • CDNJS CDN
  • jsDelivr CDN

Я обычно использую подключение от Google Developers. На странице проекта для нас уже подготовлены несколько сниппетов, достаточно скопировать строчку нужного нам и подключить ее в файл. При таком способе подключения код будет выглядеть так:

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

Подключение jQuery на WordPress

Подключение jQuery в WordPress производится автоматически, поэтому нет никакой необходимости подключать библиотеки других версий вручную. Это происходит в шаблоне с помощью php кода:

В итоге внутри тега HEAD появится строка подключения jQuery.

На момент написания статьи с WordPress поставляется jQuery v1.12.4 Но, как видите, версия библиотеки очень сильно отличается от той, которую подключали в примерах выше. Подключить свежую версию библиотеки возможно, но есть шанс возникновения конфликта.

Чтобы избежать конфликта, но при этом использовать ту версию библиотеки, которая необходима, нужно воспользоваться правильным способом подключения jQuery в файле functions.php:


Тут сначала отключается стандартная библиотека, а потом через Google API подключаем версию 3.1.1

Внимание! Учтите, этот код будет работать только в том случае, если в вашей теме присутствуют wp_head() и wp_footer().

codernote.ru

Способ 1. Скачать в папку и подключить файл

Наиболее распространённый способ, если сайт могут просматривать локально, без подключения сети Интернет (неужели такие еще есть?).

Идем по адресу и жмем большую желто-оранжевую кнопку Download jQuery. Переходим на страницу где выбираем версию jQuery. Желательно выбирать последнюю из доступных (на момент написания статьи – это 2.2.3). Обозначение compressed – означает, что библиотека минимизирована, т.е. занимаем минимум места, но, к сожалению, читать исходных код трудно. Качаем! После сохранения подключаем файл библиотеки. Для моей структуры (все скрипты лежат в папке js), код выглядит следующим образом:

Так выглядит структура проекта, библиотеку jQuery скачали в папку js

структура проекта
библиотека лежит в папке js

В некоторых случаях, библиотеку подключают перед закрывающимся тегом body, что связанно с порядком обработки html страницы браузером. Поскольку браузер вычитывает строки последовательно, то при подключении jQuery в конце файла вначале браузер отобразит сайт, а затем уже подключит динамику. При медленном соединении, такой подход обеспечивает увеличение скорости загрузки сайта, и уже потом работу слайдеров и остального. Код при таком подключении выглядит:

Какой из способов лучше? Это вопрос философии и привычки. Второй способ, используется в фреймворке materialize.

Способ 2. Подключаем напрямую с CDN

Данный способ хорош тем, что библиотека подключается с сайта и не валяется на жестком диске. Особенно это актуально при большом количестве маленьких проектов и для обучения.

Для подключения рекомендую использоваться подключение от Google Developers, обычно я нахожу данную страницу по ссылке jquery google. Наша задача скопировать строку:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

и подключить ее в файл. Выглядит это так:

Второй способ подключения, перед закрывающимся тегом body:

Все просто!

w3.org.ua

Подключение 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.

В итоге наша страница будет иметь вид:

Я думаю тут будет всем понятен общий смысл.

Атрибут type говорит, какой тип подключаемого файла. Атрибут src указывает путь к файлу.

Как подключить библиотеку jQuery с внешних источников

Подключение со своего сайта, это только один вариант. И он не так плох, но если смотреть в будущее и задуматься о скорости загрузки сайта, то можно найти и другой путь.

Как вам возможно известно, скаченные файлы сайта, такие как css и javascript, а так же изображения скачиваются в кэш браузера.

Положительный момент в том, что если на каком-то другом сайте использовалась та же, библиотека jQuery, то при переходе на ваш сайт браузер не будет скачивать его заново, а это повышает скорость загрузки страницы.

Для такого случая, существуют разнообразные сервисы с библиотеками jQuery. С помощью этих сервисов, можно подключить самую последнюю версию библиотеки. А так как многие разработчики пользуются этими сервисами, шанс того что эта же версия уже будет у посетителя сайта повышается.

Официальный сайт jQuery

Первый сайт, это конечно же официальный сайт разработчика jQuery — http://code.jquery.com/

На странице вы можете выбрать нужную вам версию, или непосредственно последнюю версию библиотеки. Для этого нужно подключить код к странице сайта:


 Google Libraries API

Второй сервис это всеми знакомый Google.

У Google есть проект – Google Libraries API. Этот проект предоставляет API для разработчиков на JavaScript, и позволяет подключать нужные библиотеки с серверов Google. Поддерживает не только библиотеки jQuery, но и Angular JS, Angular Material, Dojo, Ext Core, jQuery UI и другие.

Для подключения библиотеки с сайта Google используем код:

А вот если вы хотите подключить самую последнюю версию то нужен этот код:

Здесь главное в 1 – это показатель версии. А именно указывает на то что будет использовать библиотека последней версии jQuery 1.


Подключение с сайта Microsoft

Подключается абсолютно так же,  как и с другими сервисами.

От себя добавлю, что я редко видел, чтобы библиотека jQuery подключалась от Microsoft.

Заключение

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

hi-blog.ru

Прежде всего создадим простейший html документ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  	<head>  		<title>Работа с jQuery</title>  	</head>  	<body>    	</body>  </html>  

Предполагается, что читатель знаком с основами html и css, поэтому разъяснять, как строится структура html документа я не буду. Теперь пришла очередь обзавестись библиотекой.

Получить последнюю версию можно многими способами. Опишу наиболее распространенные из них, а заодно и обсудим их достоинства и недостатки.

Локальное подключение библиотеки

Первый способ — сохранить файл ядра библиотеки в проекте. Для этого потребуется скачать его на свой компьютер и подключить к документу. Заходим на официальный сайт jQuery (http://jquery.com/). На главной странице справа видим блок с большой кнопкой Dounload (jQuery), кликнув по которой можно закачать последнюю версию (на момент написания статьи последней является версия 1.8.2).

jqueru

Радио переключатели, расположенные сверху кнопки, позволяют выбрать для закачки сжатый (Production), или полный (не сжатый — Development) вариант библиотеки. Второй вариант понадобится, если очень хочется покопаться в недрах кода фреймворка, но при этом размер его сильно отличается в большую сторону (247 kb). По умолчанию выбрана сжатая версия — ее и следует загружать.

Жмем по ссылке и… вместо ожидаемого диалога для закачки файла открывается окно с кучей непонятных строк.

jqueru code

Если это окно вызвало недоумение, не пугайтесь — все в порядке. Что бы сохранить этот код в файл, в меню браузера выбираем файл — сохранить как…

menu browser

и в появившемся окне указываем папку, куда хотим залить библиотеку.

save dialog

При желании можно переименовать сохраняемый документ, но лучше оставить имя по умолчанию — не придется в дальнейшем гадать, что это за файл и за что он отвечает. Для завершения процедуры жмем кнопку сохранить и нужный файл появится в указанной папке.

Теперь нужно прописать путь к этому файлу в разделе head html документа. Для удобства я обычно создаю папку js в корне сайта в которую складываю все необходимые для работы сайта js файлы. Если Вы поступили так же, то скопируйте файл библиотеки в эту папку (по умолчанию он будет иметь название jquery-1.8.2.min.js, где 1.8.2 — это версия библиотеки) и в разделе head html страницы, с которой работаете пропишите следующую строку <script type=’text/javascript’ src=’js/jquery-1.8.2.min.js’></script>.

В итоге раздел head html документа должен выглядеть так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  	<head>  		<title>Работа с jQuery</title>  		<script type='text/javascript' src='js/jquery-1.8.2.min.js'></script>  	</head>  	<body>    	</body>  </html>  

Все, библиотека подключена. Убедимся, что все сделано правильно. Все в том же html документе, в разделе body пропишем следующий код:

  <script>  	$(function() {  		alert ('jQuery подключен и отлично работает!');  	});  </script>  

Откроем страницу в браузере. Если все сделано правильно, то должно появиться модальное окно с сообщением jQuery подключен и отлично работает!. Если сообщение не появилось, проверьте, правильно ли указан путь к библиотеке и нет ли ошибок в коде вызова модального окна. Код документа на данном этапе должен выглядеть так:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  	<head>  		<title>Работа с jQuery</title>  		<script type='text/javascript' src='js/jquery-1.8.2.min.js'></script>  	</head>  	<body>  		<script>  			$(function() {  				alert ('jQuery подключен и отлично работает!');  			});  		</script>  	</body>  </html>  

Теперь, когда библиотека подключена и все работает как надо, пару слов о достоинствах и недостатках этого способа подключения.

Плюсом является то, что можно работать с js кодом не имея доступа в интернет (библиотека находится на локальном компьютере). Однако, использовать локальную версию не очень удобно на рабочем сайте, особенно, если проект постоянно совершенствуется и в коде используются возможности новых версий библиотеки. В этом случае все время приходится повторять описанную выше процедуру. Благо, есть способы облегчить себе жизнь…

Удаленное подключение библиотеки

На стадии разработки сайта, особенно если не всегда есть доступ к интернету, подключить библиотеку описанным выше способом является достаточно удобно. Но для рабочего проекта лучше избрать другой метод. Сегодня большое количество крупных интернет сервисов размещает файлы библиотеки у себя на серверах и предоставляет возможность использовать ее удаленно. Преимущества очевидны. Во первых, на сайт можно загружать самую последнюю версию библиотеки. Во вторых, если посетитель до визита на Ваш сайт уже побывал на ресурсах, где jQuery был подключен таким же способом, то его браузер подгрузит файл из кеша. Наиболее надежными источниками для меня являются официальный сайт jQuery и Google (самый популярный на сегодня источник, а значит и самый предпочтительный).

Следующая строка <script type=»text/javascript» src=»http://code.jquery.com/jquery-latest.js»></script> позволяет загрузить самую последнюю версию библиотеки с официального сайта jQuery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  	<head>  		<title>Работа с jQuery</title>  		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  	</head>  	<body>    	</body>  </html>  

Этой строкой <script type=»text/javascript» src=»http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js»></script> подключается последняя версия библиотеки с Google (я рекомендую использовать именно этот способ в рабочих проектах).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  	<head>  		<title>Работа с jQuery</title>  		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  	</head>  	<body>    	</body>  </html>  

Еще одной полезной плюшкой у Google является то, что можно загрузить при необходимости какую то конкретную версию. Например, эта строка <script type=»text/javascript» src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script> загрузит библиотеку версии 1.7.2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  	<head>  		<title>Работа с jQuery</title>  		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  	</head>  	<body>    	</body>  </html>  

Вот в общем то и все о подключении фреймворка jQuery. В следующей статье поговорим о пользовательском коде и о том, как избежать конфликтов с другими библиотеками.

siteis.ru

Здравствуй, дорогой читатель. Если ты попал на эту статью, то возможно тебя интересует вопрос: Как подключить JQuery к сайту или же ты подключил эту библиотеку, но у тебя все равно не работает код или что-то пошло не так. В этой статье мы рассмотрим простой способ подключения JQuery к странице html, а так же проверим подключение JQuery.

Подключение JQuery

И так, как же подключить JQuery к сайту?
Все очень просто. Мы будем использовать тег script и два атрибута: type и src. Предположим у тебя есть пустая страница html:

  1. <!doctype html>
  2. <html lang=»ru»>
  3. <head>
  4. </head>
  5. <body>
  6. </body>
  7. </html>

Для подключения JQuery к сайту используем тег script и вставляем его в тег head. Если, у тебя файл лежит в папке с сайтом, то пишем просто название файла, если же в отдельной, то сначала название папки, а потом название файла JQuery.

  1. <!doctype html>
  2. <html lang=»ru»>
  3. <head>
  4. <script type=»text/javascript» src=»jquery.js»></script>
  5. </head>
  6. <body>
  7. </body>
  8. </html>

Таким образом мы подключили библиотеку, чтобы проверить, что подключилась ли библиотека JQuery к сайту, нужно создать файл с расширением .js и подключить аналогично библиотеке.

  1. <!doctype html>
  2. <html lang=»ru»>
  3. <head>
  4. <script type=»text/javascript» src=»jquery.js»></script>
  5. <script type=»text/javascript» src=»script.js»></script>
  6. </head>
  7. <body>
  8. </body>
  9. </html>

Заметь, файл с твоим кодом должен подключаться после подключения JQuery библиотеки. Теперь для проверки запиши простой код, в созданный тобой файл, у меня он называется script.js, и запусти сайт или обнови страницу.
Откроем файл и запишем код:

  1. $(document).ready(function(){
  2. alert('Все работает!');
  3. });

Теперь сохраняем изменения, обновляем страницу и радуемся =)

Проблемы

Если все таки, что-то пошло не так, давай рассмотрим возможные ошибки:

Кодировка

Кодировка у всех файлов должна быть одинаковой, у меня это либо UTF-8, либо UTF-8 без BOM.

Путь к файлу
Проверь, правильно ли ты написал путь к файлу, так же проверь, правильно ли ты указал названия файлов.

Порядок
Удостоверься, что библиотека JQuery подключена до файла со скриптами. Порядок должен быть таков: первым подключается JQuery, а за ней файлы со скриптами.

Одна библиотека JQuery
Не подключай несколько библиотек одновременно, используй одну.

Синтаксис
В разных библиотеках, бывают отличия. К примеру, одна библиотека работает так:

  1. $(document).ready(function(){
  2. alert('Все работает!');
  3. });

Другая, может работать только так:

  1. jQuery(document).ready(function(){
  2. alert('Все работает!');
  3. });

Второй вариант я встречал редко, но все же попробуй если у тебя не получилось со значком доллара или же наоборот.

knlnt.com

Способы подключения библиотеки

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

  • Динамическое подключение jQuery, то есть подключение библиотеки со стороннего ресурса.
  • Локальное подключение jQuery. Это когда готовая библиотека лежит у вас на сайте, и вы ее подключаете.

Динамическое подключение

Динамическое подключение jQuery осуществить проще всего. Для этого достаточно в коде вашего сайта, перед закрытием тега </head> просто добавить вот такой код:

Данный код будет осуществлять подгрузку последней библиотеки jQuery из хранилища Google.

Если же вам нужно загрузить не последнюю версию библиотеки jQuery, а библиотеку какой-то определенной версии, то вам нужно вставить вот такой код:

Где вместо 2.2.0 вы ставите ту версию, которая нужна вам для загрузки.

Для того, что бы убедиться, что по данному адресу в хранилище Google действительно находится нужная вам библиотека, достаточно просто скопировать данный адрес и вставить его в адресную строку браузера и затем нажимать Enter.

И вот мы видим код самой библиотеки, и в самом верху написана ее версия.

Достоинствами динамического подключения:

  • Простота подключения. То есть вы, просто вставляете код на ваш сайт, и получаете уже подключенную библиотеку jQuery.
  • Из хранилища Google подключение скрипта происходит быстрее, чем, если скрипт находится на вашем сайте.

Недостатки подключения:

  • Если IP пользователя, добавившего данную библиотеку, Google решит забанить, либо просто с самим сервисом Google что-то случится, то данная библиотека, естественно, перестанет работать на вашем сайте, и все элементы, которые были с ней связаны, так же перестанут работать.

Для того, что бы этого избежать, можно использовать следующий способ подключения – это локальное подключение.

Локальное подключение

Для локального подключения данной библиотеки делаем следующее:

  1. 1.Переходим на сайт jQuery.com, в раздел download. Здесь нам предлагается для скачивания сжатая версия библиотеки и обычная.

    Сжатая версия библиотеки представляет собой минифицированный код, из которого удалены все лишние пробелы и enter-ы и за счет этого уменьшен размер данного файла.

    Обычная версия библиотеки содержит обычный код с пробелами, отступами и т.д.

    Если вы не планируете вносить какие-то правки в код самой библиотеки, то скачивайте сжатую версию и подключайте к сайту именно ее.

  2. 2.Если в вашем браузере закачка не начинается автоматически, и при переходе по ссылке открывается вот такой код:

    То вам нужно, просто, его скопировать и вставить в какой либо текстовый редактор, в моем случае это Notepad++, и сохраняете файл с именем-названием и версией библиотеки и с расширением .js.

  3. 3.Затем, этот файл нужно будет загрузить на ваш сайт. Желательно, для всех скриптов создать отдельную папочку js, и в неё загружать все скрипты.
  4. 4.После того, как файл библиотеки загружен, открываем в любом текстовом редакторе страницу вашего сайта, или если ваш сайт сделан на CMS, то вам нужно будет открыть соответствующую часть шаблона, в которой находится код шапки сайта.
  5. 5.Далее, перед закрытием тега </head> нам нужно будет вставить вот такой код:

    В кавычках должен быть указан путь к вашей библиотеке.
    Вместо jquery-3.1.0.min.js будет название вашего файла с jQuery библиотекой

Проверка подключения библиотеки jQuery

После того, как данный код вставлен на сайт, было бы не плохо, проверить работоспособность этой библиотеки. Для этого мы можем воспользоваться специальным скриптом.

Данный скрипт нужно вставить в код сайта перед закрытием тега </body> .

После вставки кода сохраняем изменения и обновляем страницу нашего сайта.

Если библиотека подключена правильно, то на сайте должно будет высветиться сообщение о том, что библиотека jQuery подключена.

Если библиотека не подключилась то в данном сообщении будет написано, что jQuery не подключена.

На что нужно обязательно обратить внимание при подключении библиотеки jQuery?

  1. 1.Прежде всего, если вы подключаете на одном сайте несколько библиотек jQuery разных версий, то будьте готовы к тому, что у вас может произойти конфликт, и все элементы на сайте, которые работали с использованием jQuery, могут просто перестать работать.
  2. 2.Так же, большое значение играет сама версия jQuery. К примеру, если у вас на сайте используется слайдер, разработанный на основе библиотеки версии jQuery 2.2, а вы подключаете jQuery 2.1, либо какую-то другую версию, то данный слайдер может у вас не работать.
  3. 3.Так же, при подключении данной библиотеки следует обратить внимание на то, подключается у вас в шапке сайта какие-то другие скрипты или библиотеки, связанные с jQuery. Если они у вас подключаются, то выполнить подключение самой библиотеки jQuery вам нужно будет не перед закрытием тега </head>, а немножко раньше. Иначе, у вас эти библиотеки или скрипты могут не работать. Да и вообше, при подключении данной библиотеки, порядок подключения скриптов имеет большое значение.
  4. 4.Так же, обращаю ваше внимание на то, что если ваш сайт работает на CMS, то во многих из них подключение библиотеки jQuery осуществляется автоматически.
  5. 5.Может быть такое, что вы подключаете какую-то библиотеку, затем прописываете какой-то свой скрипт, и этот скрипт у вас не работает. Это так же связано с конфликтом jQuery, и для того, чтобы решить эту проблему нужно прописать этот скрипт в режиме jQuery no-conflict. Для этого, сам скрипт оборачивается вот в такой вот код:

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

Видеоинструкция

На этом у меня все. Если у вас остались какие-то вопросы, вы можете задать их в комментариях. Подписывайтесь на мой канал и рассылку! До встречи в следующих статьях и видео уроках!

С уважением Юлия Гусарь

impuls-web.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.