Що таке JQuery?

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

Все про JQuery

John Resig, випустивши в 2006 році бібліотеку JQuery, бачив її, як кроссплатформенную JS бібліотеку, покликану полегшити написання програмних рішень на стороні клієнта.

Бібліотека була дуже потрібна в той час, так як на момент релізу в браузерах Internet Explorer, Firefox і пізніше Google Chrome (вийшов у 2008) були різні підходи до написання JS коду.

З Wikipedia: «JQuery – платформна JavaScript бібліотека, покликана спростити написання скриптів в HTML. На сьогоднішній день JQuery є найпопулярнішою JS бібліотекою. 65% з 10 мільйонів веб-сайтів з самим високим трафіком використовують цю бібліотеку. JQuery є абсолютно безкоштовним програмним забезпеченням з відкритим вихідним кодом, що поширюється по ліцензії MIT License.»

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

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

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

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

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

/**
* Код шукає блок div з ID “my unique element”
* і ховає його.
*/
$( ‘div#my-unique-element’ ).hide();

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

/**
* Основний спосіб оголошення циклів в jQuery. Будуть
* знайдені всі теги span на сторінці, і ви зможете
* пройтися по кожному з них у циклі.
*/
$( ‘span’ ).each(function() {
// Тут можна працювати з тегами span
});

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

$excerpt.on( ‘keydown’, function( evt ) {
if ( ( 17 === evt.keyCode || 91 === evt.keyCode ) || 86 === evt.keyCode ) {
if ( -1 === $.inArray( evt.keyCode, keymap ) ) {
keymap.push( evt.keyCode );
}
}
}).on( ‘keyup’, function() {
if ( user_has_pasted_content( keymap ) ) {
resize_textarea( this );
keymap = [];
}
});

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

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

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

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

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

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

/**
* Основний спосіб оголошення циклів в jQuery. Спочатку будуть
* знайдені всі теги span на сторінці, потім
* до них буде додано спеціальний клас.
*/
$( ‘span’ ).each(function() {
$( this ).addClass( ‘my-custom-class’ );
});

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

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

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

Якщо ви новачок в JavaScript, то ключем до розуміння того, як JS взаємодіє зі сторінкою, яка відображається в браузері, є розуміння того, як мова обробляє різні події.

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

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

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

Анімація

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

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

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

Ajax

Для тих, хто не знайомий з 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 UI – готовий набір взаємодій, ефектів, віджетів і тим з інтерфейсом на основі останньої версії JQuery, бібліотеки JS. JQuery UI відмінно підходить для створення як высокоинтерактивных веб-додатків, так і для того, щоб просто додати елемент вибору дати.»

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

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

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

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

JQuery Mobile

З домашньої сторінки jQuery Mobile: «JQuery Mobile – HTML5 система користувальницького інтерфейсу, спроектована для створення адаптивних веб-сайтів і додатків, які будуть доступні на всіх смартфонах, планшетах і ПК.»

Бібліотека є новим продуктом в лінійці бібліотек з 2010 року (остання стабільна версія вийшла в 2014).
Як і в UI побратима, тут є добре прописана API і користувальницькі теми, які ідеально підходять для різних пристроїв.

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

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

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

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

Іноді користувачам доводиться працювати в старих браузерах з-за особливостей інтранету в їх компанії. Іноді людям видають на роботі якісь мобільні пристрої або телефони. А іноді це просто пов’язано з неможливістю оновити браузер.

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

Висновок

Щоб розуміти можливості бібліотеки важливо розуміти, що таке JQuery (а також чим вона не є), і як вона пов’язана з JavaScript. Як вище вже говорилося, ведуться дискусії на тему, що спочатку потрібно вивчати JavaScript і тільки потім JQuery; інші ж можуть сказати, що JQuery – відмінний спосіб вивчити JavaScript.

Так чи інакше, JQuery є досить старою бібліотекою JavaScript, що використовується в ряді популярних проектів (серед яких і WordPress), і її вивчення допоможе вам тим чи іншим способом. Де факто JavaScript став один з мов роботи в інтернеті. У ньому є свої складні моменти, а також безліч фреймворків та бібліотек, які ви можете вивчити.

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