SiteIS

jQuery - безграничные возможности в дизайне Вашего сайта!

- Один из самых популярных на сегодня среди веб разработчиков фреймворк

- Позволяет быстро и легко создать потрясающие веб-приложения

- Удивительно красивые анимационные эффекты

- Улучшение пользовательского интерфейса

Главная / Изучаем jQuery / Подключаем библиотеку jQuery

Подключаем библиотеку jQuery

Прежде всего создадим простейший 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. В следующей статье поговорим о пользовательском коде и о том, как избежать конфликтов с другими библиотеками.