Лабораторная работа JQuery
.docЛАБОРАТОРНАЯ РАБОТА №3
ОСНОВИ JQUERY
Мета : навчитися використовувати бібліотеку jQuery .
jQuery - бібліотека , яка дозволяє робити код коротше , а також дозволяє всередині сторінки налаштувати код , який би спрацьовував як тригер ( зумовлений набір дій , який виконується автоматично при настанні пов'язаної з ним події , якщо цей код описано в області <head> ... </ head > ) .
JQuery бібліотека містить наступний функціонал :
1 . операції з HTML / DOM (маніпулювання компонентами HTML / DOM )
2 . операції з CSS - селекторами
3 . HTML - обробники подій
4 . ефекти анімації
5 . AJAX
6 . Utilities
JQuery спрощує роботу з JavaScript , а також виклики AJAX і DOM- маніпуляції. Є багато фреймворків JavaScript , але JQuery є найпопулярнішим і найвикористовуваним за рахунок своєї розширюваності.
Бібліотеку jQuery можна скачати з сайту http://jquery.com
Завдання
Варіант 1: Створити дві кнопки : одна - приховує елемент з id = " test ", друга - відображає цей елемент (використовується метод show ( )) . Зверніть увагу , щоб розпараліти програмний код за двома кнопками, для кожної з них теж були визначені id , за якими визначається яку функцію запускати.
Варіант 2: у вихідний файл lab3.html додати обробку події «подвійний клик мишки по елементу». Для елементів з атрибутом align = " center " потрібно налаштувати зникнення / появу елементу.
Варіант 3: у вихідний файл lab3.html додати обробку події «зміна розміру вікна ». При спрацьовуванні цього методу приховати за документа всі елементи з атрибутами ( href ) і замінити їх абзацами тексту.
Варіант 4: у вихідний файл lab3.html додати елемент форми « поле введення » , налаштувати для нього обробку keypress , а саме випадковим чином змінювати колір цього поля (властивість background - color ) , також додавати ще одне поле введення .
Варіант 5: створити файл lab3.html, додати два малюнки , невидимі при завантаженні сторінки , і дві кнопки. При натисканні на одну кнопку повинно в циклі спрацьовувати проявлення першої картинки і зникнення другої картинки а потім навпаки , зі швидкістю 2000, при натисканні на другу кнопку обидві картинки повинні з'явитися і припинити блимання.
Варіант 6: створити файл lab3.html, додати п'ять областей div з id " div1 " , " div2 " , ... , " div5 " , в які помістити тексти , невидимі при завантаженні сторінки , і дві кнопки. При натисканні на одну кнопку має визначатися випадкове число від 1 до 5. Залежно від цього числа повинна проявитися відповідна область div зі швидкістю 3000. При натисканні на другу кнопку всі області div знову ховаються .
Варіант 7: створити файл lab3.html, додати 10 параграфів ( <p> ) з яким-небудь текстом , невидимі при завантаженні сторінки , і кнопку . При натисканні на кнопку повинен в циклі спрацьовувати прояв парних параграфів і зникнення непарних зі швидкістю 2000, а потім навпаки.
Варіант 8: створити файл lab3.html, додати п'ять областей div 40х40 пікселів з id " div1 " , " div2 " , ... , " div5 " , розфарбовані в різні кольори , невидимі при завантаженні сторінки, і кнопку . При натисканні на кнопку повинно в циклі спрацьовувати хвилеподібний прояв областей div зліва - направо , а потім навпаки , зникнення . Цикл працює до тих пір, поки не закрита сторінка.
Варіант 9: створити файл lab3.html, додати зверху кнопку , а потім п'ять параграфів з яким-небудь текстом і між кожним параграфом по маленькому малюнку. При натисканні на кнопку серед усіх знайдених параграфів для 3- го і 5- го змінити положення - змістити його на 100 пт вліво відносно поточного положення . при натисканні на будь-яку з картинок має відбуватися рух поточної вниз на 30 пт.
Варіант 10: створити файл lab3.html, додати зверху кнопку , а потім 6 маленьких малюнків однакового розміру, один під іншим. При натисканні на кнопку серед всіх знайдених малюнків для парних виконати ефект слайд -шоу - поява / приховування малюнка під відповідним йому верхнім малюнком зі швидкістю « slow».
Варіант 11: створити файл lab3.html, додати зверху кнопку , а потім 6 параграфів з яким-небудь текстом , один під іншим. При натисканні на кнопку серед усіх знайдених малюнків для непарних виконати витяг тексту та присвоєння цього тексту відповідному нижньому / четному параграфу і змістити непарні елементи на 40 пт вліво.
Варіант 12: створити файл lab3.html, додати зверху кнопку , а потім 6 маленьких малюнків однакового розміру , один під іншим. При натисканні на кнопку серед всіх знайдених малюнків для непарних виконати ефект слайд -шоу - появу / приховування малюнка під відповідним йому нижнім малюнком зі швидкістю « slow».
Варіант 13: у вихідний файл lab3.html додати в початок дві кнопки: одну-для приховування елементів, іншу - для відображення прихованих елементів, налаштувати методи click () кнопок, так щоб вони то приховували, то відображали непарні елементи з класом MsoNormal.
Варіант 14: у вихідний файл lab3.html додати в початок дві кнопки: одну-для приховування елементів, іншу - для відображення прихованих елементів. налаштувати методи click () кнопок, так щоб вони то приховували, то відображали парні елементи типу <tr>.
Варіант 15: у вихідний файл lab3.html додати обробку події «подвійний клик мишки по елементу». Для тегів div з атрибутом align = "justify" потрібно налаштувати зникнення / появу елементу.
Варіант 16: у вихідний файл lab3.html додати обробку події «зміна розміру вікна ». При спрацьовуванні цього методу приховати за документа всі елементи img з атрибутами (src ) і замінити їх абзацами тексту.
Варіант 17: у вихідний файл lab3.html додати елемент форми «поле введення», налаштувати для нього обробку події submit, а саме випадковим чином змінювати колір цього поля (властивість background - color ) , також додавати ще одне поле введення .
Варіант 18: створити файл lab3.html, додати два малюнки , невидимі при завантаженні сторінки, і кнопку. При натисканні на одну кнопку повинно в циклі спрацьовувати проявлення першої картинки і зникнення другої картинки а потім навпаки , зі швидкістю 3000.
Варіант 19: створити файл lab3.html, додати чотири області div з id= " div1 " , " div2 " , ... , " div5 ", в які помістити тексти , невидимі при завантаженні сторінки , і дві кнопки. При натисканні на одну кнопку має визначатися випадкове число від 1 до 4. Залежно від цього числа повинна проявитися відповідна область div зі швидкістю 2000. При натисканні на другу кнопку елемент div повинен знову ховатися.
Варіант 20: створити файл lab3.html, додати 7 параграфів ( <p> ) з яким-небудь текстом , невидимі при завантаженні сторінки, і кнопку . При натисканні на кнопку повинен в циклі спрацьовувати прояв парних параграфів і зникнення непарних зі швидкістю 3000, а потім навпаки.
Варіант 21: створити файл lab3.html, додати чотири області div 30х40 пікселів з id= " div1 " , " div2 " , ... , " div5 ", розфарбовані в різні кольори, які невидимі при завантаженні сторінки, і кнопку. При натисканні на кнопку повинно в циклі спрацьовувати хвилеподібний прояв областей div зліва - направо , а потім зникнення. Цикл працює 15 раз.
Варіант 22: створити файл lab3.html, додати зверху кнопку, а потім чотири параграфи з яким-небудь текстом і між кожним параграфом по маленькому малюнку. При натисканні на кнопку серед усіх знайдених параграфів для 3- го і 4- го змінити положення - змістити його на 60 пт вправо відносно поточного положення. при натисканні на будь-яку з картинок має відбуватися рух поточної вниз на 40 пт.
Варіант 23: створити файл lab3.html, додати зверху кнопку, а потім 5 маленьких малюнків однакового розміру, один під іншим. При натисканні на кнопку серед всіх знайдених малюнків для парних виконати ефект слайд -шоу - поява / приховування малюнка по черзі 3 5-го до 1-го зі швидкістю « slow».