Практическое занятие № 13

Тема: Создание интерактивных страниц с помощью библиотеки JQuery

Цель работы: получить практические навыки по использованию возможностей библиотеки JQuery при создании HTML страниц

Ход работы

Пусть имеется страница вида (скачать). С помощью библиотеки JQuery реализуйте ряд возможностей.

1. Подключите библиотеку JQuery и введите заготовку для ввода кода.

Указания: Для работы с библиотекой нужно подключить файл jquery.js. Заготовка для ввода кода означает, что нужно дождаться загрузки DOM-дерева документа и затем начать выполнение остального кода.

В разделе head добавьте теги вида:

2. После загрузки страницы сделайте заливку таблицы цветом lightblue. Для двух текстовых полей для ввода чисел задайте границу, а для поля с результатом задайте заливку синим цветом и цвет текста для поля белый.

Внутри заготовки кода JQuery напишите команды:

3. Реализуйте выпадающее меню средствами JQuery.

Указания: обратите внимание на исходный код документа. Каждый пункт меню - это тег li с классом main_menu. За каждым тегом li идет тег ul со списком команд, который должны появляться при щелчке мышью.

Внутри заготовки кода JQuery напишите команды:

4. На форме реализуйте расчет, тип которого задается с помощью группы переключателей.

Указания: каждый переключатель имеет атрибут value=V1, V2, V3. Для распознавания выбранного переключателя будем проверять этот атрибут.

Внутри заготовки кода JQuery добавьте код

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

Указания: вначале получим все ячейки второго столбца второй таблицы. Для каждой такой ячейки присвоим два события: mouseover - наведение мыши, mouseout - уход мыши.

Изображения, которые будут отображаться в таблице, пронумерованы от 01 до 05. В коде будем получать номер ячейки и по номеру показывать соответствующее изображение.

Внутри заготовки кода JQuery добавьте код:

Можно воспользоваться методом hover, который срабатывает при наведении мышкой на элемент и при уходе с элемента

6. У сотрудников со стажем 15 лет и более, закрасить строки белым цветом.

7. На основе группы гиперссылок выполните следующее оформление:

- ссылки на внешние сайты помечаются изображением http.png;

- ссылки на e-mail - email.png;

- остальные ссылки - file.png.

Указания: все ссылки находятся в блоке #slider. Нужно отобрать эти ссылки, затем уточнить набор с помощью проверки атрибута href. Затем перед каждой отобранной ссылкой нужно отобразить картинку с помощью добавления тега <img>.

Внутри заготовки кода JQuery добавьте код:

8. Ниже под таблицей добавьте 5 абзацев текста. У всех абзацев добавьте отступы сверху 10px (margin-top) и отступы внутри 5 px (padding).

Все нечетные абзацы сделайте курсивом и обведите синей рамкой, все четные - жирным и зеленой рамкой.

Указания: выполните задание самостоятельно с учетом подсказок.

При выделении четных и нечетных абзацев используйте уточняющий селектор p:odd или p:even.

Для присваивания нескольких CSS правил каждому элементу выборки используйте метод вида:

.css({свойство: 'значение', свойство: 'значение', и т.д.});

При этом имена свойств записываются по правилам CSS (например: font-size).

9. Установите всем колонкам одинаковую высоту, по максимальному значению.

Указания: все колонки - это дети блока #wrapper.

Необходимо отобрать эти элементы, найти среди них максимальное значение высоты и присвоить это значение всем колонкам.

Внутри заготовки кода JQuery добавьте код: