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


 

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

34195. Необходимость, сущность и направления государственного регулирования экономики 23.13 KB
  Необходимость сущность и направления государственного регулирования экономики. Необходимость и сущность государственного регулирования экономики Необходимость государственного вмешательства в экономику обусловлена теми недостатками и отрицательными явлениями которые развиваются в процессе функционирования свободной стихийной рыночной экономики. Необходимость государственного регулирования экономики сформировало важнейшую проблему развития большей части стран в том числе и России достижение общенационального равновесия страны....
34196. Финансовая политика государства. Государственный бюджет 20.68 KB
  Финансы денежные средства рассматриваемые в про цессе создания и движения; формируются в ходе производства распределения и перераспределения ВВП валового внутрен него продукта страны. Финансы страны совокупность фи нансов всех секторов экономики в их взаимодействии между собой и остальными странами мира. В современных условиях понятием ≪финансы≫ определяют всю систему эконо мических отношений связанную с образованием распределени ем и перераспределением денежных ресурсов. Условно можно выделить государственные финансы финансы...
34197. Налоговая система государства: цели, виды налогов, методы взимания 15.58 KB
  Налоговая система государства: цели виды налогов методы взимания В ст. Согласно Налоговому кодексу РФ под налогами понимают обязательный индивидуальный безвозмездный платеж: взимаемый с организаций и физических лиц в форме отчуждения принадлежащих им на праве собственности хозяйственного ведения или оперативного управления денежных средств в целях финансового обеспечения деятельности государства и или муниципальных образований. Совокупность налогов сборов пошлин и других обязательных платежей взимаемых в бюджет на условиях...
34198. Денежно-кредитное регулирование экономики 14.71 KB
  Понятие денежнокредитного регулирования Теории спроса и предложения денег равновесие на денежном рынке являются научной основой для проведения государством обоснованной взвешенной кредитноденежной политики направленной на стабилизацию экономического развития. Совокупность государственных мероприятий в области денежного обращения и кредита называется денежнокредитной политикой. Денежнокредитная политика представляет собой комплекс мероприятий в области денежного обращения и кредита направленных на регулирование экономического роста...
34199. Государство в переходный период в экономике России 15.78 KB
  Государственное регулирование одна из основных форм участия государства в экономической жизни состоящая в прямом или косвенном воздействии на распределение ресурсов и формирование пропорций. В настоящее время выделяют следующие формы экономического регулирования: 1 административное регулирование за счет использования лицензирования и квотирования контроля над ценами доходами валютным курсом а также других форм; 2 правовое регулирование на основе гражданского и хозяйственного законодательства путем установления системы норм и...
34200. Организм и среда 16.95 KB
  Область распространения живых существ на Земле образует особую оболочку называемую биосферой. Биосфера возникла с появлением на Земле живых существ: она занимает всю поверхность суши все водоёмы Земли океаны моря озёра реки проникает в атмосферу большинство организмов поднимается в воздух более чем на 50 70 м а споры бактерий и грибов заносятся на высоту до 22 км. Условия существования на земле очень разнообразны и определяются факторами как неорганического так и органического порядка. Все организмы на земле живут сообществами...
34201. Необратимость в эволюции 23.15 KB
  Основное направление эволюции связано с усложнением строения организмов. Но наблюдается и упрощение дегенерация организмов. Правда иногда наблюдается появление признаков когдато имевшихся у предков затем исчезнувших у последующих организмов а потом вновь появившихся у потомков. Для каждой стратиграфической единицы характерны свои группы организмов которые после вымирания вновь не могут возникнуть.
34202. Некоторые закономерности эволюции 20.63 KB
  Причины и процессы развития органического имеют определённые законы что составляет содержание теории эволюции. Эволюция это законы развития органического мира основные положения которого разработаны Ч. процесс исторического развития органического мира может происходить только про сочетании трёх условий триада Дарвина: изменчивости наследственности естественного отбора. Выпадение из триады любого из трех факторов приводит к остановке развития органического мира.
34203. Классификация, систематика и номенклатура 24.63 KB
  Наука которая занимается систематизацией распределением животных и растений по группам получила название систематики или таксономии. Рэй который ввёл категории “ви䆓род†и бинарную номенклатуру состоящую из двух слоёв: первое слово название рода второе вида. Бинарное название было сокращено. Вид имеет двойное название бинарное.