Изучаем jQuery. Часть 8.1 События

Ромчик
1

wordpress

Доброго времени суток. Мы продолжаем изучать jQuery и с этой статьи мы начинаем рассматривать события в jQuery. Что такое событие в jQuery? Это некоторое действие, которое пользователь совершает на странице, например клик по некоторому элементу или перемещение курсора мыши на странице.

А в данной статье мы остановимся на событиях связанных с мышью.

И первое событие связано с одним кликом.

Событие click()

Событие click() возникает при одном щелчке мышки на элементе.

Рассмотрим html-код:


<!doctype html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<link href="./css/style.css" rel="stylesheet" media="screen">

<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="./js/script.js"></script>

<title>Изучаем jQuery</title>

</head>

<body>

<div id="wrapper">

<div id="header" align="center">Header</div>

<div id="example"><p>Example</p></div>

<div id="content">

<p>Content</p>

<p>Test</p>

</div>

<div id="sidebar"><span>Sidebar</span></div>

<div id="clear"></div>

</div>

<div id="footer">

Footer

</div>

</body>

</html>

Теперь мы хотим, чтобы при щелчке на элементе div с id=»example» выскакивало сообщение «Вы кликнули один раз по элементу с id=’example’ »

Для этого в нашем файле скриптов добавим следующий код:


$(function(){

$("#example").click(function(){

alert("Вы кликнули один раз по элементу с id='example' ");

&nbsp;

});

});

Что мы сделали?

Первое, дождались загрузки страницы. Затем выбрали элемент с id=’example’ ($(«#example»)) и указали, что при возникновении события click должна быть вызвана анонимная функция, которая показывает сообщение.

Событие dblclick()

Событие dblclick() возникает при двойном щелчке на элементе.

Давайте рассмотрим html-код приведенный выше. Теперь мы хотим, чтобы при двойном щелчке на элементе div с id=»example» выскакивало сообщение «Вы сделали двойной щелчок по элементу с id=’example’ »

Для этого изменим в нашем файле скриптов код на следующий:


$(function(){

$("#example").dblclick(function(){

alert("Вы сделали двойной щелчок по элементу с id='example' ");

});

});

Смотрим видео.

Событие mouseover()

Событие mouseover() возникает, когда курсор мыши появляется над элементом.

Рассмотрим выше приведенный html-код. Теперь мы хотим, чтобы при наведении курсора на элемент div с id=’example’ внутри него надпись «Example» изменилась на надпись «Курсор мыши над элементом c id=’example’». Для этого добавим в наш файл скриптов следующий код:


$(function(){

$("#example").mouseover(function(){

$(this).text("Курсор мыши над элементом c id='example'");

});

});

Смотрим, что получилось.

Событие mouseout()

Событие mouseout() возникает, когда курсор покидает пределы элемента. Давайте рассмотрим html-код приведенный выше. И наша задача заключается в том, чтобы, кода курсор покинет пределы элемента div с id=id=’example’ надпись в этом элементе «Example» изменилась на «Курсор мыши покинул пределы элемента c id=’example’». Для этого в файл со скриптами добавим следующий код:


$(function(){

$("#example").mouseout(function(){

$(this).text("Курсор мыши покинул пределы элемента c id='example'");

});

});

Смотрим, что получилось.

Событие mousedown()

Событие mausedown() возникает в момент, когда мы нажимаем кнопку мыши над элементом, но еще не отпустили её.

Рассмотрим html-код приведенный выше. И мы хотим, чтобы при нажатии на кнопку над элементом div с id=’example’ появилось сообщение «Вы нажали на кнопку мыши: <код кнопки>». Для этого добавим следующий код в наш файл скриптов:


$(function(){

$("#example").mousedown(function(eventObject){

alert('Вы нажали на кнопку мыши:' + eventObject.which);

});

});

Смотрим видео.

Событие mouseup()

Событие mouseup() возникает в момент, когда мы отпускаем нажатую кнопку мыши над элементом.

Рассмотрим html-код приведенный выше. И мы хотим, чтобы при отжимании кнопки над элементом div с id=’example’ появилось сообщение «Вы отпустили кнопку мыши: <код кнопки>». Для этого добавим следующий код в наш файл скриптов:


$(function(){

$("#example").mouseup(function(eventObject){

alert('Вы отпустили кнопку мыши:' + eventObject.which);

});

});

Событие mousemove()

Событие mousemove() возникает, когда курсор мыши начинает двигаться в внутри элемента.

Давайте рассмотрим html-код приведенный выше. Теперь мы хотим вывести сообщение «Курсор мыши был сдвинут». Для этого добавим в наш файл со скриптами следующий код:


$(function(){

$("#example").mousemove(function(){

alert('Курсор мыши был сдвинут');

});

});

Событие mouseenter()

Событие mouseenter() возникает, когда курсор мыши появляется над элементом. Данное событие аналогично событию mouseover(), но реализовано лучше чем mouseover().

Рассмотрим html-код приведенный выше. Теперь мы хотим, чтобы при наведении курсора на элемент div с id=’example’ внутри него надпись «Example» изменилась на надпись «Курсор мыши над элементом c id=’example’». Для этого добавим в наш файл скриптов следующий код:


$(function(){

$("#example").mouseenter(function(){

$(this).text("Курсор мыши над элементом c id='example'");

});

});

Смотрим, что получилось.

Событие mouseleave()

Событие mouseleave() возникает, когда курсор мыши покидает область над элементом. Это событие аналогично событию mouseout(), но реализовано лучше.

Рассмотрим html-код приведенный выше. И наша задача заключается в том, чтобы, кода курсор покинет пределы элемента div с id=id=’example’ надпись в этом элементе «Example» изменилась на «Курсор мыши покинул пределы элемента c id=’example’». Для этого в файл со скриптами добавим следующий код:


$(function(){

$("#example").mouseleave(function(){

$(this).text("Курсор мыши покинул пределы элемента c id='example'");

});

});

Смотрим.

Мы с Вами рассмотрели основные события jQuery связанные с мышкой.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • Изучаем jQuery. Часть 8.2 События | Все о WEB программировании - 06.08.2013 в 08:04

    […] мы с Вами уже рассмотрели события связанные с мышкой «Изучаем jQuery. Часть 8.1 События». А в этой статье мы остановимся событиях связанных с […]

  • ©2012-2017 По всем вопросам обращайтесь через форму обратной связи

    Яндекс.Метрика