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

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Что такое jQuery?

jQuery - это небольшая по объёму, но богатая и мобильная библиотека JavaScript, сосредоточенная на успешном взаимодействии JavaScript, HTML и CSS.

Впервые библиотека была представлена общественности её создателем, Джоном Резигом, на компьютерной конференции в Нью-Йорке в 2006 году.

За прошедшие годы библиотека претерпела множество изменений и на текущий день её содержимое полезно для выполнения широкого круга задач.

Функции jQuery

• Помощь в получении доступа и манипулирование любым элементом DOM (объектная модель документа);
• Работа с событиями;
• Осуществление различных визуальных эффектов;
• Взаимодействие с AJAX;
• Обладает огромным количеством JavaScript плагинов, предназначенных для создания элементов пользовательских интерфейсов.

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

Этот вопрос особенно актуален для сайтов индивидуальной разработки, то есть, не использующих какие-либо CMS (движки). Именно для таких сайтов я написал эту инструкцию. Если Ваш сайт работает на какой либо CMS (Wordpress, Joomla и т.д), это описание не для Вас. Хотя, я пробовал таким способом подключить библиотеку на свой сайт Wordpress и у меня получилось удачно.

Для подключения jQuery к сайту достаточно вставить одну строку перед закрывающим тегом HEAD.

Способ №1 - локальное подключение

1. Обращаемся к официальному сайту jQuery //jquery.com/. Справа вверху жмем большую кнопку Download JQuery. После нажатия этой кнопки Вы оказываетесь на странице скачивания. Скачиваем и сохраняем файл библиотеки последней версии в выбранном месте на компьютере. Вариант по умолчанию - сжатая версия:

2. Копируем файл библиотеки в корневую папку js своего сайта. Если таковой нет, создайте её.

3. В разделе head html-документа нужно прописать всего лишь одну строку - путь к этому файлу:

<script type='text/javascript' src='/js/jquery-3.1.1.min.js'></script>

          Файл последней версии на момент написания статьи.

4. Чтобы убедиться в правильном подключении библиотеки, в раздел body html-документа на время проверки вставляем код:

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

5. На открытой странице в браузере должно появиться такое сообщение:

Способ №2 - удалённое подключение

Как понятно из названия, библиотека jQuery может быть использована удаленно, то есть загружаться с другого сайта, который предоставляет такую возможность. Наиболее востребованными и надежными источниками являются официальные сайты jQuery и Google. Здесь можно выбрать как вариант нужной Вам версии, так и вариант автоматической загрузки последней версии библиотеки после выхода её обновлений.

1. Для того, чтобы постоянно загружалась последняя версия с сайта jQuery, в раздел head нужно вставить такую строку:

<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script> 

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

2. Последняя версия библиотеки с Google API будет загружаться при вставке следующей строки:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

Для загрузки какой-либо конкретной версии с Google API используйте код:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

          Выбранная вами версия.

P.S. Предпочтительной считается версия, взятая с Google, но у Вас есть право выбора и это прекрасно! На этом всё, будем прощаться. Спасибо за внимание. Всего доброго! Ваш Л.М.