9185

Работа с JavaScript Framework jQuery

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

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

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

Русский

2013-02-25

357.09 KB

44 чел.

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


 

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

25303. РОЛЬ СЕНСОРНЫХ СИСТЕМ В УПРАВЛЕНИИ ДВИЖЕНИЯМИ. СОМАТОСЕНСОРНАЯ ЧУВСТВИТЕЛЬНОСТЬ И КОРРЕКЦИЯ ДВИЖЕНИЙ 35.5 KB
  СОМАТОСЕНСОРНАЯ ЧУВСТВИТЕЛЬНОСТЬ И КОРРЕКЦИЯ ДВИЖЕНИЙ Выполнение движений сопряжено с растягиванием кожи и давлением на отдельные ее участки поэтому кожные рецепторы оказываются включенными в анализ движений. Эта функциональная связь является физиологической основой комплексного кинестетического анализа движений при котором импульсы кожных рецепторов дополняют мышечную проприоцептивную чувствительность. Благодаря проприоцепции возможны коррекция уточнение движений в соответствии с текущими потребностями выполнения произвольного действия....
25304. Физиологические реакции живого организма 39 KB
  Раздражение Раздражителем живой клетки или организма как целого может оказаться любое изменение внешней среды или внутреннего состояния организма если оно достаточно велико возникло достаточно быстро и продолжается достаточно долго. Клетки значительно более чувствительны по отношению к своим адекватным раздражителям чем к неадекватным. Возбудимость Некоторые клетки и ткани нервная мышечная и железистая специально приспособлены к осуществлению быстрых реакций на раздражение.
25305. Стресс 33.5 KB
  0004 ГОМЕОСТАЗ Внутренняя среда организма в которой живут все его клетки это кровь лимфа межтканевая жидкость. Ее характеризует относительное постоянство гомеостаз различных показателей так как любые ее изменения приводят к нарушению функций клеток и тканей организма особенно высокоспециализированных клеток центральной нервной системы. Способность сохранять гомеостаз в условиях постоянного обмена веществ и значительных колебаний факторов внешней среды обеспечивается комплексом регуляторных функций организма. существовать и двигаться...
25306. Адаптация 28 KB
  У человека адаптация выступает как свойство организма которое обеспечивается автоматизированными самонастраивающимися саморегулирующимися системами сердечнососудистой дыхательной выделительной и др. Адаптация это эффективная и экономная адекватная приспособительная деятельность организма к воздействию факторов внешней среды. Чем выше уровень интеграции координированности сложных регуляторных процессов тем эффективнее адаптация.
25307. Природа потенциала покоя 28.5 KB
  Согласно этой теории биоэлектрические потенциалы обусловлены неодинаковой концентрацией ионов К' N3' СГ внутри и вне клетки и различной проницаемостью для них поверхностной мембраны. Протоплазма нервных и мышечных клеток содержит в 3050 раз больше ионов калия в 810 раз меньше ионов натрия и в 50 раз меньше ионов хлора чем внеклеточная жидкость. На структурных элементах мембраны фиксируются различные ионы что придает стенкам ее пор тот или иной заряд и тем самым затрудняет или облегчает прохождение через них ионов. Так предполагается...
25308. Потенциал действия 37.5 KB
  Потенциал действия может быть зарегистрирован двояким способом: с помощью электродов приложенных к внешней поверхности волокна внеклеточное отведение и с помощью микроэлектрода введенного внутрь протоплазмы внутриклеточное отведение. Долгое время физиологи полагали что потенциал действия представляет собой лишь результат кратковременного исчезновения той разности потенциалов которая существует в покое между наружной и внутренней сторонами мембраны. Однако точные измерения проведенные с помощью внутриклеточных микроэлектродов...
25309. Законы раздражения 44 KB
  Механизм раздражающего действия тока при всех видах стимулов в принципе одинаков однако в наиболее отчетливой форме он выявляется при использовании постоянного тока прямоугольной формы. При использовании в качестве раздражителя электрического тока порог выражается в единицах силы тока или напряжения. Существует два способа подведения электрического тока к ткани: внеклеточный и внутриклеточный. Недостаток этого метода заключается в значительном ветвлении тока: только часть его проходит через мембраны клеток часть же ответвляется в...
25310. Строение и классификация нейронов 35.5 KB
  Место отхождения аксона от тела нервной клетки называют аксонным холмиком. Дендриты это многочисленные ветвящиеся отростки функция которых состоит в восприятии импульсов приходящих от других нейронов и проведении возбуждения к телу нервной клетки. В центральной нервной системе тела нейронов сосредоточены в сером веществе больших полушарий головного мозга подкорковых образований мозжечка мозгового ствола и спинного мозга.
25311. Строение и работа синапсов 28 KB
  Они образуются концевыми разветвлениями нейрона на теле или отростках другого нейрона. В структуре синапса различают три элемента: 1пресинаптическую мембрану образованную утолщением мембраны конечной веточки аксона; 2синаптическую щель между нейронами; 3постсинаптическую мембрану утолщение прилегающей поверхности следующего нейрона. В большинстве случаев передача влияния одного нейрона на другой осуществляется химическим путем.Для возбуждения нейрона необходимо чтобы ВПСП достиг порогового уровня.