jQuery для чайників ч.2 - події

В минулій статті, ми почали розгляд основ jQuery, навчилися визначати типи даних та працювати з селекторами.

Проте, вміти вибирати елементи на сторінці - це дуже добре, але ще краще - знати як з ними працювати. Сьогодні ми розглянемо саме цей аспект.

Про що Ви сьогодні дізнаєтеся:

• Як використовувати подію click;
• Як використовувати подію hover;
• Як змінити css клас;

Натискання клавіші - подія Click

Найпростіший спосіб взаємодії з HTML-елементами є подія Click. Ви натискаєте на щось (наприклад. виділений елемент), і щось відбувається. Click в jQuery працює наступним чином:

$("#target").on( "click", function() {
    alert("Codeguida one Love");
});

Якщо ви вже оголосили змінну у верхній частині сторінки, Ви можете звернутися до цієї змінної замість того, щоб писати назву селектора.

// задаємо змінну
var $clickMeElement = $('#gallery li').eq(0);
// використовуємо
$clickMeElement.on( "click", function() {
    alert("Я люблю Codeguida");
});

Це викличе javascript попередження, коли користувач натисне на першу картинку в #gallery.

Переміщення миші - подія Hover

Інша подія, з якою всі ми стикаємося сотні разів на день, це відслідковування миші.

Думаю кожен бачив слайд-шоу, яке працює тільки тоді, коли миша знаходиться в зоні вікна слайдів. При відведенні миші в іншу зону зміна кадрів припиняється. Ця зміна поведінки в залежності від положення покажчика і є подією Hover.

Це працює наступним чином:

// визначаємо змінну
var $hoverMeElement = $('#gallery li').eq(1);
// використовуємо змінну
$hoverMeElement.hover(
    function() {
        $(this).css('transform','rotate(90deg)');
    }, function() {
        $(this).css('transform','rotate(0)');
    }
);

Цей фрагмент коду допоможе нам повернути друге зображення в #gallery на 90º при mouseenter і назад (0º) при mouseleave.

Зміна CSS класу при натисканні - ToggleClass подія

Ще одна дуже поширена подія на інтерактивних сайтах, це toggleClass. При виконанні певних дій, jQuery буде додавати або видаляти клас із зазначеного елемента.

ToggleClass подія в jQuery працює наступним чином:

// визначаємо змінну
var $toggleTrigger = $('#gallery li').eq(-1);
// використовуємо цю змінну
$toggleTrigger.click(function() {
  $(this).toggleClass("highlight");
});

Це додасть клас .highlight до останнього елемента #gallery.

Ви можете оціниту роботу подій за допомогою цього Codepen:

See the Pen awtAm by Codeguida (@codeguida) on CodePen.

Сьогодні Ви дізналися як виконувати базові дії за допомогою основних подій jQuery: Click, Hover і ToggleClass. Але це далеко не все, далі ще більше корисного та цікавого!

Джерело