9185

Работа с JavaScript Framework jQuery

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

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

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

Русский

2013-02-25

357.09 KB

45 чел.

Работа с 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.  Появляется синий фон.


 

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

73628. Статистика результатов экономической деятельности 101.5 KB
  Понятие промышленной продукции и ее видов по степени готовности. Стоимостные показатели объема производства продукции. Факторный анализ изменения объема производства продукции. Анализ динамики производства продукции индексным методом.
73630. Риск-менеджмент в организации 144.78 KB
  Рискменеджмент в организации Система управления риском. Развитие концепции управления риском. Общая характеристика системы управления риском. Свойства системы управления риском.
73631. СВІТОВА ВАЛЮТНА СИСТЕМА 376 KB
  Ця мета потребує щоб: окремі країни проводили економічну та фінансову політику яка б сприяла підтриманню збалансованої міжнародної системи платежів; фінансові механізми забезпечували регулювання платіжного балансу; уряди сприяли збереженню рівноваги на ринках іноземної валюти. Основні елементи національної і світової валютних систем Національна валютна система Світова та міжнародна валютні системи Національна валюта Резервні валюти міжнародні рахункові валютні одиниці Умови конвертування національної валюти Умови взаємного конвертування...
73632. Міжнародна міграція робочої сили 206.5 KB
  Міжнародна міграція робочої сили. Регулювання міжнародної міграції робочої сили. Сутність структура та основні риси світового ринку праці Одним із важливих елементів глобальної економічної системи на яку перетворився світ наприкінці другого тисячоліття є міжнародний ринок праці з його уніфікованою шкалою критеріїв щодо якості трудових ресурсів розвитком нових форм зайнятості гнучкістю та надзвичайною мобільністю сукупної робочої сили. Світовий міжнародний ринок праці це система відносин що виникають між державами з приводу...
73633. Міжнародні розрахунки і платіжний баланс 121.5 KB
  Економічний зміст платіжного балансу та методологія складання. Економічний зміст платіжного балансу та методологія складання. Стан платіжного балансу визначає попит і пропозицію національної й іноземної валюти в цей момент і він є одним із факторів формування валютного курсу. Прибуткові та витратні статті балансу міжнародних рахунків Прибуткові статті Джерела грошових коштів Витратні статті Способи використання грошових коштів Експорт товарів та послуг Імпорт товарів та послуг Приток капіталу Вивіз капіталу Приватні та...
73634. Реформы А.Н. Косыгина и причины их неудач 73.1 KB
  Для изучения этой системы и хода реформы дают материал интервью взятые у министра легкой промышленности СССР 1965 1980 гг. начальника главного управления трикотажной и текстильногалантерейной промышленности Софьи Николаевны Чупрыгиной. Министерство легкой промышленности СССР являлось такой же частью системы государственного управления как другие министерства и принципы его работы были такими же как у них. он прошел путь от сменного мастера на Ореховозуевском хлопчатобумажном комбинате до министра легкой промышленности СССР.
73635. Ответственность организаций и исполнителей за нарушение метрологического обеспечения 75.5 KB
  Дисциплинарная и материальная ответственность исполнителей за нарушение законодательства о метрологическом обеспечении производства и испытаний продукции Федеральный закон Российской федерации О техническом регклировании постатейный коментарий...