jQuery для чайников | Введение

27.01.2010 Верстка сайта 7069 Комментировать

jQuery для чайников — это цикл статей для начинающих вебмастеров, которые просто хотят использовать библиотеку jQuery на своих сайтах.

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

В шаблонах WordPress а ля «премиум» уже просто не обходится без слайдера с картинками. Смотрится красиво и стильно. Хочется ведь и в своем шаблоне что-то подобное прикрутить.

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

Поэтому хотя бы на уровне грамотного пользователя jQuery (не разработчика!) изучить данный предмет стоит. Вот этим и займемся.

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

1. Статья из Wiki
2. Документация на jQuery-Docs.Ru
3. Сайт разработчиков jQuery

Так как сегодняшний пост озаглавлен словом Введение, то с jQuery мы познакомимся пока что лишь в общих чертах. Чтобы сложилось достаточно простое и внятное понимание, о чем вообще идет речь.

Любой начинающий вебмастер, который уже немного разбирается в верстке и знает про HTML и CSS, также знает или хотя бы слышал про JavaScript.

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

Читайте также: JavaScript для начинающих | Введение

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

Выглядело это достаточно просто. В код веб-страницы вставлялась ссылка на внешний файл скрипта:

<script type="text/javascript" src="clock.js"></script>

Практически точно также мы пристегиваем к странице файл стилей CSS. Это просто.

Другой вариант — непосредственная вставка кода самого скрипта прямо в веб-страницу. Для этого в нужном месте страницы, где предполагалось показывать некую фишку (текущую дату, например), добавлялась следующая конструкция:

<script type="text/javascript"> программный код самого скрипта </script>

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

Так появилась специальная библиотека сборник по имени jQuery. Теперь достаточно положить в корневую папку нашего сайта один единственный файл jquery.js и затем выдергивать из него необходимые эффекты в нужных местах страницы. Удобно? Безусловно!

Библиотека эта постоянно совершенствуется и пополняется. Ее свежую версию всегда можно скачать с официального сайта разработчиков jquery.com. На данный момент времени (27.01.2010) свежая версия имеет номер 1.4.1

Сразу же возникает закономерный вопрос: а каким конкретно образом можно указать этой самой библиотеке, где мы хотим прилепить то-то и то-то? Ведь сама она не станет показывать фокусы и раздавать леденцы.

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

Enjoy!

Автор: Игорь Квентор
www.websovet.com