Що таке jQuery?

34

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

Отже, що ж таке jQuery. jQuery – це javascript бібліотека, тобто бібліотека, написана на мові JavaScript. Простіше кажучи, це якийсь набір готових функцій, які спрощують життя розробника і написання коду на JavaScript.

Якщо ви не забули JavaScript, тоді повинні пам’ятати, як непросто вибрати елементи на сторінці, щоб потім маніпулювати ними. Згадайте всі ці довгі назви методів: getElementById, getElementsByClassName і т. п. Писати цю зв’язку слів довго і незручно насправді. Бібліотека jQuery дозволяє зробити те ж саме набагато простіше і зрозуміліше. Порівняйте хоча б ось ці два рядки коду:

var elem = document.getElementById (p’);
var elem = $(‘#p’);

Обидві рядки виберуть один і той же елемент – параграф з вказаним ідентифікатором. Але, погодьтеся, друга рядок набагато коротше і, що головне, зрозуміліше. До речі, її синтаксис, швидше за все, вам міг щось нагадати. Вірно, це CSS селектор — #p – вибірка елемента з зазначеним ID. jQuery для вибірки елементів використовує той же синтаксис, що використовує і CSS, тому якщо ви знаєте CSS – вам буде набагато простіше зрозуміти і працювати з jQuery. Це додатковий плюс.

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

проста робота з подіями;

кросбраузерність;

зручна робота з AJAX (асинхронні запити до сервера);

зручні методи для роботи з ефектами (приховування / поява елементів з додаванням візуальних ефектів);

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

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

Давайте ж спробуємо підключити бібліотеку jQuery до нашої сторінці, тим більше що зробити це дуже просто. Перший спосіб – локальне підключення. Полягає він у тому, що ми завантажуємо jQuery в наш проект і підключаємо його. Йдемо на офіційний сайт jQuery і викачуємо актуальну версію бібліотеки. На момент написання статті це версія 3.1.1.

Зверніть увагу, ми можемо завантажити стислу і несжатую версію бібліотеки. Чим вони відрізняються?

Якщо ми скачаємо обидві версії бібліотеки, то побачимо, що вони відрізняються вагою. Стисла версія важить 84 Кб, нестиснений – 260 Кб. Різниця в тому, що з компактної версії прибрали всі прогалини і переклади рядків, а також скоротили всі імена змінних. В іншому – ніякої різниці, тобто обидві версії бібліотеки однакові і виконують одну й ту ж роботу. Рекомендую підключати стислу версію, оскільки вона важить менше і, отже, завантажиться швидше. А навіщо ж тоді потрібна нестиснений версія – запитаєте ви? Вона потрібна для розробників, тобто для тих, хто захоче заглянути всередину бібліотеки, щоб вивчити її детальніше.

Отже, підключаємо бібліотеку:

jQuery

Ось і все, бібліотека jQuery підключена і ми можемо використовувати її можливості, з якими будемо знайомитися в наступних уроках. Ще один спосіб підключення jQuery – використання CDN, простіше кажучи, віддалене сховище ресурсів. Наприклад, ми можемо підключити jQuery з сервісів Google, ось так:

Замість локального підключення рекомендую використовувати другий варіант підключення. На цьому ми, мабуть, зупинимося в цій статті і продовжимо знайомство з бібліотекою jQuery в наступних статтях. Вихідні матеріали до уроку можна завантажити за посиланням. Більше про jQuerу ви можете дізнатися з наших уроків або курсу. Удачі!