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

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

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

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

Вебінар JavaRush

Щоб ти міг користуватися тисячами функцій 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");
  });

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

  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"));