Мини-курс по jQuery для дизайнеров

jQuery логоЭтот мини-курс содержит шесть небольших уроков по использованию 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 диаграмма
—>К содержанию

 

Как обратиться к нужному элементу?

Написание функций на 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. Там же есть готовый шаблон для технического задания.



Запись опубликована в рубрике JavaScript с метками , , . Добавьте в закладки постоянную ссылку.

11 комментариев: Мини-курс по jQuery для дизайнеров

  1. Уведомление: Мини-курс по jQuery для дизайнеров. | Grabr

  2. Уведомление: Мини-курс по jQuery для дизайнеров. Урок 2: выдвигающаяся панель и эффект исчезновения. | RusDigi.org Блог Гилязетдинова Руслана

  3. Уведомление: Мини-курс по jQuery для дизайнеров. Урок 3. Движение и меню аккордеон. | RusDigi.org Блог Гилязетдинова Руслана

  4. Уведомление: Эстафета: небольшие планы на будущее | RusDigi.org Блог Гилязетдинова Руслана

  5. Уведомление: Мини-курс по jQuery для дизайнеров. Урок 3. Аккордеон и подсказки. | RusDigi.org Блог Гилязетдинова Руслана

  6. Уведомление: Мини-курс по jQuery для дизайнеров. Урок 5. Подсказки и списки. | RusDigi.org Блог Гилязетдинова Руслана

  7. Уведомление: Мини-курс по jQuery для дизайнеров. Урок 6. Галерея. Иконки файлов | RusDigi.org Блог Гилязетдинова Руслана

  8. Уведомление: Креативное свадебное видео - Платье на выброс

  9. Уведомление: Онлайн-редактор изображений Pixlr | WmrStar: Кладовая полезностей

  10. Уведомление: Инвайты для социальной сети Google+ | RusDigi.org Блог Гилязетдинова Руслана

  11. W0055 говорит:

    И где же тут основы???

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *