9185

Работа с JavaScript Framework jQuery

Лабораторная работа

Информатика, кибернетика и программирование

Работа с JavaScript Framework jQuery Цель: ознакомиться с основными возможностями JavaScript Framework. jQuery, научиться применять его базовые структуры в html документах. jQuery - библиотека Javascript, фокусирующаяся на взаимодействии Javasc...

Русский

2013-02-25

357.09 KB

48 чел.

Работа с JavaScript Framework jQuery

Цель: ознакомиться с основными возможностями JavaScript Framework. jQuery, научиться применять его базовые структуры в html документах.

jQuery – библиотека Javascript, фокусирующаяся на взаимодействии Javascript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API при работе с AJAX.

Как работает jQuery?

для начала Вам понадобится сам фреймворк, его вы сможете скачать с домашней страницы проекта (http://jquery.com/), затем проинициализировать: 

А основные моменты Вам поможет понять следующая диаграмма:


Как получить элемент с помощью jQuery?

Для того чтобы понимать как работает селектор Вам все-же необходимы базовые знания CSS, т.к. именно от принципов CSS отталкивается селектор jQuery:

  1.  $(“#header”) – получение элемента с id=”header”
  2.  $(“h3″) – получить все <h3> элементы
  3.  $(“div#content .photo”) – получить все элементы с классом =”photo” которые находятся в элементе div с id=”content”
  4.  $(“ul li”) – получить все <li> элементы из списка <ul>
  5.  $(“ul li:first”) – получить только первый элемент <li> из списка <ul>

Выдвижная панель

Реализуем достаточно часто встречающийся на сайтах элемент, выдвижную панель. Она будет представлять блок, который появляется/исчезает по клику на кнопку.

Код html:

Код Jquery:


Результат:

/* Необходимо создать файл с именем lab_1_1.html, где будут реализованы эти элементы */

Следующий пример покажет как можно красиво и легко убирать (растворять) элементы на странице.

Код html:

Код Jquery:

Результат:

/* Необходимо дополнить файл lab_1_1.html, этими элементами */


Связанная анимация

Рассмотрим более сложный пример, который лучше раскрывает функциональность Jquery. Нам необходимо управлять положением элемента на странице, его размером и прозрачностью.

Код html:

Код Jquery:

Результат:

Краткий разбор кода:

Line 1: привязываемся к событию click для элемента <a class=”run”>

Line 2: манипулируем элементом <div id=”box”> – уменьшаем его прозрачность до 0.1, наращиваем позицию left еще на 400px, со скоростью 1200 (milliseconds)

Line 3: затем медленно изменяем следующие параметры: opacity=0.4, top=160px, height=20, width=20; скорость анимации указывается вторым параметром : “slow”, “normal”, “fast” или в миллисекундах

Line 4: затем opacity=1, left=0, height=100, width=100, скорость – “slow”

Line 5: затем top=0, скорость – “fast”

Line 6: затем slideUp (с дефолтной скоростью анимации – “normal”)

Line 7: затем slideDown, скорость – “slow”

Line 8: возвращаем false для того чтобы браузер не перешел по ссылке

/* Необходимо дополнить файл lab_1_1.html, этими элементами */

Реализация блоков «Аккордеон»

Рассмотрим очень распространенный в современном вебе элемент, блоки, организованные «гармошкой» или «аккордеоном». 

Код Jquery:


Код html:

Результат:

/* Необходимо дополнить файл lab_1_1.html, этими элементами */

Разберем записанный код:

Первой строчкой мы добавляем класс “active” первому элементу <h3> внутри <div class=”accordion”> (класс”active” отвечает за смену цвета блока).

Во второй строчке мы прячем все не первые <p> элементы внутри <div class=”accordion”>.

Когда происходит клик по заголовку <h3>, для следующего в нём элемента <p> будет применен эффект slideToggle, затем для всех остальных элементов <p> будет применен эффект slideUp.

Следующие действие изменяет класс заголовка на “active”, затем ищем все остальные заголовки <h3> и убираем у них класс “active”

Мы рассмотрели несколько примеров применения популярного фреймворка jquery.

В заключении рассмотрим инструментарий при работе с jquery

Выбор элементов по Id либо ClassName аналогично используемому в CSS

Выбор элементов из иерархии объектов DOM:


Фильтры:

Индивидуальные задания:

  1.  Создать кнопку, по клику на которой заданный элемент на странице будет вести себя следующим образом:

1

Коричневый квадрат 50*50 пикс.

1.Исчезает

2. Появляется на 50 пикселей правее

3. Увеличивается в 2 раза.

4. Движется вниз на 100 пикселей.

5. Меняет цвет на красный

6. Плавно исчезает.

2

Зеленый прямоугольник 40*200 пикс

  1.  Отображается в левом верхнем углу окна браузера
  2.  Движется к правому верхнему углу  браузера.
  3.  Меняет прозрачность до 0,5
  4.  Меняет цвет на красный
  5.  Движется на исходную позицию в левый верхний угол
  6.  Увеличивает размеры в 2 раза.

3

Красная окружность R=50 пикс (не использовать картинки)

  1.  Отображается в правом нижнем углу окна браузера
  2.  Изменяет прозрачность до 0,35
  3.  Изменяет радиус на 30 пикселей
  4.  Движется в левый верхний угол окна браузера
  5.  Изменяет цвет на зеленый
  6.  Складывается и отображается

4

Слово ИСПР

  1.  Меняет регистр (с верхнего на нижний)
  2.  Движется на 50 пикселей вправо и на 70 вниз
  3.  Становится жирным
  4.  Движется на 20 пикселей влево и на 80 вниз
  5.  Становится подчеркнутым.
  6.  Плавно исчезает

5

Серый квадрат 80*80 пикс посередине слово КВАДРАТ

  1.  Отображается в центре окна браузера.
  2.  Исчезает слово Квадрат
  3.  Появляется черная рамка толщиной 2 пикселя
  4.  Движется в правый верхний угол
  5.  Увеличивается в 3 раза
  6.  Движется в левый нижний угол по пути изменяя прозрачность до 0

6

Черный квадрат

  1.  Отображается в центре окна браузера
  2.  Движется вниз до нижней границы окна браузера
  3.  Движется вверх до верхней границы окна браузера
  4.  Плавно исчезает
  5.  Плавно появляется
  6.  Изменяет цвет на зеленый

7

Круг R=100 пикс (не использовать картинки)

  1.  Отображается с отступами 50 пикселей от верхней границы и 200 пикселей от левой границы
  2.  Изменяет радиус до 50 пикселей.
  3.  Изменяет цвет на красный.
  4.  Начинает движение в центр экрана
  5.  Изменяет прозрачность до 0.8
  6.  Движется в левый верхний угол растворяясь.

8

Ваша фотография с отношением сторон 3*4

  1.  Отображается по центру вверху окна браузера.
  2.  Появляется подпись под фото (ФИО)
  3.  Фотография уменьшает размер в 2 раза
  4.  Движется по вертикали до нижней границы окна браузера
  5.  Фото меняется на другое
  6.  Растворяется.

9

Фраза в зеленой рамке: От топота копыт пыль по полю летит

  1.  Появляется в левом нижнем углу окна браузера
  2.  Изменяется цвет рамки на красный
  3.  Движется в противоположный угол окна браузера
  4.  Исчезает фраза (рамка остается)
  5.  Движется к нижней границе окна браузера
  6.  Появляется фраза

10

Текстовое поле ввода

  1.  Появляется с отступами 30 пикселей от нижней границы и 180 пикселей от правой границы окна браузера
  2.  Смещается в левый верхний угол
  3.  Изменяет цвет рамки на красный
  4.  В текстовом поле появляется слово МАМА
  5.  Поле перемещается в правый верхний угол
  6.  Исчезает

11

Сама кнопка, по которой будет произведен клик

  1.  Кнопка уменьшается в размерах на 50%
  2.  Движется в правый верхний угол
  3.  Исчезает
  4.  Появляется в противоположном углу
  5.  Изменяет прозрачность до 0,5
  6.  Движется к верхней границе окна браузера

12

Значок HTML5

  1.  Отображается в центре по горизонтали и с отступом 40 пикселей сверху
  2.  Увеличивает размер в 2 раза
  3.  Движется в правый нижний угол
  4.  Исчезает
  5.  Появляется в левом верхнем углу
  6.  Снова исчезает

13

Серый прямоугольник со сторонами 150*50

  1.  Отображается в правом нижнем углу окна браузера
  2.  Плавно изменяет цвет на черный
  3.  Движется в противоположный угол окна браузера
  4.  Исчезает
  5.  Проявляется в левом нижнем углу
  6.  Уменьшается в 2 раза

14

3 вложенных друг в друга блока, с рамками разных цветов

  1.  Отображается в левом верхнем углу окна браузера
  2.  Все рамки меняют цвета.
  3.  Движется в правый нижний угол
  4.  Исчезает
  5.  Проявляется в левом нижнем углу
  6.  Появляется синий фон.


 

А также другие работы, которые могут Вас заинтересовать

53710. Объемная открытка. Бумажная пластика 64.5 KB
  Обучить: выполнять поделки в стиле бумажная пластика видам бумажной пластики приёмам складывания технике безопасности при использовании ножниц клея. Оборудование урока: для учителя: ПТК открытки шаблоны конспект урока. Изделие План урока № этапа урока вида работ Название этапа урока вида работ Время Всего 45 минут I.
53711. Безличные глаголы 75 KB
  Вызванный к доске должен назвать наклонение определить число выделить окончание и суффикс если не справляется вызывается желающий ответить с места а стоящий у доски подписывает выделяет части слова. наклонение от глагола подержать т.
53712. Виды односоставных предложений 37.5 KB
  Совершенствовать умение различать виды односоставных предложений. Развитие умений определять стилистическую роль односоставных предложений. А сейчас мы познакомимся с видами односоставных предложений.
53713. Определенно-личные предложения 31.5 KB
  Но сначала я проведу небольшую самостоятельную работу по односоставным предложениям в целом.С Есенин Задание: найти односоставные предложения подписать над предложениями выделить грамматические основы. Определите тип предложения: односоставное двусоставное.
53714. Безличные предложения 131.5 KB
  Вначале повторим что же такое безличные предложения и чем в них выражено сказуемое. Здесь надо найти односоставные предложения определить их тип объяснить постановку знаков препинания. Личные предложения замените безличными.
53715. Безличные предложения, повторение наречий 46.5 KB
  Что же такое наречия Наречия - это слова которые обозначают вторичный признак обладают нулевой словоизменительной парадигмой являются неизменяемыми. В предложении наречия выполняют функцию обстоятельства. Наречия сочетаются с глаголами прилагательными наречиями. Исключение составляют только наречия обладающие формами степени сравнения.
53716. Назывные предложения 36.5 KB
  Это назывные предложения. Назывные предложения могут быть распространёнными и нераспространёнными. Сравните предложения: Вечер.
53717. Род имен существительных 57 KB
  Первое слово начинается на ог. Что это помидор Слово рассыпалось токарельф. горох Отгадайте слово по лексическому значению. Как узнали поставили слово в единственное число Как узнать род имени существительного которое стоит во множественном числе Об этом гласит правило на странице 21 вашего учебника.
53718. Правописание окончаний имен существительных множественного числа 50 KB
  Содействовать обогащению словаря учащихся. А еще как вы думаете надо научиться правильно соединять буквы в словах 2. Комбинированная словарная работа.Посмотрите на доске написаны слова прочитайте их : аптека девочка малина магазин календарь метро картофель.