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


 

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

17658. Закони заломлення для металів. Неоднорідна хвиля 137.46 KB
  Закони заломлення для металів. Неоднорідна хвиля. Конспект: для золота Для нормальной составляющей: ...
17659. Зв’язок між ступенем когерентності і параметром видності 44.88 KB
  Звязок між ступенем когерентності і параметром видності. Поняття когерентності повязане зі здатністю хвиль інтерферувати. Розглянемо ступінь когерентності на прикладі часової когерентності. Нехай в т. Р одночасно в момент часу t приходять 2 хвилі однакової частоти в...
17660. Зірковий інтерферометр Майкельсона 37.3 KB
  1 Зірковий інтерферометр Майкельсона Запропонував Фізо. Для визначення кутових розмірів обєкту зірки. Розміщені навпроти щілин дзеркала нерухомі а дзеркала можна одночасно розсувати. Очевидно що видність смуг залежить від ступеня когерентно
17661. Інтерференція в тонких шарах інтерференційні дзеркала та просвітлююча оптика 28.84 KB
  Інтерференція в тонких шарах: інтерференційні дзеркала та просвітлююча оптика. При освітленні тонкої плівки відбувається накладання хвиль від джерела S які відбилися від передньої і задньої поверхонь плівки. Якщо світло біле то інтерференції смуги будуть кольоро...
17662. Інтерференція поляризованих променів 63.33 KB
  Інтерференція поляризованих променів. Як відомо для інтерференції необхідною умовою є когерентність променів. А також із відомої формули для інтерференційного члена що враховує взаємодію пучків: видно що результат інтерференції лінійно поляризованих променів зале
17663. Інформаційні властивості оптичного зображення 21.59 KB
  Інформаційні властивості оптичного зображення. Потік інформації біт/с виражається формулою Шенона де I кількість інформації у бітах; смуга частот у якій передається інформація; Pc характеристика сигналу потужність в даному разі; Pm характеристика смуги мінімаль
17664. Квантова дисперсійна формула (порівняння з класичною) 24.1 KB
  Квантова дисперсійна формула порівняння з класичною Величини Nkкількості атомів kвласні частоти kкоефіцієнти згасання у класичній теорії дисперсії розглядаються як емпіричні сталі тобто ці величини визначаються з самої кривої дисперсії та положенням спектральн
17665. Класична теорія дисперсії 56.13 KB
  Класична теорія дисперсії. Припустимо що поле представляється плоскою хвилею Амплітуда поля змінюється від точки до точки отже електрон піддається дії поля різної амплітуди. Однак ми знехтуємо цією обставиною вважаючищо амплітуда коливань електрона мала в порі
17666. Комбінаційне розсіяння світла 30.54 KB
  Комбінаційне розсіяння світла. При спектральных исследованиях рассеяния света Мандельштам и Ландсберг обнаружили что каждая спектральная линия падающего света сопровождается появлением системы линий измененной частоты называемых сателлитами .Изменение длины волн