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

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

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

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

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

Главная / Изучаем jQuery / Первые действия с jQuery кодом

Первые действия с jQuery кодом

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

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

В примере выше мы поместили вызов модального окна непосредственно в body документа. Если мы перенесем весь код в раздел head, то получим точно такой же результат, как и в первом случае:

<!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>
		<script>
			$(function() {
				alert ('jQuery подключен и отлично работает!');
			});
		</script>		
	</head>
	<body>

	</body>
</html>

Теперь давайте вынесем этот же код в отдельный файл.

Будем считать, что в корне сайта у вас создана папка с именем js и в ней находится файл с библиотекой jQuery. Сам html документ находится в корневой папке с сайтом и, допустим, имеет название index.html. Теперь создадим в текстовом блокноте новый файл, назовем его, например, myscript.js и сохраним в папке js. Переместим код вызова модального окна в файл myscript.js. Обратите внимание, что код в данном случае не нужно оборачивать в теги script.

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

Теперь открываем в блокноте файл index.html (если он еще не открыт) и в разделе head, прямо под строкой, подключающей библиотеку, прописываем следующий код <script type='text/javascript' src='js/myscript.js'></script>

<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>
		<script type='text/javascript' src='js/myscript.js'></script>
	</head>
	<body>

	</body>
</html>

Откроем index.html в браузере и убедимся, что все по прежнему работает как надо - появляется окно с сообщением. Остается, пожалуй, заметить, что последний способ является наиболее предпочтительным и в рабочих проектах я рекомендую все скрипты выносит в отдельные файлы.

Теперь вернемся к конструкции:

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

Любая команда jQuery начинается с обращения к функции jQuery ($(function() {...});). С помощью данного кода мы получаем доступ ко всем прелестям библиотеки:

$(function() {...});

Часто можно встретить конструкции такого вида:

$(document).ready(function() { ... });
//или
jQuery( 'documet' ).ready(function() { ... });

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

jQuery( 'documet' ).ready(function() { ... });
//или
jQuery(function() {...});

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

В следующей статье поговорим о методах выборки DOM-элементов.