Робота з бібліотекою jQuery. Знайомство з jquery. Вибір об’єктів на сторінці



Скачати 62.06 Kb.
Дата конвертації26.11.2018
Розмір62.06 Kb.
Робота з бібліотекою jQuery.

  1. Знайомство з jquery. Вибір об’єктів на сторінці.

План уроку.

1) Підключення бібліотеки.

Зайдіть по адресі: http://jquery.com/download/ . На цій сторінці google розміщує, завжди новий, код вставки скріпта jquery у сторінку:



Даний код потрібно розмістити в «Голові» сайту. Він забезпечить завантаження у сторінку ядра (головних функцій) бібліотеки jQuery.

2) Створення основного програмного модуля.

Скріпти, вибір елементів зі сторінки, всі функції і методи jQuery повинні виконуватись після завантаження документа у вікно браузера, тому у тілі сторінки ми прописуємо:



3) Вибір елементів:

          1. Вибір по назві тегу:

$('img’) Вибрати на сторінці всі теги img

(b) Вибір по назві елемента (по його id)

$(‘#div_img’) Вибрати на сторінці всі тег з id=”div_img

(c) Вибір елементу по класу

$(‘.div_img’) Вибрати на сторінці всі тег з id=”div_img”

(d) Вибір вкладеного елементу

$(‘ #mydiv p ’) Вибрати всі вкладені у теги p у об'єкта з id = “#mydiv

(e) Вибрати всі дочірні теги img у об'єкта з id = “#mydiv

          1. Вибір дочірнього елемента

$(‘ #mydiv > img ’)

(f) Вибрати малюнок, який знаходиться після об'єкту з id = “#mydiv

          1. Вибір наступного елемента

$(‘ #mydiv +img ’)

(g) Вибрати малюнок з шириною 200px

          1. Вибір по точному значенню атрибуту

$(‘ img[width=200] ’)

(h) Вибрати всі гіперпосилання на сторінку, назва якої починається на: http://gurt

          1. Вибір по атрибуту значення якого починається на певну послідовність символів

$(‘ a[href^=http://gurt] ’)

(i) Вибрати малюнки в назві яких є буквосполучення moto4

          1. Вибір по атрибуту, значення якого має в середині певну послідовність символів

$(‘ img[src*=moto4] ’)

(j) Вибрати всі малюнки з розширенням png

          1. Вибір по атрибуту, значення якого закінчується на певну послідовність символів

$(‘ img[src$=png] ’)

2. Основні методи.

План уроку.

1) Метод «text» «hide» «show»

Завдання 1-1

На головні сторінці сайту «moto» виведіть текст першого заголовку (тег H1) на екран у випадаючому вікні (alert).

Завдання 1-2

Замініть текст 1 абзацу на його український переклад.

Завдання 1-3 (повторення)

$('img[src*=logo.jpg]')

Який об'єкт на сторінці «moto» вибирає цей запис?

Як іншими способами вибрати цей же об’єкт

Завдання 1-4

Створіть процедуру зникнення і відображення заголовку (малюнок з логотипом компанії) сайту «moto» за 3 сек. Команди зникнення і відображення повинно бути у різних рядках вашої процедури.

Завдання 1-5

Змініть попередню задачу створивши змінну у яку ви кладете «голову» вашого сайту і уже потім, примінивши методи «hide» «show» до цієї змінної скрите і відобразіть «голову» сайту за 6 секунд.

Завдання 1-6

На сторінці «moto» знадіть фото 4 мотоциклів і використовуючи «ланцюгові» методи «hide» «show» заховайте мотоцикли за 5 сек. і потім відобразіть їх за 2сек.

Завдання 1-7

Зберегти в змінну myLink jquery вибірку посилання, що веде на pdf файл, миттєво заховати це посилання, поміняти у цього посилання текст (по вашому розсуду), і повернути посилання за 4 секунди.

Обов'язково використовувати ланцюгові функції.

Завдання 1-8!!!

Створити функцію, яка ховає за 5 сек. довільний об’єкт на сторінці. Функції передається назва об’єкта. У цьому завданні застосувати цю функцію до об’єкта у якого id = “my_form

2) Метод «width» «height»

Завдання 2-1

Створіть стиль для блоку з фотографіями мотоциклів, а саме:

Рамка:

Колір: #cc0000,

Товщина: 2рх,

Шириною:850 рх,

Висотою: 160рх,

Створити функцію, якій передається об’єкт, а вона виводить на екран його ширину і висоту.

Застосувати цю функцію для блоку з фотографіями мотоциклів.

Завдання 2-2

Створіть функцію change_size (id_object,width,height), яка змінює ширину і висоту переданого їй об’єкту.
3) Метод «html».

Завдання 3-1

Виведіть HTML – код об’єкту з id=“forheader” у випадаючому вікні (alert).

Завдання 3-2

Поміняйте HTMLкод списку мотоциклів на «жирний»

Завдання 3-3*

Створіть функцію change_in_h5(id_object) яка заміняє довільний тег з відповідним id у тег h5 зберігаючи його текст.

4) Метод “fadeOut”, “fadeIn”, fadeTo”, “slideUp”, ”slideDown”, “each”(наступний)

Завдання 4-1

За 4 сек. скрийте і покажіть малюнок заголовку сайту, шляхом зміни його прозорості
Завдання 4-2

Як тільки сторінка завантажиться непрозорість мотоциклів повинна бути 10%, після цього, за 7 сек., їх непрозорість стає 100%.
Завдання 4-3

За 2 сек. згорніть всі списки на сторінці.

Завдання 4-4

Створіть функцію zr(id_object,t1,t2) якій передається id об’єкта, час в мілісекундах згорнення об’єкта і час в мілісекундах розгортання об’єкта. Випробуйте цю функцію з різними об’єктами сторінки.

Завдання 4-5

Виберіть всі малюнки на сторінці. Використовуючи функцію each скрийте:

  1. Змінюючи прозорість всі малюнки, ширина яких більша 400px;

  2. Методом згортання всі малюнки, ширина яких менша 400px;


Завдання 4-6*

Створіть функцію p_in_h4(), яка перетворює всі абзаци у теги h4.

3. Події.

Теорія.

Головні події, які відслідковуються браузером.

HTML - сторінка складається з об’єктів. Події активізуються на об’єкті при різних діях користувача, наприклад: наведені мишки на об’єкт, кліку мишки, отримані фокусу, втраті фокусу, натисненні кнопки на клавіатурі і т.д. Є чотири типи основних подій:

  1. Мишки;

  2. Форми;

  3. Клавіатури;

  4. Вікна.

Опис основних подій

Подія стає активною:

Події мишки:

mouseover при наведені вказівника мишки на об’єкт;

mouseout коли забрати вказівник мишки з об’єкту;

mousemove – при русі мишки;

click - клік мишки;

dblclick - подвійний клік мишки;

mousedown - натиснута клавіша мишки;

mouseup - відпущена клавіша мишки;

Події форми:

submit при відправці формою даних;

focus – коли об’єкт форми стає активним;

blur – коли об’єкт форми стає не активним;

change - коли значення об’єкту змінилось;

Події клавіатури:

keypress – кнопка натиснута і відпущена;

keydown – кнопка натиснута ;

keyup – кнопка відпущена;

Події вікна браузера :

load – у вікно браузера завантажена вся сторінка;

resize – змінений розмір вікна;

scroll – перетягнутий повзунок прокрутки вікна;




Традиційні методи обробки подій, їх недоліки.

Завдання № 5-1:

Створити подію, яка, в окремому вікні (alert) виводитиме ширину об’єкту. Подія викликається кліком мишки.

Це завдання складається з трьох кроків:

  1. З документу вибрати об’єкт.

  2. Створити дію (функцію).

  3. Викликати цю дію, на цьому об’єкті при певній події.


Ось текст скріпта:
$('document').ready(function(){

var my_object=document.getElementById('img_1');

function width_my_object()

{

alert("Ширина фото = "+my_object.width);

}

my_object.onclick=width_my_object;



});
Завдання № 5-11:

Це ж завдання з використанням технології jQvery.
$('document').ready(function(){

var my_object=document.getElementById('img_1');

function width_my_object()

{

alert("Ширина фото = "+$(my_object).width());

}

my_object.onclick=width_my_object;



});
Завдання № 5-2:

Це ж завдання. Подію прописати у самому об’єкті.
onclick ="alert('ширина об*єкта ='+width)" src="images/moto4.jpg" width="160" height="125" alt="Мотоцикл 1" >
Завдання № 5-21:

Змінити ширину першого мотоциклу на 200 пк при кліку на ньому. Зміни записувати у самому об’єкті. Використовувати методи jQuery.

Завдання № 5-3:

При клікані мишкою на першому мотоциклі за 3 сек. змінити непрозорість до 1% і за стільки ж часу повернути його прозорість назад.
Обробка подій з допомогою jQuery.

Завдання № 6-1:

При клікані мишки по заголовку сайту у вікні вивести повідомлення: «Ви клікнули по заголовку сайту»
Завдання № 6-2:

При клікані мишки по модулю з фотографіями мотоциклів сховати всі мотоцикли методом згортання вверх за 3 секунди.
Завдання № 6-3:

Написати скріпт, який би скривав за 1 сек. методом зміни непрозорості фото мотоциклів. Скривати потрібно тільки той мотоцикл по якому клацнули мишкою.

Завдання № 6-4:

У html-код сторінки, вище модуля з фотографіями мотоциклів вставте абзац:


Сховати фото


Абзац матиме вигляд полоси жовтого кольору з червоною рамкою і надписом по середині «Сховати фото» . Напишіть скріпт, який при клікані мишкою по цій полосі згортала вверх фото мотоциклів.
Завдання № 6-5*:

Доповнити (змінити) завдання 6-4, а саме: при кліканні мишкою по полосі «Сховати фото», фото всіх мотоциклів ховається, надпис при тому змінюється на «Подивитись фото», при клікані повторно по надпису «Подивитись фото», фотографії мотоциклів відображаються і надпис повертається на початкову.

Завдання зробити самостійно. Оцінка 12!

4. Методи attr, removeAttr.

Завдання № 7-1

Створити функцію - change_width(id_obj ,w) ( id_obj – id об’єкта, w – його ширина ), яка змінює ширину переданого об’єкту. Застосувати цю функцію для різних об’єктів.

Завдання № 7-2

Змінити функцію - change_width(id_obj ,w) (завдання 7-1), так, щоб при зміні ширини пропорційно змінювалась і висота

Завдання № 7-3

Змінити функцію - change_width(id_obj) (завдання 7-2), так, щоб ширина об’єкта зменшувалась у 2 рази, а висота пропорційно. Функції передається тільки id об’єкта.

Завдання № 7-4

Використовуючи, вами створену функцію change_width(id_obj) напишіть скріпт, який при наведені на довільний малюнок зменшував його ширину у два рази.

Завдання № 7-5

Напишіть програму, яка при наведені мишки на фото мотоциклів додавала тінь до цього модуля, зменшувала ширину модуля з мотоциклами на 75px. При забиранні мишки все поверталось в попередній стан.

Завдання № 7-5

Створіть дві функції change_width_b(id_obj) i change_width_s(id_obj) . Функція change_width_b(id_obj) збільшує об’єкт у півтора рази, функція change_width_s(id_obj) зменшує об’єкт у півтора рази. Напишіть скріпт, який при наведені вказівника мишки на довільний малюнок на сторінці – збільшував його, при забиранні вказівника мишки з цього малюнку зменшував його. Використовуйте вами створені функції.

Завдання № 7-6

У головну сторінку, після заголовку сайту, додайте абзац:

. Створіть функцію size_obj(id_obj) , яка у новий, доданий вами абзац виводить назву об’єкту (атрибут alt), його ширину і висоту. Текст у абзаці повинен бути, наприклад, таким: «Об*єкт - Мотоцикл 2. Його ширина = 180пк, висота = 125пк.». Застосуйте цю функцію до різних об’єктів.



Завдання № 7-7


Створіть скріпт, який би відображав назву, ширину і висоту малюнку, на який навели вказівник мишки. Відображення повинно бути таке ж , як у попередній задачі.

8. Методи append, prepend, before, after, css, addClass, removeClass, clone Подія hover

Завдання № 8-1

З допомогою методу addClass додайте до об’єкту з малюнками мотоциклів
( id="div_for_img" ) клас new , що повинен бути вами прописаний у файлі: mystyle.css

.new

{

border:2px solid #cc0000;

}

З допомогою вами написаного скріпта, використовуючи методи: append, prepend, before, after додайте нижче перераховані абзаци до об’єкту id="div_for_img" :

<p> Цей абзац доданий з допомогою методу append p>

<p> Цей абзац доданий з допомогою методу prepend p>

<p> Цей абзац доданий з допомогою методу before p>

<p> Цей абзац доданий з допомогою методу after p>
Завдання № 8-3

У css – файл додайте новий клас стилю - .svitlo:

.svitlo

{

background:silver;

}
Створіть скріпт, який би виконував наступні дії: при наведені вказівника мишки на елемент списку чи рядок таблиці, колір фону змінювався на сірий, при забиранні вказівника – колір повертався.

6. Об’єкт події.

Завдання № 9-1(a)

При кліку мишки по фото з мотоциклом у вікні alert виводиться наступний текст:
Відстань зліва від краю екрану до кліку мишки = … пікселів.

Відстань зверху від краю екрану до кліку мишки = … пікселів.

Завдання № 9-1(b)

При кліку мишки по фото з мотоциклом у вікні alert виводиться наступний текст:
Відстань зліва від краю вікна до кліку мишки = … пікселів.

Відстань зверху від краю вікна до кліку мишки = … пікселів.

Завдання № 9-2(a)
При кліку мишки по фото з мотоциклом у вікні alert виводиться наступний текст:
при кліку мишки була натиснута клавіша ALT.
Якщо ви при кліку не натиснули клавішу «ALT»
при кліку мишки не була натиснута клавіша ALT.
Якщо ви при кліку не натиснули клавішу «ALT»

Завдання № 9-2(b)
При кліку мишки по фото з мотоциклом у вікні alert виводиться наступний текст:
при кліку мишки була натиснута клавіша CTRL.
Якщо ви при кліку натиснули клавішу «CTRL»
при кліку мишки не була натиснута клавіша CTRL.
Якщо ви при кліку не натиснули клавішу «CTRL»

Завдання № 9-3(a)

При кліку мишки по фото з мотоциклом у вікні alert виводиться наступний текст:
Id об’єкта по якому ви клікнули img_1.

Завдання № 9-3(b)

При кліку мишки по фото з мотоциклом у вікні alert виводиться наступний текст:
Назва об’єкта по якому ви клікнули Мотоцикл 1.
Завдання № 9-3(с)

При кліку мишки і натиснутій клавіші SHIFTпо фото з мотоциклом у вікні alert виводиться наступний текст:
Назва об’єкта по якому ви клікнули Мотоцикл 1.


Завдання № 9-4 ( метод preventDefault )
При кліку мишки на довільному гіперпосиланні воно не повинно працювати і його текст змінюється на «Гіперпосилання відключене!»

7. Створення фото - галерей.

Завдання № 10-1
Створити фото – галерею «Кращі мотоцикли компанії MotoRent».

Галерея повинна складатись з двох блоків: верхнього і нижнього. У нижньому блоці горизонтально розміщено фото 4 мотоциклів, у верхньому блоці одне велике фото вибраного мотоцикла. При кліку мишки по малому фото у нижньому блоці, у верхньому блоці відображається його збільшена копія шляхом зміни прозорості (fadeIn).
План

  1. Відстежити подію «click» по гіперпосиланню на велике фото мотоциклу.

  2. Якщо така подія відбулася, тоді:

    1. відключити дію «по замовчуванню » цього гіперпосилання;

    2. Сховати велике фото;

    3. Змінити значення атрибуту «src» великого фото, по якому клікнули мишкою, на значення атрибуту «href» малого фото.

    4. Через подію «load» дочекатись завантаження великого фото і тільки тоді його відобразити.


Завдання № 10-2
Використовуючи створену галерею вдоскональте її:

  1. Над галереєю потрібно зробити текстовий перемикач " Показати / Приховати галерею " який буде показувати і приховувати галерею функціями slideUp( ) і slideDown( ). Спочатку галерея повинна бути прихована.

  2. Придивіться до нашої галереї. У неї є один істотний недолік. Якщо, наприклад, у нас у великій картинці на даний момент стоїть жовтий мотоцикл і при цьому, ми клацаємо по мініатюрі цього ж жовтого мотоцикла, то велика картинка буде намагатися завантажитися ще раз. Це не дуже то й добре, тому ваше завдання полягає в тому, щоб при такій ситуації такого не відбувалося і велика картинка просто залишалася на місці.

  3. Ваше завдання виділити маленьку картинку того мотоцикла , який зараз показаний. Вона повинна бути виділена одним із таких способів - або повинна бути обведена рамкою, або повинна мати прозорість 60 % або і те й інше разом.

Каталог: file -> user
file -> Про вступний іспит та реферат при вступі до аспірантури Інституту соціології нан україни
file -> Київський національний університет імені Тараса Шевченка
file -> Програма вступного іспиту до аспірантури зі спеціальності 22. 00. 03 соціальні структури та соціальні відносини Затверджено
file -> Принципи реалізації наукової діяльності університету: активна участь у формуванні та
user -> Робота з бібліотекою jQuery. Знайомство з jquery. Вибір об’єктів на сторінці
user -> Робота з бібліотекою jQuery. Знайомство з jquery. Вибір об’єктів на сторінці
user -> Робота з бібліотекою jQuery. Знайомство з jquery. Вибір об’єктів на сторінці
user -> Мова програмування php
user -> Мова програмування php


Поділіться з Вашими друзьями:


База даних захищена авторським правом ©uchika.in.ua 2019
звернутися до адміністрації

    Головна сторінка