Изучаем jQuery

Содержание

1. Живые веб-страницы.
Новые возможности веб-страниц
HTML и CSS — это, конечно, хорошо, но...
...без сценариев не обойтись
Знакомьтесь: j Query (и JavaScript)!
Что происходит в браузере
Скрытая структура веб-страницы
jQuery упрощает работу с DOM
Функция jQuery (и ее сокращенная запись)
jQuery выбирает элементы по тем же правилам, что и CSS
Селекторы: стили и сценарии
Использование селекторов jQuery
jQuery в переводе
Ваш первый проект с jQuery
Подготовка файлов HTML и CSS
Поехали...
Эффекты изменения прозрачности И это все?
Пушистые Друзья спасены
Ваш инструментарий jQuery

2. Хватай и действуй.
Подруга просит тебя помочь оформить сайт
Что требуется от проекта?
Начинаем с div
Событие click под увеличительным стеклом
Включение метода click в страницу
Выражайтесь точнее
Назначение классов
Идентификаторы элементов
Три уровня веб-страницы
Возвращаемся к списку
Выделение памяти для хранения данных
Конкатенация и слияние данных
Возвращаемся к программному коду...
Вставка сообщения
Все отлично работает, но...
Дайте мне $ (this)
Использование $(this)
Скатертью дорога!
Метод remove
Селекторы потомков
Ваша очередь прыгать от радости
Ваш инструментарий jQuery

3. Страница в центре событий.
Ни минуты покоя
В словах бухгалтера есть резон...
Реакция на события
За кулисами слушателя событий
Связывание события
Срабатывание событий
Удаление событий
Перебор элементов
Структура проекта
Использование функций
Как устроена функция
Анонимная функция
Именованные функции как обработчики событий
Передача переменных функциям
Функция также может возвращать значения
Условные конструкции и принятие решений
Но это еще не все
Методы могут изменять CSS
Добавление события hover
Еще немного...
Ваш инструментарий j Query

4. Изменение DOM.
Интерактивное меню
Вегетарианцы, вперед!
Назначение классов элементам
Создание кнопок
Что дальше?
Перемещение по дереву DOM
Методы обхода дерева DOM
Сцепленные вызовы методов
В переменных также могут храниться элементы
И снова знак $...
Хранение данных в массивах
Хранение элементов в массиве
Изменение элементов методом replace With
Чем поможет replace With?
Не торопитесь с replace With
Когда replace With не подходит
Вставка HTML в DOM
Фильтры (часть 1)
Фильтры (часть 2)
Верните гамбургер на место
И где же мясо?
Массив отсоединенных элементов
Метод each и перебор массивов
Вроде... все?
Ваш инструментарий jQuery

5. Плавно и изящно.
Новый заказ
Проект «Собери монстра»
Макет и позиционирование
Еще немного структуры и стиля
Проработка интерфейса
Эффект молнии
Как jQuery выполняет анимацию элементов?
Эффекты изменения прозрачности изменяют свойство CSS opacity
Эффект скольжения
Как работают эффекты изменения прозрачности
Комбинированные эффекты
Задержка при использовании эффектов
Включение функций в сценарий
Самодельные эффекты и animate
Что можно анимировать?
Метод animate изменяет стилевое оформление
Откуда и куда?
Абсолютные и относительные перемещения элементов
Включение вызовов animate в сценарный код
Смотри, мама! Работает без Flash!
Ваш инструментарий j Query

6. Люк jQuery, я твой отец!
Программируем блэкджек
Объекты и хранение данных
Построение собственных объектов
Создание объектов для повторного использования
Взаимодействие с объектами
Подготовка страницы
И снова массивы
Обращение к ячейкам массива
Добавление и обновление ячеек
Повторение операций
Поиск иголки в стоге сена
Пора принимать решение... снова!
Операторы сравнения и логические операторы
Стирание информации в jQuery
Чтобы было красивее
Ваш инструментарий jQuery и JavaScript

7. Что будем делать?
Надвигается буря
Мы создали монстра... функцию-монстра
Управление временными эффектами
Обработка событий браузера в onblur и onfocus
Методы работы с таймером определяют время выполнения функций
Пишем функции stopLightning и goLightning
Новая просьба
Случайные монстры
Мы уже знаем текущую позицию...
...и функция getRandom уже готова
Перемещение относительно текущей позиции
«Собери монстра-2» — настоящий хит!
Ваш инструментарий jQuery

8. Пожалуйста, передайте данные.
Бегом к современным технологиям
Прошлогодняя страница
Даешь динамику!
СТАРЫЕ и НОВЫЕ веб-технологии
Структура Ajax
Что такое Ajax?
Фактор «X»
Получение данных методом ajax
Разбор данных XML
Планирование событий
Самоактивизируемые функции
Сервер нам поможет
Который час?
Отключение планирования событий на странице
Ваш инструментарий jQuery/Ajax

9. Клиент встречается с сервером.
В отделе маркетинга MegaCorp никто не знает XML
Ошибки в XML
Ввод данных на веб-странице
Что делать с данными
Форматирование данных перед отправкой
Отправка данных серверу
Хранение информации в базе данных MySQL
Создание базы данных для информации об участниках
Строение команды insert
Использование РНР для работы с данными
Обработка данных POST на сервере
Подключение к базе данных из кода РНР
Чтение из базы данных
Доступ к данным в коде РНР
На помощь приходит JSON!
jQuery + JSON = потрясающе
Несколько правил РНР...
Правила РНР (еще немного)...
Форматирование вывода средствами РНР
Работа с данными в объекте JSON
Проверка и чистка данных в РНР
Ваш инструментарий jQuery/Ajax/РНР/MySQL

10. Переработка форм.
Cryptozoologists.org нуждается в переработке
Новая форма HTML
jQuery UI экономит время и силы
Содержимое naKeTajQuery UI
Построение календаря
Незаметное вмешательство jQuery UI
Изменение параметров виджета
Стильные кнопки
Ограничение ввода числовых данных
Создание цвета по трем составляющим
Функция refreshSwatch И последнее...
Ваш инструментарий jQuery

11. Объекты, сплошные объекты.
Где видели снежного человека?
Google Maps API
В API используются объекты
Включение карт Google в страницу
Чтение данных JSON средствами SQL и РНР
Точки на карте — маркеры
Список задач для отображения нескольких существ
Прослушивание событий карты
Получилось!!!
Ваш инструментарий jQuery API
Пара слов на прощание...