Бібліотека jQuery

1. Підключення jQuery

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

Тому якщо ти пишеш невеликий вебпроєкт і не бажаєш витрачати місяці на вивчення сучасних фреймворків, рекомендую тобі скористатися бібліотекою jQuery.

По-перше, jQuery – це бібліотека, а не фреймворк, а отже, вона встановлює власний формат того, як влаштовано frontend. Ти можеш підключити її до будь-якої html-сторінки та викликати її функції.

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

<head>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

Роботу з jQuery можна поділити на два типи.

По-перше, ти можеш отримати об'єкт бібліотеки jQuery, який являє собою звичайний HTML-елемент, який огорнено в спеціальний об'єкт з jQuery.

По-друге, jQuery має кілька глобальних об'єктів, що не прив'язані до HTML-елементів. Їх теж потрібно використовувати.

Почнемо з перших.

2. Робота з селекторами

Для роботи з об'єктами в jQuery використовуються селектори (пам'ятаєш CSS та його класи?). Так от, у jQuery, якщо хочеш обрати якийсь об'єкт чи групу об'єктів, тобі потрібно вказати їхній селектор.

Приклади:

Скажімо, ми хочемо всім посиланням додати обробку події onclick. Ось як це можна зробити за допомогою jQuery:

$("a").click(function() { alert("Click"); });

Тут виконуються три дії:

1. Отримуємо об'єкт(и), які відповідають селектору "a".
2. Створюємо анонімну функцію, що викликає метод alert().
3. Встановлюємо цю функцію як обробник на подію click для всіх об'єктів з пункту 1.

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

3. Робота з елементами документа

Давай розберемо кілька сценаріїв роботи з документом за допомогою jQuery.

Отримати значення елемента (для елементів, які мають значення):

var result = $ ("selector").value();

Установити значення елемента (для елементів, які мають значення):

$ ("selector").value(newValue);

Як додати HTML всередину якогось елемента?

$ ("selector").html(newHTML);

А як отримати HTML, який знаходиться усередині елемента?

var html = $ ("selector").html();

А якщо треба отримати/додати не HTML, а простий текст? Тут теж жодних сюрпризів:

var html = $ ("selector").text();

А якщо треба отримати/змінити колір елемента?

$ ("selector").color("red");

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

$ ("selector").css("color", "red");

Як додати новий елемент?

$ (".container").append($("h3"));