Привіт усім.
В даній статті ми розглянемо популярну бібліотеку-розширення для JavaScript Веб-програм під назвою jQuery.
Чому jQuery?
В загальному, Ви можете і не використовувати jQuery в своїх Веб-додатках, обмежуючись використанням “чистого” JavaScript. Все, що робить jQuery — це стандартизує інтерфейс до браузерів і додає деякий корисний функціонал, наприклад, анімація і оптимізована вибірка елементів сторінки.
Однак, якщо не використовувати jQuery, тоді усі відмінності між браузерами зваляться на плечі розробника Веб-додатку, в особливості, відмінності між браузерами від компанії Майкрософт і усіма іншими браузерами (зверніть хоча б увагу на AJAX-об'єкти XMLHttpRequest, для Chrome, Mozilla і Ajax-об'єктом ActiveXObject для IE версії 5 і 6).
Усі інтерфейси jQuery стандартизує для розробника Веб-додатку і інкапсулює відмінності у собі. Тому розробникам не потрібно думати над відмінностями між браузерами, а більше сконцентруватися над конкретним завданням.
Як отримати jQuery?
Виникає питання: “Де отримати цю чудову бібліотеку, яка полегшує нам життя?!” - відповідь звичайно що на офіційному сайті проекту jQuery — jquery.com.
Завантажити бібліотеку можна в декількох варіантах:
- версія для розробників, яка відрізняється тим, що вона містить код з зрозумілою для людей розміткою або форматуванням, і містить коментарі, які роблять код бібліотеки jQuery ще зрозумілішим;
- стиснута версія для завантаження користувачами Веб-додатку, яка характеризується тим, що містить JavaScript-код без якого-небудь його форматування і без будь-яких коментарів, що робить його абсолютно нечитабельним для розробників, але пришвидшує завантаження з сайтів (менше пробілів, коментарів і інших символів — менший розмір і швидше завантаження з інтернету);
-
усі вищенаведені версії jQuery також можливі в двох варіантах:
- версії, основна версія яких починається з одиниці — це версії які підтримують браузери Internet Explorer версії 5, 6 і 8.
- версії jQuery, версія яких починається з двійки НЕ ПІДТРИМУЮТЬ СТАРІ ВЕРСІЇ INTERNET EXPLORER, тому, якщо Ви впевнені, що Веб-додатком створеним Вами не будуть користуватися користувачі, які мають старі версії IE, або ви бажаєте, щоб дані користувачі не змогли користуватися ним, використовуйте версії jQuery 2.x, це ще пришвидшить завантаження бібліотеки на комп'ютери користувачів.
На сайті jquery.com, можна також знайти документацію по усім аспектам jQuery і деякі додаткові бібліотеки для розробників.
Для включення jQuery в Веб-додаток, також можна скористатися CDN-мережами — місцями в Інтернеті, де розміщуються файли доступні для усіх в будь-який, що без сумніву відповідає ідеології Інтернету про спільний доступ до ресурсів і розміщення їх в одному місці.
Включення jQuery в Веб-програму
jQuery розповсюджується в вигляді звичайного JS-файлу, тому включення jQuery в Веб-додаток відбувається звичайним методом — через HTML-теґ “script”. Я кажу, чи пишу, не просто Веб-сторінку, а Веб-додаток, оскільки через використання JavaScript в парі з jQeury Ваша Веб-сторінка перетворюється на повноцінний додаток, потрібно прикласти тільки трішки фантазії і своєї дорогоцінної праці. Отже, щоб підключити jQeury до Веб-додатку потрібно вставити наступний теґ в HTML-код сторінки:
<script src='javascript/jquery-1.11.3.min.js'></script>
Значення атрибуту src теґу script необхідно замінити на відповідне місце збереженого Вами JavaScript-файлу бібліотеки jQuery. До слова, усі JavaScript фали — це прості текстові файли, які можна відкрити Вашим улюбленим текстовим редактором або системою візуальної розробки.
Наприклад, розглянемо наступний базовий код HTML-сторінки.
<html>
<head>
<title>jQuery і JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src='javascript/jquery-1.11.3.min.js'></script>
</head>
<body>
</body>
</html>
Дана сторінка є прикладом підключення jQuery до Веб-сторінки або додатку. В ній використовується jQuery версії 1.11.3, яка підтримує старі версії IE 5,6 і 8, і також являється стиснутою версією для комерційного використання (без символів форматування коду і без коментарів). Далі в статті ми будемо використовувати даний код і дану версію jQuery.
Як використовувати jQuery?
Тепер, коли ми отримали достатній рівень знань, ми можемо перейти до наступної теми. А саме: як використовувати бібліотеку jQuery, як нам використати її корисні і так потрібні механізми?
Усе це робиться дуже просто і декількома способами:
- jQuery функції можна викликати через глобальну змінну “jQuery”;
- методи jQuery можна викликати через символ долара “$”, який має спеціальне значення при інтерпретації JavaScript коду.
Найпопулярнішим методом звернення до jQuery являється символ долара — це найшвидший метод з усіх і найпопулярніший, тому Я ним і буду користуватись в статтях.
Приклади
Тепер розглянемо декілька простих прикладів використання jQuery. І найперший з них це виклик функції, яка створена розробником Веб-сторінки, при завантаженні самої Веб-сторінки у браузер кінцевого користувача.
<html>
<head>
<title>jQuery і JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src='javascript/jquery-1.11.3.min.js'></script>
</head>
<body>
<script type='text/javascript'>
/* Після завантаження HTML-документу
** виконається функція яка передається функції
** ready в якості параметру. В нашому випадку це
** анонімна функція, яка виводить на екран
** повідомлення "Hallo, World!". */
$(document).ready (function () {
alert ('Hallo, World!') ;
return false ;
})
</script>
</body>
</html>
Даний приклад використовує анонімну функцію, ми також можемо передати функції ready, іменовану функцію:
<html>
<head>
<title>jQuery і JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src='javascript/jquery-1.11.3.min.js'></script>
</head>
<body>
<script type='text/javascript'>
function show_hallo () {
alert ('Hallo, World!') ;
return false ;
}
$(document).ready (show_hallo) ;
</script>
</body>
</html>
Результат відкриття даних HTML-сторінок:
Тепер розглянемо складніший приклад: покажемо на Веб-сторінці декілька блоків різних кольорів і при натисканні мишею на любий з них, змінимо його колір на чорний. Властивості блоків будемо задавати за допомогою стилів CSS.
<html>
<head>
<title>jQuery і JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src='javascript/jquery-1.11.3.min.js'></script>
<style type='text/css'>
/* загальний стиль для усіх блоків */
.colored_divs
{
height: 100px ;
width: 100px ;
display: inline-block ;
margin: 10px ;
}
/* встановлюємо різні кольори */
.div1
{ background-color: #FF0000 ; /* червоний */ }
.div2
{ background-color: #00FF00 ; /* зелений */ }
.div3
{ background-color: #0000FF ; /* синій */ }
.div4
{ background-color: #FFFF00 ; /* жовтий */ }
.div5
{ background-color: #00FFFF ; /* голубий */ }
</style>
<script type='text/javascript'>
/* функція, яка буде викликатися
** при натисканні на будь-якому блоку, який помічений
** класом CSS colored_divs */
function set_clicked_color (event)
{
/* отримуємо блок, на який натиснули мишею */
var block = $(event.target) ;
/* змінюємо колір фону блоку на чорний */
block.css ('background-color', '#000') ;
/* вихід з функції */
return false ;
}
/* ініціалізацію потрібно зробити
** при завантаженні сторінки
** (виконується анонімна функція) */
$(document).ready (function (){
/* отримуємо усі блоки з CSS класом colored_divs */
var blocks = $('.colored_divs') ;
/* встановлюємо обробник події "click" на
** виклик функції set_clicked_color,
** яка попередньо оголошена */
blocks.on ("click", set_clicked_color) ;
/* вихід з функції */
return false ;
}) ;
</script>
</head>
<body>
<!-- Показуємо різнокольорові блоки -->
<div class="colored_divs div1"></div>
<div class="colored_divs div2"></div>
<div class="colored_divs div3"></div>
<div class="colored_divs div4"></div>
<div class="colored_divs div5"></div>
</body>
</html>
Результат відкриття даного файлу буде наступним:
[embed]https://youtu.be/sUjmuT7BkuE[/embed]
Резюме
В даній статті ми отримали базові знання про бібліотеку jQuery і прості приклади використання. В подальших статтях, Я розповім як використовувати інші функції jQuery: анімація, AJAX; розглянемо детальніше селектори jQuery і модифікування дерева сторінки.