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


 

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

4733. Соціологія, як наука. Її місце в системі наук 910.96 KB
  Предмет соціології та її місце в системі суспільної науки. Структура та функції соціології. Мета вивчення соціології. Societas – суспільство. Logos – наука...
4734. Современные проблемы отечественной энергетики 49.5 KB
  Введение В данном реферате отображены некоторые проблемы, стоящие перед энергетическим сектором страны, и возможные пути их решения. В работе рассмотрены вопросы выработки ресурса энергетического оборудования, эксплуатирующегося в РАО ЕЭС России...
4735. Стены из облегченной кладки 110 KB
  Стены из облегченной кладки Выполнение наружных стен зданий из облегченной кладки с утеплителями, позволяет существенно уменьшить расход кирпича и цемента, а также повысить сопротивление стен теплопередаче, что уменьшает расход топлива. Рекомендуетс...
4736. Системы автоматической посадки самолетов для XXI века 60 KB
  Системы автоматической посадки самолетов для XXI века Катастрофа в августе 1997 года. самолета Boeing-747, выполнявшего заход на посадку по неточной системе посадки (non-precision) ночью в сложных метеоусловиях на ВПП 06L международного аэропорта...
4737. Основы технологии производства установок ЛА 8.68 MB
  Основы технологии производства установок ЛА. Основные понятия и определения. Процесс изготовления изделия проходит много этапов, начиная с добычи руды (продукт природы) и превращения её на металлургических предприятиях в металл или по...
4738. Конденсаційні установки. Замкненість пароводяного циклу ТЕС та АЕС 1.09 MB
  Конденсаційні установки Замкненість пароводяного циклу ТЕС та АЕС досягається конденсацією відпрацьованої пари у конденсаційній установці (конденсаторі). Цей процес відбувається при постійному тискові завдяки передачі тепла конденсації пари во...
4739. Применение уравнения Шредингера 120.5 KB
  Применение уравнения Шредингера Частица в потенциальной яме с бесконечно высокими стенками. Пусть в одномерном пространстве создано силовое поле, потенциальная энергия которого бесконечна везде, кроме области...
4740. Развитие и деловая оценка персонала на примере ФГУП Институт реакторных материалов 663.5 KB
  Введение Жизнестойкость, конкурентоспособность национальной экономики напрямую зависят от того, насколько образованы и подготовлены к профессиональной деятельности работники, насколько эффективно используются их знания и навыки, как отлажен механизм...
4741. Расчёт эксплуатационных свойств автомобиля 512 KB
  Введение Тяговый расчет автомобиля производится с целью определения его тяговых и динамических качеств. Тяговый расчет подразделяется на: тяговый расчет проектируемой машины поверочный тяговый расчет, производимый для существующей машины. Поверочны...