Бібліотека jquery і мобільний фреймворк jquery mobile

Коли Веб тільки з'явився, він був досить нудний і примітивний. Веб-сторінки в основному складалися з простого HTML коду, головним завданням яких було донесення необхідної інформації користувачеві. Тодішні користувачі натисканням на посилання очікували поки завантажиться нова сторінка. В цьому і полягала вся інтерактивність.

JQUERY: БАЗОВІ ФУНКЦІЇ ТА ОСНОВНІ ЗАВДАННЯ, ЯКІ ВИКОНУЄ БІБЛІОТЕКА

В jQuery існує багато корисних функцій для роботи з DOM, обработчиками подій, формами, ефектами на сторінці і інше. Однак є функції, з якими слід ознайомитися до початку використання jQuery:

• Взаємодія з кожним елементом окремо: функція each ()
• Події. Обробка подій: функція on ()
• Анімації і ефекти: функція animate ()

Далі детально розглянемо кожну з наведених функцій.

В jQuery є багато переваг і одне з них - це «автоматичне зациклення». Цим jQuery звільняє нас від состалвенія циклів для проходу через певний набір елементів. наприклад:

$ ( 'Img'). FadeOut (); - в цьому випадку функція одночасно спрацює для всіх зображень на сторінці, тим самим, зробивши їх повністю прозорими (CSS = opacity: 0). Часто буває, що при виборі певного набору елементів, потрібно виконати не одне, а кілька дій. Для цього існує функція each ().

Ця функція виробляє обхід (перебір в циклі) всіх елементів набору jQuery і викликає функцію зворотного виклику для кожного з них. Повертає об'єкт. Кожен раз, коли виконується зазначена функція (а виконується вона один раз для кожного співпала елемента), ключове слово 'this' вказує на конкретний елемент DOM.

Виводити в циклі вміст пунктів списку до тих пір, поки не попадеться «li» з класом «stop».

$ ( 'Li'). Each (function (i, elem)

alert ( «Зупинено на" + i + «-м пункті списку.»);

alert (i + ':' + $ (elem) .text ());

on () - «в минулому bind (), live (), delegate ()»

В jQuery є набір обробників подій, які фіксують поведінку відвідувача на сторінці. За допомогою цих обробників можна виконувати ті чи інші дії з обраним елементом:

• click (); - клік мишкою
• dblclick (); - подвійний клік мишкою
• hover (); - наведення курсору на елемент. Працює як 2 в 1: mouseenter (); і mouseleave ();
• scroll (); - спрацьовує, коли йде горизонтальна або вертикальна прокрутка вікна браузера
• toggle (); - викликається при кліці на елемент
• load (); - спрацьовує, коли всі нащадки батька повністю завантажені в документі

За допомогою функції on () jQuery дозволяє нам більш гнучко обробляти події, ніж вищенаведені обробники. Розглянемо структуру функції (її аргументи):

$ ( 'Selector'). On ( 'click', selector, myData, functionName)

• перший аргумент: подія
• другий (опціонально).
• третій: дані, які можна передати в функцію. Це може бути Object Literal або змінна з Object Literal
• четвертий аргумент: ім'я функції або анонімна функція

Нам потрібно, щоб повідомлення alert () відображало різний текст, в залежності від натиснутого елемента. Можна створити кілька змінних і покласти в них різні Object Literal:

$ ( 'A'). On ( 'click', linkVar, showMessage); - По кліку на посилання, виведемо повідомлення змінної linkVar

$ ( 'P'). On ( 'click', pVar, showMessage); - По кліку на параграф, виведемо повідомлення змінної pVar

Також, можна використовувати кілька подій для виклику однієї і тієї ж функції:

$ ( 'A'). On ( 'click keypress hover', linkVar, showMessage);

Кожна подія може викликати різні функції: