Що таке jquery

Все про JQuery

І що це все означає для нас, розробників? Кращий спосіб зрозуміти всі можливості бібліотеки це подивитися, що вона може нам запропонувати.

Переміщення по HTML документу

Коли браузер отрісовиваєт веб-сторінку, ми бачимо перед собою тільки візуальне уявлення такого поняття, як DOM (об'єктній моделі документа). Цю модель можна концептуально представити у вигляді дерева з вузлами, корінням і листям. Наприклад, уявлення моделі з сайту Web Step Book:

В JQuery ви легко можете переміщатися по DOM в пошуках потрібних вузлів, елементів або значень, які потрібно отримати. Тобто якщо ви шукайте DIV з будь-яким текстом, у якого заданий ID, то це дуже просто.

Якщо потрібно пройтися циклом по всім тегам span, це теж можна зробити:

Цикли ми докладніше розберемо в наступній секції, там ми покажемо певний додатковий функціонал по маніпуляціям над сторінкою. Це прості приклади, але код може стати набагато складніше, особливо якщо використовувати зчеплення методів. Наприклад:

На даному етапі ви не повинні розуміти, що відбувається в коді вище, але код повинен показати вам те, наскільки JQuery може бути корисним в певних ситуаціях при використанні допоміжних функцій і зчіпки методів.

Досить відзначити той факт, що міць JQuery лежить в його здатності робити запити в DOM (звідки і назва JQuery) і вносити подальші зміни до нього за допомогою добре прописаного API (яке рясніє прикладами використання функцій).

Хтось може сказати, що весь інший функціонал виходить з вищеописаної здатності. Запам'ятаємо це і продовжимо розбиратися в бібліотеці.

Маніпуляції з HTML документами

Якщо говорити про реальну маніпуляції DOM, в JQuery великий функціонал, за допомогою якого можна змінювати те, що бачать користувачі.

Деякі з функцій зовсім прості, такі як show і hide, за допомогою яких можна показувати і ховати елементи, які не повинні бути видимими на сторінці. За допомогою інших функцій можна створювати нові елементи і вставляти їх перед закриває тегом існуючого елемента (функція append) або вставляти нові теги після відкриваючого тега існуючого елемента (функція prepend). Додати клас до всіх елементів span можна через цикл:

Це лише мала дещиця того, що можна зробити з DOM в JQuery. Якщо зайти на сайт API, під розділом Manipulation можна подивитися весь список доступних маніпуляцій (а також хороші приклади). Ми можемо:

Задавати висоту і ширину документа в цілому, вікна або одного елемента

Отримувати значення заданого елемента (якщо вони у нього є)

І багато іншого

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

Обробка подій

Тобто коли користувач клацає на елемент, натискає кнопку або просто клацає мишкою, браузер створює сигнал викликаного події. Саме таким чином в мові обробляються інтерактивні події браузера.

Кожен раз коли користувач робить щось з веб-сторінкою, ми можемо відповісти йому за допомогою призначеного для користувача події. Проблема в тому, що не всі браузери однаково виконують одні й ті ж події (саме з цієї причини потрібна специфікація, але це вже матеріал для іншої статті).

На щастя в JQuery всіх імен присвоєні спеціальні імена, за допомогою яких ми можемо обробляти всі події у всіх браузерах однаково.

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

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

В останньому випадку мається на увазі деякий досвід роботи з API, який приходить поступово при роботі з бібліотекою і документацією.

Для тих, хто не знайомий з Ajax: за допомогою Ajax веб-сторінка може робити запити на сервер, обробляти відповідь і оновлювати частину сторінки без повного оновлення. Технологія не нова, але до сих пір добре справляється зі своїми обов'язками. У Ajax є дійсно відмінний функціонал, який може виявитися корисним при правильно використанні.

Підтримка у Ajax вже набагато краще, ніж 5 років тому, але реалізація API все ж може трохи відрізнятися в різних браузерах. Тобто нам потрібно писати Ajax код під браузери від Microsoft, Google, Apple, Chrome і т.д. окремо.

Без JQuery нам би довелося писати код під всі браузери, проте завдяки JQuery ми отримуємо кросбраузерності спосіб. За фактом, бібліотека полегшує обробку GET і POST запитів, а більш просунуті запити можна робити через метод $ .ajax. Як тільки ви звикнете до цього API в ваших додатках, ви не зможете без нього обійтися.

Трохи про розширюваності

Одна з можливостей, яка є в серверних фреймворками і бібліотеках, це можливість створення розширень до стандартного коду. У всіх сучасних клієнтських бібліотеках і фреймворки є така можливість, і JQuery не виняток.

Наприклад, ви працюєте в певній галузі і створюєте один і той же функціонал для додатків. Або у вас є продукт, який ви продаєте, і у вас є якийсь код, який потрібно інтегрувати в JQuery, але для різних проектів будуть потрібні різні параметри. Що тоді робити?

На наше щастя в JQuery підтримуються плагіни. Тобто ми, як розробники, можемо не просто вибирати зі списку готових плагінів (деякі з них можна подивитися на сайті jQuery і GitHub), але можемо і самі їх писати.

Ми можемо повторно використовувати даний код в інших своїх проектах, або ж можна розмістити код на сайтах типу GitHub, щоб інші користувачі могли вносити в коду правки, поліпшення, додаткові функції і т.д.

Додаткові проекти JQuery

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

На додаток до базової бібліотеці JQuery з'явилися два інших стоять проекту, про які варто трохи розповісти, перш ніж завершувати цю статтю. Ми не будемо вдаватися в деталі можливостей проектів, а просто поверхнево розглянемо кожен проект, щоб знати про те, що він може нам запропонувати.

З домашньої сторінки jQuery UI: «JQuery UI - готовий набір взаємодій, ефектів, віджетів і тим з призначеним для користувача інтерфейсом на основі останньої версії JQuery, бібліотеки JS. JQuery UI відмінно підходить для створення, як високоінтерактівних веб-додатків, так і для того, щоб просто додати елемент вибору дати. »

Велика частина віджетів використовує поширений функціонал. Наприклад:

Елементи вибору дати

Також є розширений функціонал, такий як ефекти, утиліти і взаємодії. В наші знання (а також те, що ми не знаємо) на даний момент входять всілякі колбек функції, атрибути, а також функції, які дозволяють нам взаємодіяти з об'єктами.

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

JQuery Mobile

Дві попередні бібліотеки пропонують нам Кросплатформені функції, за допомогою яких можна відносно просто писати JQuery і віджети, в jQuery Mobile ж входить CSS фреймворк, за допомогою якого також можна створювати призначені для користувача інтерфейси, що ідеально підходять під наші проекти.

Фреймворк включає в себе:

теми за замовчуванням

Бібліотека пропонує все те, що можна очікувати від проекту, спрямованого на полегшення веб-розробки під різні мобільні пристрої. Серед її можливостей:

Події, що працюють на всіх пристроях

Властивості активної сторінки

Віджети для мобільних інтерфейсів

До того ж, в мережі ще повно відповідних для даної технології браузерів. Ми вже бачили зниження частки старих версій Internet Explorer і стрибок популярності Chrome, однак ще залишаються користувачі, які сидять з-під старих браузерів з тих чи інших причин.

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

висновок

Якщо і цього мало, є велика документація і відкритий вихідний код. Також є безліч плагінів, а також блог проекту, щоб ви були в курсі всіх останніх новин про розробку бібліотеки.

Редакція: Команда webformyself.

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі