Этот мини-курс содержит шесть небольших уроков по использованию jQuery. Курс предназначен для тех, у кого нет никакого опыта работы с jQuery и JavaScript. Примеры все простейшие, но при этом будут содержать код на Javascript. Каждый урок снабжен демо страницами, на которых можно увидеть результат работы того или иного скрипта. Курс поможет понять основы работы с JavaScript с использованием библиотеки jQuery.
Содержание мини курса по jQuery для дизайнеров.
1. Как работает jQuery
2. Как обратиться к нужному элементу?
3. Выдвигающаяся панель
4. Эффект исчезновения
5. Движение и изменение элемента
6. Меню с эффектом аккордеон
7. Доработка меню с эффектом аккордеон
8. Всплывающие окна с подсказками
9. Всплывающие окна с подсказками #2
10. Сворачиваемые списки
11. Простая галерея с заменой картинок
12. Стилизация ссылок на файлы различных типов
Перейти на демо сайт
Как работает jQuery
Для начала вы должны загрузить библиотеку jQuery. Далее требуется подключить библиотеку jQuery к ваше сайту. Делается это чаще всего после тэга <head>. Далее пишется функция, в которой говорится что нужно сделать jQuery.
Диаграмма ниже подробно объясняет как работает jQuery.
Как обратиться к нужному элементу?
Написание функций на jQuery достаточно простое, благо есть очень подробная инструкция. Ключевой момент, который нужно знать это как обратиться к нужному вам элементу, к которому вы собираетесь применить эффект.
$("#header")= получить элементы сid="header"$("h3")= получить все заголовки<h3>$("div#content .photo")= получить все элементы принадлежащие классуphoto, которые встречаются внутри блока<div id="content">$("ul li")= получить все<li>элементы списка, которые встречаются в списках<ul>$("ul li:first")= получить только первый<li>элемент списка<ul>
На этом вступительную часть мы заканчиваем. В следующей статье рассмотрим как сделать эффект выезжающей панели и эффект исчезновения блока.
Если вы не знаете как правильно составить техническое задание на разработку сайта, то обязательно прочтите статью на сайте http://videotutor.ru. Там же есть готовый шаблон для технического задания.
И где же тут основы???