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, якщо хочеш обрати якийсь об'єкт чи групу об'єктів, тобі потрібно вказати їхній селектор.
Приклади:
| Код | Опис | Примітка | |
|---|---|---|---|
| 1 | $("div") | Обирає всі об'єкти з тегом DIV | багато об'єктів |
| 2 | $("img.#image123") | Обирає всі об'єкти з тегом IMG та ID == image123 | один об'єкт |
| 3 | $("#image123") | Обирає всі об'єкти з ID == image123 | один об'єкт |
| 4 | $("div.article") | Обирає всі об'єкти з тегом DIV, у яких є class article | багато об'єктів |
Скажімо, ми хочемо всім посиланням додати обробку події onclick. Ось як це можна зробити за допомогою jQuery:
$("a").click(function() { alert("Click"); });
Тут виконуються три дії:
- Отримуємо об'єкт(и), які відповідають селектору
"a". - Створюємо анонімну функцію, що викликає метод
alert(). - Встановлюємо цю функцію як обробник на подію
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"));
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ