Учебное пособие. – СПб: Университет ИТМО, 2015.– 142 с.
Учебное пособие предназначено как для начинающих разработчиков, так
и для специалистов, уже занимающихся разработкой Web‐сайтов. JQuery
– бесплатный JavaScript‐фреймворк позволяющий расширить
функциональность и добавить различные эффекты к пользовательскому
интерфейсу веб‐приложения. В курсе будет продемонстрированы примеры
добавления интерактивных и динамичных компонентов страницы,
различных элементов управления, эффектов и плагинов. Учебное
пособие используется при изучении дисциплины «Языки разработки
приложений для Web» магистерских программ «Web‐технологии» и
«Компьютерная графика и Web‐дизайн» в рамках направления подготовки
09.04.02 «Информационные системы и технологии».
Пособие предназначено для тех учащихся, которые не имеют доступ к специальным учебным файлам (ресурсам), размещенным в аудиториях Университета ИТМО или в центре дистанционного обучения Академии методов и техники управления (ЛИМТУ) — de.ifmo‐online.ru. Содержание.
Введение в jQuery.
Библиотеки JavaScript.
Библиотека jQuery.
Начало работы с jQuery.
Выбор элементов с помощью селекторов и фильтров.
Селекторы.
Базовые селекторы выбора.
Универсальный селектор *.
Селектор выбора по классу.
Селектор выбора по идентификатору.
Селектор выбора по имени тега.
Выбор элементов с помощью комбинирования селекторов.
Выбор нескольких элементов.
Выбор потомков элемента.
Выбор прямых потомков элемента.
Выбор следующего селектора.
Выбор всех следующих селекторов.
Выбор элементов по атрибутам.
Выбор элемента по имени атрибута.
Выбор элемента по имени и значению атрибута.
Выбор элемента по несовпадению с атрибутом.
Выбор элемента по началу названия атрибута.
Выбор элемента по концу названия атрибута.
Выбор элемента по части названия атрибута.
Выбор элемента по слову в атрибуте.
Выбор элементов по нескольким атрибутам.
Выбор элемента по языку.
Фильтры.
Базовые фильтры.
Выбор элемента по индексу.
Выбор четных элементов.
Выбор нечетных элементов.
Выбор первого дочернего элемента.
Выбор последнего дочернего элемента.
Выбор элемента в фокусе.
Выбор элементов, идущих после указанного.
Выбор элементов, идущих до указанного.
Выбор заголовков.
Выбор элементов, которые в настоящий момент участвуют в анимации.
Инвертирование выделения элементов.
Фильтры видимости объектов.
Выделение невидимых элементов.
Выделение видимых элементов.
Фильтры дочерних элементов.
Выбор первых вложенных элементов.
Выбор последних вложенных элементов.
Выбор первого указанного элемента.
Выбор последнего указанного элемента.
Выбор указанного элемента в своих родителях.
Выбор указанного элемента, считая от последнего дочернего элемента.
Выбор определенного элемента в своих родителях.
Выбор определенного элемента, считая от последнего дочернего элемента.
Выбор единственного дочернего элемента.
Выбор единственного указанного дочернего элемента.
Фильтры по содержимому.
Выбор элемента по тексту.
Выбор всех непустых элементов.
Выбор пустых элементов.
Выбор элементов с указанным тегом.
Фильтры элементов форм.
Выбор всех элементов форм.
Выбор кнопок.
Выбор кнопок «Отправить».
Выбор кнопок «Очистить».
Выбор «Флажков».
Выбор «Переключателей».
Выбор текстовых полей.
Выбор полей для ввода паролей.
Выбор полей для загрузки файлов.
Выбор кнопки отправки формы в виде изображения.
Выбор выпадающего меню.
Выделение выбранных элементов.
Выделение активных элементов.
Выделение заблокированных элементов.
Практические задания к теме.
Выбор элементов по классу.
Выбор элементов по идентификатору и имени тега.
Выбор смежных элементов.
Выбор элементов по атрибуту и значению.
Выбор элемента по нескольким атрибутам.
Выбор четных и нечетных элементов.
Выбор элементов до и после указанного.
Выбор первого и последнего элемента.
Инвертирование выделения элементов.
Выбор первого и последнего дочернего элемента.
Выбор элемента по содержимому.
Выбор кнопок формы.
Выбор элементов формы.
Самостоятельная работа к теме.
Выбор элементов.
Манипуляции с элементами, их свойствами и содержимым.
Манипуляции со стилями.
Функция CSS.
Определение наличия класса у элемента.
Добавление класса к элементу.
Удаление класса из элемента.
Управление высотой элемента.
Управление шириной элемента.
Определение позиции элемента.
Определение положения полосы прокрутки.
Добавление или удаление класса.
Управление атрибутами.
Возвращение и изменение атрибута элемента.
Удаление атрибута элемента.
Изменение свойств атрибутов элемента.
Удаление свойства элемента.
Замена и клонирование элементов.
Замена элементов и содержимого.
Клонирование элементов и их содержимого.
Удаление элемента и его содержимого.
Удаление элементов.
Удаление содержимого элемента.
Удаление родительских элементов.
Добавление содержимого элемента.
Работа с html‐содержимым элемента.
Изменение текстового содержимого элемента.
Изменение содержимого атрибута value.
Добавление содержимого в конец элемента.
Добавление содержимого в начало элемента.
Добавление содержимого после элемента.
Добавление содержимого до элемента.
Обертывание элементов.
Обертывание содержимого элемента.
Практические задания к теме.
Использование функции сss.
Добавление и удаление класса к элементу.
Добавление класса к элементу.
Изменение положения на странице.
Изменение положения прокрутки на странице.
Изменение класса элемента.
Добавление и удаление атрибута.
Добавление и удаление значений атрибута.
Замена и клонирование элемента.
Удаление элементов и их содержимого.
Изменение содержимого элемента.
Добавление содержимого в начало и конец элемента.
Добавление элемента до и после выбранного элемента.
Обёртывание элемента и его содержимого.
Самостоятельная работа к теме.
Самостоятельная работа. Выбор элементов.
События.
Объект event.
Определение типа события.
Время запуска события.
Пространство имен.
Прямая и делегированная обработка (параметр selector).
Обработчики событий.
Дополнительные данные в обработчике событий.
Определение источника события.
Определение положения курсора мыши.
Базовые события.
События на выбранных элементах.
Удаление обработчиков событий.
Событие на выбранных элементах.
Удаление обработчика событий.
События мыши.
Обработчик события click.
Обработчик события dblclick.
Обработчик события hover.
Нажатие клавиши мыши.
Отпуск клавиши мыши.
Наведение курсора мыши на элемент.
Выход курсора мыши с элемента.
Движение мышью.
Поочерёдное выполнение нескольких функций.
События загрузки страницы.
Обработка загрузки DOM.
Обработка загрузки страницы.
Обработка выгрузки страницы.
События браузера.
Обработчик ошибки.
Изменение окна браузера.
Прокрутка документа.
События клавиатуры.
Нажатие клавиши клавиатуры.
Отпускание клавиши клавиатуры.
Определение введенного символа.
События формы.
Получение фокуса элементом.
Потеря фокуса элементом.
Выделение текста. Событие Select.
Изменение элемента формы. Событие Change.
Отправка формы. Событие Submit.
Практические задания к теме.
Всплытие событий.
Поля метода Event.
Делегирование событий.
Извлечение данных, переданных событием.
Событие on и удаление события.
Событие one и его удаление.
События мыши.
Использование метода toggle.
События браузера.
События клавиатуры.
Самостоятельная работа к теме.
Определение положения курсора мыши.
Определение времени события.
Методы работы с наборами элементов.
Перемещение по иерархии DOM.
Поиск заданных дочерних элементов.
Поиск родительских элементов.
Поиск дочерних элементов по заданному селектору.
Выбор элементов, лежащих после указанного.
Выбор элементов, лежащих перед указанным.
Выбор позиционированного родителя.
Выбор лежащих рядом элементов.
Фильтрация элементов набора.
Метод filter.
Метод is.
Поиск элементов по индексам.
Дополнительные методы.
Добавление элементов в набор.
Возвращение к предыдущему набору элементов.
Объединение выбранных наборов.
Содержимое элемента.
Функция для элемента в наборе элемента.
Элементы набора элементов.
Преобразование набора элементов в массив.
Индекс элемента в массиве.
Размер набора элементов.
Пользовательские данные элемента.
Практические задания к теме.
Поиск родительских элементов.
Выбор элементов(,) лежащих после указанного.
Выбор элементов, лежащих перед указанным.
Фильтрация элементов набора.
Объединение выбранных наборов.
Содержимое элемента.
Функция для элемента в наборе элемента.
Самостоятельная работа к теме.
Выбор позиционированного родителя.
Содержимое элемента.
Массив элементов.
Анимация и эффекты jQuery.
Встроенные функции анимации.
Появление и скрытие элемента.
Сворачивание и разворачивание элемента.
Поочередное разворачивание и сворачивание элементов.
Изменение прозрачности элемента.
Изменение уровня прозрачности элемента.
Поочередное появление и скрытие элементов.
Управление анимацией.
Создание пользовательской анимации.
Изменение очереди анимации.
Очистка очереди функций.
Приостановка анимации.
Завершение и остановка анимации.
Изменение скорости анимации.
Отмена всех анимации.
Выбор анимированного элемента.
Практические задания к теме.
Появление и скрытие элемента.
Использование прозрачности.
Одновременная и последовательная анимация.
Вставка функции в очередь.
Остановка анимации.
Самостоятельная работа к теме.
Сворачивание и разворачивание элемента.
Последовательное изменение прозрачности элемента.
Пособие предназначено для тех учащихся, которые не имеют доступ к специальным учебным файлам (ресурсам), размещенным в аудиториях Университета ИТМО или в центре дистанционного обучения Академии методов и техники управления (ЛИМТУ) — de.ifmo‐online.ru. Содержание.
Введение в jQuery.
Библиотеки JavaScript.
Библиотека jQuery.
Начало работы с jQuery.
Выбор элементов с помощью селекторов и фильтров.
Селекторы.
Базовые селекторы выбора.
Универсальный селектор *.
Селектор выбора по классу.
Селектор выбора по идентификатору.
Селектор выбора по имени тега.
Выбор элементов с помощью комбинирования селекторов.
Выбор нескольких элементов.
Выбор потомков элемента.
Выбор прямых потомков элемента.
Выбор следующего селектора.
Выбор всех следующих селекторов.
Выбор элементов по атрибутам.
Выбор элемента по имени атрибута.
Выбор элемента по имени и значению атрибута.
Выбор элемента по несовпадению с атрибутом.
Выбор элемента по началу названия атрибута.
Выбор элемента по концу названия атрибута.
Выбор элемента по части названия атрибута.
Выбор элемента по слову в атрибуте.
Выбор элементов по нескольким атрибутам.
Выбор элемента по языку.
Фильтры.
Базовые фильтры.
Выбор элемента по индексу.
Выбор четных элементов.
Выбор нечетных элементов.
Выбор первого дочернего элемента.
Выбор последнего дочернего элемента.
Выбор элемента в фокусе.
Выбор элементов, идущих после указанного.
Выбор элементов, идущих до указанного.
Выбор заголовков.
Выбор элементов, которые в настоящий момент участвуют в анимации.
Инвертирование выделения элементов.
Фильтры видимости объектов.
Выделение невидимых элементов.
Выделение видимых элементов.
Фильтры дочерних элементов.
Выбор первых вложенных элементов.
Выбор последних вложенных элементов.
Выбор первого указанного элемента.
Выбор последнего указанного элемента.
Выбор указанного элемента в своих родителях.
Выбор указанного элемента, считая от последнего дочернего элемента.
Выбор определенного элемента в своих родителях.
Выбор определенного элемента, считая от последнего дочернего элемента.
Выбор единственного дочернего элемента.
Выбор единственного указанного дочернего элемента.
Фильтры по содержимому.
Выбор элемента по тексту.
Выбор всех непустых элементов.
Выбор пустых элементов.
Выбор элементов с указанным тегом.
Фильтры элементов форм.
Выбор всех элементов форм.
Выбор кнопок.
Выбор кнопок «Отправить».
Выбор кнопок «Очистить».
Выбор «Флажков».
Выбор «Переключателей».
Выбор текстовых полей.
Выбор полей для ввода паролей.
Выбор полей для загрузки файлов.
Выбор кнопки отправки формы в виде изображения.
Выбор выпадающего меню.
Выделение выбранных элементов.
Выделение активных элементов.
Выделение заблокированных элементов.
Практические задания к теме.
Выбор элементов по классу.
Выбор элементов по идентификатору и имени тега.
Выбор смежных элементов.
Выбор элементов по атрибуту и значению.
Выбор элемента по нескольким атрибутам.
Выбор четных и нечетных элементов.
Выбор элементов до и после указанного.
Выбор первого и последнего элемента.
Инвертирование выделения элементов.
Выбор первого и последнего дочернего элемента.
Выбор элемента по содержимому.
Выбор кнопок формы.
Выбор элементов формы.
Самостоятельная работа к теме.
Выбор элементов.
Манипуляции с элементами, их свойствами и содержимым.
Манипуляции со стилями.
Функция CSS.
Определение наличия класса у элемента.
Добавление класса к элементу.
Удаление класса из элемента.
Управление высотой элемента.
Управление шириной элемента.
Определение позиции элемента.
Определение положения полосы прокрутки.
Добавление или удаление класса.
Управление атрибутами.
Возвращение и изменение атрибута элемента.
Удаление атрибута элемента.
Изменение свойств атрибутов элемента.
Удаление свойства элемента.
Замена и клонирование элементов.
Замена элементов и содержимого.
Клонирование элементов и их содержимого.
Удаление элемента и его содержимого.
Удаление элементов.
Удаление содержимого элемента.
Удаление родительских элементов.
Добавление содержимого элемента.
Работа с html‐содержимым элемента.
Изменение текстового содержимого элемента.
Изменение содержимого атрибута value.
Добавление содержимого в конец элемента.
Добавление содержимого в начало элемента.
Добавление содержимого после элемента.
Добавление содержимого до элемента.
Обертывание элементов.
Обертывание содержимого элемента.
Практические задания к теме.
Использование функции сss.
Добавление и удаление класса к элементу.
Добавление класса к элементу.
Изменение положения на странице.
Изменение положения прокрутки на странице.
Изменение класса элемента.
Добавление и удаление атрибута.
Добавление и удаление значений атрибута.
Замена и клонирование элемента.
Удаление элементов и их содержимого.
Изменение содержимого элемента.
Добавление содержимого в начало и конец элемента.
Добавление элемента до и после выбранного элемента.
Обёртывание элемента и его содержимого.
Самостоятельная работа к теме.
Самостоятельная работа. Выбор элементов.
События.
Объект event.
Определение типа события.
Время запуска события.
Пространство имен.
Прямая и делегированная обработка (параметр selector).
Обработчики событий.
Дополнительные данные в обработчике событий.
Определение источника события.
Определение положения курсора мыши.
Базовые события.
События на выбранных элементах.
Удаление обработчиков событий.
Событие на выбранных элементах.
Удаление обработчика событий.
События мыши.
Обработчик события click.
Обработчик события dblclick.
Обработчик события hover.
Нажатие клавиши мыши.
Отпуск клавиши мыши.
Наведение курсора мыши на элемент.
Выход курсора мыши с элемента.
Движение мышью.
Поочерёдное выполнение нескольких функций.
События загрузки страницы.
Обработка загрузки DOM.
Обработка загрузки страницы.
Обработка выгрузки страницы.
События браузера.
Обработчик ошибки.
Изменение окна браузера.
Прокрутка документа.
События клавиатуры.
Нажатие клавиши клавиатуры.
Отпускание клавиши клавиатуры.
Определение введенного символа.
События формы.
Получение фокуса элементом.
Потеря фокуса элементом.
Выделение текста. Событие Select.
Изменение элемента формы. Событие Change.
Отправка формы. Событие Submit.
Практические задания к теме.
Всплытие событий.
Поля метода Event.
Делегирование событий.
Извлечение данных, переданных событием.
Событие on и удаление события.
Событие one и его удаление.
События мыши.
Использование метода toggle.
События браузера.
События клавиатуры.
Самостоятельная работа к теме.
Определение положения курсора мыши.
Определение времени события.
Методы работы с наборами элементов.
Перемещение по иерархии DOM.
Поиск заданных дочерних элементов.
Поиск родительских элементов.
Поиск дочерних элементов по заданному селектору.
Выбор элементов, лежащих после указанного.
Выбор элементов, лежащих перед указанным.
Выбор позиционированного родителя.
Выбор лежащих рядом элементов.
Фильтрация элементов набора.
Метод filter.
Метод is.
Поиск элементов по индексам.
Дополнительные методы.
Добавление элементов в набор.
Возвращение к предыдущему набору элементов.
Объединение выбранных наборов.
Содержимое элемента.
Функция для элемента в наборе элемента.
Элементы набора элементов.
Преобразование набора элементов в массив.
Индекс элемента в массиве.
Размер набора элементов.
Пользовательские данные элемента.
Практические задания к теме.
Поиск родительских элементов.
Выбор элементов(,) лежащих после указанного.
Выбор элементов, лежащих перед указанным.
Фильтрация элементов набора.
Объединение выбранных наборов.
Содержимое элемента.
Функция для элемента в наборе элемента.
Самостоятельная работа к теме.
Выбор позиционированного родителя.
Содержимое элемента.
Массив элементов.
Анимация и эффекты jQuery.
Встроенные функции анимации.
Появление и скрытие элемента.
Сворачивание и разворачивание элемента.
Поочередное разворачивание и сворачивание элементов.
Изменение прозрачности элемента.
Изменение уровня прозрачности элемента.
Поочередное появление и скрытие элементов.
Управление анимацией.
Создание пользовательской анимации.
Изменение очереди анимации.
Очистка очереди функций.
Приостановка анимации.
Завершение и остановка анимации.
Изменение скорости анимации.
Отмена всех анимации.
Выбор анимированного элемента.
Практические задания к теме.
Появление и скрытие элемента.
Использование прозрачности.
Одновременная и последовательная анимация.
Вставка функции в очередь.
Остановка анимации.
Самостоятельная работа к теме.
Сворачивание и разворачивание элемента.
Последовательное изменение прозрачности элемента.