Последние учебники веб-разработки
 

jQuery Методы событий

❮ Предыдущая Следующая Глава ❯

Jquery это специально сделано, чтобы реагировать на события в HTML-страницы.

Какие события?

Все действия различных посетителе, что веб-страница может реагировать на события называются.

Событие представляет собой точный момент, когда что-то случится.

Примеры:

  • перемещение мыши над элементом
  • выбор кнопки радио
  • щелкнув на элементе

Термин "fires/fired" часто используется с событиями. Например , « keypress событие вызывается, момент , когда вы нажимаете клавишу".

Вот некоторые наиболее часто встречающиеся события DOM:

События мыши События клавиатуры Форма События Документ / Окно События
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

JQuery Синтаксис для методов событий

В JQuery, большинство событий DOM имеют эквивалентный метод JQuery.

Чтобы назначить событие щелчка ко всем пунктам на странице, вы можете сделать это:

$("p").click();

Следующим шагом является определение того, что должно произойти, когда срабатывает событие. Вы должны передать функцию к событию:

$("p").click(function(){
  // action goes here!!
});

Широко используемые методы Event Jquery

$(document).ready()

$(document).ready() метод позволяет выполнить функцию , когда документ полностью загружен. Это событие уже было объяснено в JQuery синтаксиса главы.

click()

click() метод придает функцию обработчика событий к HTML - элементу.

Функция выполняется, когда пользователь нажимает на HTML элемент.

Следующий пример говорит: Когда событие нажмите пожары на <p> элемента; скрыть текущий <p> элемент:

пример

$("p").click(function(){
    $(this).hide();
});
Попробуй сам "

dblclick()

dblclick() метод придает функцию обработчика событий к HTML - элементу.

Функция выполняется, когда пользователь делает двойной клик на элементе HTML:

пример

$("p").dblclick(function(){
    $(this).hide();
});
Попробуй сам "

mouseenter()

mouseenter() метод придает функцию обработчика событий к HTML - элементу.

Функция выполняется, когда указатель мыши входит в HTML-элемент:

пример

$("#p1").mouseenter(function(){
    alert("You entered p1!");
});
Попробуй сам "

mouseleave()

mouseleave() метод придает функцию обработчика событий к HTML - элементу.

Функция выполняется, когда указатель мыши покидает элемент HTML:

пример

$("#p1").mouseleave(function(){
    alert("Bye! You now leave p1!");
});
Попробуй сам "

mousedown()

mousedown() метод придает функцию обработчика событий к HTML - элементу.

Функция выполняется, когда левый, средний или правая кнопка мыши нажата, а мышь находится над HTML элемента:

пример

$("#p1").mousedown(function(){
    alert("Mouse down over p1!");
});
Попробуй сам "

mouseup()

mouseup() метод придает функцию обработчика событий к HTML - элементу.

Функция выполняется, когда левая, средняя или правая кнопка мыши отпускается, в то время как мышь находится над HTML элемента:

пример

$("#p1").mouseup(function(){
    alert("Mouse up over p1!");
});
Попробуй сам "

hover()

hover() метод принимает две функции и представляет собой комбинацию из mouseenter() и mouseleave() методы.

Первая функция выполняется, когда мышь входит в HTML-элемент, а вторая функция выполняется, когда мышь покидает элемент HTML:

пример

$("#p1").hover(function(){
    alert("You entered p1!");
},
function(){
    alert("Bye! You now leave p1!");
});
Попробуй сам "

focus()

focus() метод придает функцию обработчика событий в поле HTML - формы.

Функция выполняется, когда поле формы получает фокус:

пример

$("input").focus(function(){
    $(this).css("background-color", "#cccccc");
});
Попробуй сам "

blur()

blur() метод придает функцию обработчика событий в поле HTML - формы.

Функция выполняется, когда поле формы теряет фокус:

пример

$("input").blur(function(){
    $(this).css("background-color", "#ffffff");
});
Попробуй сам "

on() Метод

on() метод придает один или несколько обработчиков событий для выбранных элементов.

Приложить событие щелчка к <p> элемента:

пример

$("p").on("click", function(){
    $(this).hide();
});
Попробуй сам "

Прикрепите несколько обработчиков событий элемента <p>:

пример

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    },
    click: function(){
        $(this).css("background-color", "yellow");
    }
});
Попробуй сам "

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »

Методы событий Jquery

Для получения полной справки события JQuery, пожалуйста , перейдите на наш Jquery Events Reference .


❮ Предыдущая Следующая Глава ❯