SiteIS

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-элементов.

Автор: Super User

Комментарии  

 
-3 # Елена 17.02.2013 21:52
Хочу на своем сайте подключить jQuery, но ничего не получается. Решила начать с азов. Подключила библиотеки и прописала скрипт вызова окошка в файле header. Все прекрасно работает, окошко появляется. Но как только я вынесла этот код в другой файл и по уроку все сделала как у Вас окошко перестало работать! В чем может быть причина? Я не могу ни один скрипт установить на сайт. Папку поместила в корень сайта, а файл находится в /wp-content/the mes/admired(моя тема, может в этом проблема?
Ответить | Ответить с цитатой | Цитировать
 
 
-2 # Admin 17.02.2013 23:53
Прежде всего посмотрите исходный код вашей страницы в браузере и убедитесь, что файл со скриптом находится в head. Если он там есть - обратите внимание на путь, который прописан для этого файла.
Ответить | Ответить с цитатой | Цитировать
 
 
-2 # Елена 18.02.2013 00:08
Я догадалась проверить надпись: скрипт работает, обновив страницу браузера на сайте, все заработало. Наверное не работал скрипт, когда я открывала header с помощью браузера из-за того, что они лежат в разных папках.
В любом случае спасибо за статьи. В них очень доходчиво написано как и что делать. Наконец у меня начал работать скрипт, который я безуспешно пыталась установить несколько дней. Точнее пробовала разные скрипты, но они тоже не работали.
Ответить | Ответить с цитатой | Цитировать
 
 
+3 # Admin 18.02.2013 00:48
Очень рад, что у Вас все получилось и что материал оказался Вам полезен. Спасибо за оставленные комментарии.
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Евгений 03.01.2015 22:54
Благодарю за Вашу работу !
Всё ясно изложено, понял всё (почти)...
Почему-то работает вариант:
alert('Вызов функции из моего скрипт-файла');
alert ('jQuery подключен и отлично работает!');
Это две строчки из моего скрипт-файла, подключенного к html.
Обернутые в
$(function() { ... });
работать отказываются...
Где тут собака порылась ? :lol:
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Игорь 20.11.2015 09:47
Добрый день!
У меня такой вопрос.
myscript в блокноте сохраняется в формате txt, нужно ли его менять на js или в пути указать myscript.txt??
Надпись "подключен и отлично работает" не читается, вместо нее квадратики, jQuery читается.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # admin 20.11.2015 17:06
менять расширение на js обязательно и файл нужно сохранять в кодировке utf-8 без БОМ
Ответить | Ответить с цитатой | Цитировать