wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Jquery

Jquery событие наведение мыши: Наведение курсора на элемент в jQuery

alexxlab
No Comments

Содержание

События — JQuery

Материал из JQuery

С помощью методов из этого раздела, вы сможете обрабатывать различные события, происходящие на странице (как например наведения курсора на элемент или нажатие клавиши). Речь идет, как о стандартных событиях javascript, так новых, организованных самой библиотекой jQuery.

Список функций

Базовые

.on()Универсальный метод для установки обработчиков событий на выбранные элементы страницы.
.off()Удаляет обработчики, установленные с помощь .on().
.bind()Устанавливает обработчик события на выбранные элементы страницы. Обработчик не сработает на элементах, появившихся после его установки.
.live()Устанавливает обработчик события на выбранные элементы страницы. Обработчик сработает и на элементах, появившихся после его установки.
.delegate()Устанавливает обработчик события на выбранные элементы страницы. Элементы выбираются с помощью уточняющего селектора. Обработчик будет действовать и на элементах, появившихся после его установки.
.one()Устанавливает обработчик события на выбранные элементы страницы, который сработает только по одному разу, на каждом из элементов.
.unbind()Удаляет обработчик событий у выбранных элементов.
.die()Удаляет обработчик событий, который был установлен с помощью live().
.undelegate()Удаляет обработчик событий, который был установлен с помощью delegate().
.trigger()Выполняет указанное событие и запускает его обработчик.
.triggerHandler()Запускает обработчик указанного события, без его выполнения.
jQuery.proxy()По заданной функции, создает другую, внутри которой переменная this будет равна заданному значению.
eventОбъект, содержащий данные о текущем событии. Передается всем обработчикам событий.

События мыши

.click()Устанавливает обработчик «клика» мышью по элементу, либо, запускает это событие.
.dblclick()Устанавливает обработчик двойного «клика» мышью по элементу, либо, запускает это событие.
.hover()Устанавливает обработчик двух событий: появления/исчезновения курсора над элементом.
.mousedown()Устанавливает обработчик нажатия кнопки мыши, либо, запускает это событие.
.mouseup()Устанавливает обработчик поднятия кнопки мыши, либо, запускает это событие.
.mouseenter()Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие. Появление этого события, отработано лучше, чем стандартного mouseover.
.mouseleave()Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие. Появление этого события, отработано лучше, чем стандартного mouseout.
.mousemove()Устанавливает обработчик движения курсора в области элемента, либо, запускает это событие.
.mouseout()Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие.
.mouseover()Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие.
.toggle()Поочередно выполняет одну из двух или более заданных функций, в ответ на «клик» по элементу.

События клавиатуры

.keydown()Устанавливает обработчик перехода клавиши клавиатуры в нажатое состояние, либо, запускает это событие.
.keyup()Устанавливает обработчик возвращение клавиши клавиатуры в ненажатое состояние, либо, запускает это событие.
.keypress()Устанавливает обработчик ввода символа с клавиатуры, либо, запускает это событие.

События формы

.focus()Устанавливает обработчик получения фокуса, либо, запускает это событие.
.blur()Устанавливает обработчик потери фокуса, либо, запускает это событие.
.focusin()Устанавливает обработчик получения фокуса самим элементом или одним из его дочерних.
.focusout()Устанавливает обработчик потери фокуса самим элементом или одним из его дочерних.
.select()Устанавливает обработчик выделения текста, либо, запускает это событие.
.submit()Устанавливает обработчик отправки формы, либо, запускает это событие.
.change()Устанавливает обработчик изменения элемента формы, либо, запускает это событие.

События загрузки страницы

.ready()Устанавливает обработчик готовности дерева DOM.
.load()Устанавливает обработчик завершения загрузки элемента.
.unload()Устанавливает обработчик ухода со страницы (при переходе по ссылке, закрытии браузера и.т.д.).

События браузера

.error()Устанавливает обработчик ошибки при загрузке элементов (например отсутствие необходимой картинки на сервере).
.resize()Устанавливает обработчик изменения размеров окна браузера, либо, запускает это событие.
.scroll()Устанавливает обработчик «прокрутки» элементов документа, либо, запускает это событие.

Метод .hover() | jQuery справочник

basicweb.ru

  • HTML
    • Учебник HTML
    • Справочник тегов
    • Атрибуты событий
    • Глобальные атрибуты
    • Коды языков
    • Мнемоники
    • Цвета
    • Тесты знаний
  • CSS
    • Учебник CSS
    • Справочник свойств
    • Селекторы
    • Функции
    • Правила
    • Flexbox генератор
    • Grid генератор
    • Учебник LESS
  • JavaScript
    • Интерфейсы веб API
    • Объект Array
    • Объект Date
    • Объект Function
    • Объект Global
    • Объект JSON
    • Объект Math
    • Объект Number
    • Объект Object
    • Объект RegExp
    • Объект Promise
    • Объект String
  • jQuery
    • Селекторы
    • События
    • Методы DOM
    • Перемещения
    • Утилиты
    • Эффекты
    • AJAX
    • Объект Callbacks
    • Объект Deferred

HTML


  • HTML учебник


  • Справочник тегов


  • Атрибуты событий


  • Глобальные атрибуты


  • Мнемоники


  • Коды языков


  • HTML цвета


  • Тесты знаний

CSS


  • CSS учебник


  • Справочник свойств


  • CSS селекторы


  • CSS функции


  • CSS правила


  • Flexbox генератор


  • Grid генератор


  • LESS учебник

JavaScript


  • Интерфейсы веб API


  • Объект Array


  • Объект Date


  • Объект Function


  • Объект Global


  • Объект JSON


  • Объект Math β


  • Объект Number


  • Объект Object


  • Объект Promise

Метод .mouseover() | jQuery справочник

basicweb.ru

  • HTML
    • Учебник HTML
    • Справочник тегов
    • Атрибуты событий
    • Глобальные атрибуты
    • Коды языков
    • Мнемоники
    • Цвета
    • Тесты знаний
  • CSS
    • Учебник CSS
    • Справочник свойств
    • Селекторы
    • Функции
    • Правила
    • Flexbox генератор
    • Grid генератор
    • Учебник LESS
  • JavaScript
    • Интерфейсы веб API
    • Объект Array
    • Объект Date
    • Объект Function
    • Объект Global
    • Объект JSON
    • Объект Math
    • Объект Number
    • Объект Object
    • Объект RegExp
    • Объект Promise
    • Объект String
  • jQuery
    • Селекторы
    • События
    • Методы DOM
    • Перемещения
    • Утилиты
    • Эффекты
    • AJAX
    • Объект Callbacks
    • Объект Deferred

HTML


  • HTML учебник


  • Справочник тегов


  • Атрибуты событий


  • Глобальные атрибуты


  • Мнемоники


  • Коды языков


  • HTML цвета


  • Тесты знаний

CSS


  • CSS учебник


  • Справочник свойств


  • CSS селекторы


  • CSS функции


  • CSS правила


  • Flexbox генератор


  • Grid генератор


  • LESS учебник

JavaScript


  • Интерфейсы веб API


  • Объект Array


  • Объект Date


  • Объект Function


  • Объект Global


  • Объект JSON


  • Объект Math β


  • Объект Number


  • Объект Object


  • Объект Promise

jQuery | события мыши

click()одиночный клик левой кнопки мыши
dblclick()двойной клик левой кнопки мыши
mouseover()  mouseout()наведение курсора на элемент;
выход курсора за границы элемента;
после выполнения на элементе, событие передается родительскому элементу и так далее, вплоть до начала дерева DOM, что может привести к проблемам
mouseenter()  mouseleave()наведение курсора на элемент;
выход курсора за границы элемента;
после выполнения на элементе, событие не передается родительскому элементу
hover()устанавливает обработчики двух событий:
mouseenter() — наведение курсора на элемент;
mouseleave() — выход курсора за границы элемента;
mousedown()  mouseup()клавиша мыши нажата, курсор находится в границах элемента;
клавиша мыши отпущена, курсор находится в границах элемента;
toggle()поочередно выполняет две или несколько функций при клике на элементе;
jQuery 1.8 является устаревшим, в jQuery 1.9 удален
mousemove()устанавливает обработчик события при движении курсора мыши внутри границ элемента

Функция выполняется при одиночном клике левой кнопки мыши.

  index.html  

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #main {
   margin: 20px;
  }
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
 
 <script>
  $(document).ready(function () {
   var counter = 0;
   $('.a').click(function () {
    counter++;
    if(counter%2 != 0) {
     $('.b').css({ 'display': 'block' }).text('Hello World!');
    }
    else {
     $('.b').css({ 'display': 'none' }).text('');
    }
   });
  });
 </script>
</body>
</html>
 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #main {
   margin: 20px;
  }
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
 
 <script>
  $(document).ready(function () {
   var counter = 0;
   $('.a').click(function () {
    counter++;
    if(counter%2 != 0) {
     $('.b').css({ 'display': 'block' }).text('Hello World!');
    }
    else {
     $('.b').css({ 'display': 'none' }).text('');
    }
   });
  });
 </script>
</body>
</html>
 
 Функция выполняется при двойном клике левой кнопки мыши.
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #main {
   margin: 20px;
  }
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
 
 <script>
  $(document).ready(function () {
   var counter = 0;
   $('.a').dblclick(function () {
    counter++;
    if(counter%2 != 0) {
     $('.b').css({ 'display': 'block' }).text('Hello World!');
    }
    else {
     $('.b').css({ 'display': 'none' }).text('');
    }
   });
  });
 </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #main {
   margin: 20px;
  }
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
 
 <script>
  $(document).ready(function () {
   var counter = 0;
   $('.a').dblclick(function () {
    counter++;
    if(counter%2 != 0) {
     $('.b').css({ 'display': 'block' }).text('Hello World!');
    }
    else {
     $('.b').css({ 'display': 'none' }).text('');
    }
   });
  });
 </script>
</body>
</html>
 
 
mouseenter()  mouseleave()
 Функция mouseenter() выполняется при наведении курсора на элемент.
 
Функция mouseleave() выполняется при выходе курсора за границы элемента.
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #main {
   margin: 20px;
  }
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
 
 <script>
  $(document).ready(function () {
   /*при наведении курсора на элемент*/
   $('.a').mouseenter(function () {
    $('.b').css({ 'display': 'block' }).text('Hello World!');
   });
 
   /*при выходе курсора за границы элемента*/
   $('.a').mouseleave(function () {
    $('.b').css({ 'display': 'none' }).text('');
   });
  });
 </script>
</body>
</html>
 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #main {
   margin: 20px;
  }
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
 
 <script>
  $(document).ready(function () {
   /*при наведении курсора на элемент*/
   $('.a').mouseenter(function () {
    $('.b').css({ 'display': 'block' }).text('Hello World!');
   });
 
   /*при выходе курсора за границы элемента*/
   $('.a').mouseleave(function () {
    $('.b').css({ 'display': 'none' }).text('');
   });
  });
 </script>
</body>
</html>
 
 Функция устанавливает обработчики двух событий:
 
mouseenter() — наведение курсора на элемент;
 
mouseleave() — выход курсора за границы элемента;
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #main {
   margin: 20px;
  }
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
 
 <script>
  $(document).ready(function () {
   $('.a').hover(
    /*при наведении курсора на элемент*/
    function () {
     $('.b').css({ 'display': 'block' }).text('Hello World!');
    },
    /*при выходе курсора за границы элемента*/
    function () {
     $('.b').css({ 'display': 'none' }).text('');
    }
   );
  });
 </script>
</body>
</html>
 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #main {
   margin: 20px;
  }
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
 
 <script>
  $(document).ready(function () {
   $('.a').hover(
    /*при наведении курсора на элемент*/
    function () {
     $('.b').css({ 'display': 'block' }).text('Hello World!');
    },
    /*при выходе курсора за границы элемента*/
    function () {
     $('.b').css({ 'display': 'none' }).text('');
    }
   );
  });
 </script>
</body>
</html>
 
 
 
mousedown()  mouseup()
 Функция mousedown() выполняется при нажатии клавиши мыши, курсор находится в границах элемента.
 
Функция mouseup()выполняется, когда клавиша мыши отпущена, курсор находится в границах элемента.
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  #main {
   margin: 20px;
  }
 
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
 
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
 
 <script>
  $(document).ready(function () {
   /*клавиша мыши нажата, курсор находится в границах элемента*/
   $('.a').mousedown(function () {
    $('.b').css({ 'display': 'block' }).text('Hello World!');
   });
 
   /*клавиша мыши отпущена, курсор находится в границах элемента*/
   $('.a').mouseup(function () {
    $('.b').css({ 'display': 'none' }).text('');
   });
  });
 </script>
</body>
</html>
 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  #main {
   margin: 20px;
  }
 
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
 
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
 
 <script>
  $(document).ready(function () {
   /*клавиша мыши нажата, курсор находится в границах элемента*/
   $('.a').mousedown(function () {
    $('.b').css({ 'display': 'block' }).text('Hello World!');
   });
 
   /*клавиша мыши отпущена, курсор находится в границах элемента*/
   $('.a').mouseup(function () {
    $('.b').css({ 'display': 'none' }).text('');
   });
  });
 </script>
</body>
</html>
 
 Функция устанавливает обработчик события при движении курсора мыши внутри границ элемента.
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  #main {
   height: 400px;
   width: 400px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -200px;
   margin-left: -200px;
   background-color: #1bb1dd;
  }
 
  #box1 {
   margin: 30px;
   font-size: 36px;
  }
 </style>
</head>
<body>
 <div>
  <label>X : </label>
  <span></span>
  <br />
  <label>Y : </label>
  <span></span>
 </div>
 <div></div>
 <script>
  $(document).ready(function () {
   $('#main').mousemove(function (e) {
    $('#x').text(e.pageX);
    $('#y').text(e.pageY);
   });
  });
 </script>
</body>
</html>
 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  #main {
   height: 400px;
   width: 400px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -200px;
   margin-left: -200px;
   background-color: #1bb1dd;
  }
 
  #box1 {
   margin: 30px;
   font-size: 36px;
  }
 </style>
</head>
<body>
 <div>
  <label>X : </label>
  <span></span>
  <br />
  <label>Y : </label>
  <span></span>
 </div>
 <div></div>
 <script>
  $(document).ready(function () {
   $('#main').mousemove(function (e) {
    $('#x').text(e.pageX);
    $('#y').text(e.pageY);
   });
  });
 </script>
</body>
</html>
 
События в jQuery
 Перейти к основному содержанию
  •  Самоучители
    •  HTML для начинающих
    •  CSS для начинающих
    •  Учебник HTML5
    •  Учебник Canvas
    •  XML для начинающих
    •  Учебник XML DTD
    •  Учебник по XML схемам
    •  Учебник XML DOM
    •  Учебник XPath
    •  Учебник по XSLT
    •  Учебник SVG
    •  Учебник JavaScript
    •  Учебник jQuery
  •  Справочники
    •  HTML теги
    •  CSS свойства
    •  Общие HTML атрибуты
    •  HTML атрибуты-события
    •  Элементы XML схемы
    •  Элемент canvas
  •  Статьи
  •  Новости
  •  Контакт
  •  Вход
Обработка событий в jQuery
<style>
    * {box-sizing: border-box}
    body { font-family: Tahoma;  line-height: 150%; }
    .test {
        width: 90%;
        margin: 25px auto;
    }
    .slideBox {
        width: 480px;
        height: 290px;
        position: relative;
        overflow: hidden;
        float: left;
        margin: 0 25px 25px 0;
        border: 5px solid #ccc;
        padding: 10px;  
        background-color: #ac1259;
        color: #fff;
    }
    .slideBox h3 {
        margin: 0 0 15px;
        font-size: 20px;
        text-align: center;
    }
    .slideBox img {
        position: absolute;
        z-index: 2;
        width: 100%;
        left: 0; top: 0;
    }
    .slideBox .slide-content {
        position: absolute;
        z-index: 1;
        padding: 10px;
    }
</style>
<div>
 
    <div>
       <img src=»images/nano-gallery.jpg» alt=»16 бриллиантовых плагинов jQuery» />
       <div>
          <h3>16 бриллиантовых плагинов jQuery</h3>
          <p>Из статьи вы узнаете о том, какие эффекты можно получить с помощью
          плагина <strong>jInvertscroll</strong>, как создать классический дизайн меню
          с помощью <strong>Slinky</strong>, какие вкладки можно сделать  с помощью
          <strong>Tabslet</strong>, создать слайдер или карусель из изображений или текста, подключив плагин <strong>Slick</strong>, и много другой полезной информации</p>
       </div>
    </div> <!—end slideBox—>
  
    <div>
    <img src=»images/flip-clock.png» alt=»Таймер обратного отсчета с помощью плагина jQuery» />
      <div>
         <h3>Таймер обратного отсчета с помощью плагина jQuery</h3>
         <p> jQuery плагин <strong>FlipClock</strong> построен на CSS3 + jQuery. Он позволяет задать
           несколько параметров, которые наверняка пригодятся вам для работы. В статье приведен пример,
           который часто  используется на посадочных страницах, которые сообщают о том, что акция закончится,
           например, через 2 дня.</p>
      </div>
    </div> <!—end slideBox—>
</div>
<script>
    $(function() {
        $(«.slideBox»).hover(function() {
            $(this).find(«img»).stop().animate({
                top: ‘-120%’
            }, 400);
        }, function() {
            $(this).find(«img»).stop().animate({
                top: 0
            }, 400);
        });
    })
</script>
 20 веб-сайтов с творческим эффектом наведения указателя мыши 
 В веб-дизайне даже самый маленький эффект  может изменить общее впечатление пользователя . это может быть эффект сбоя, эффект отскока или даже простой звуковой эффект. Один из этих эффектов,  часто используется в веб-дизайне в наши дни , — это эффект наведения или наведения курсора мыши. Этот переходный эффект можно увидеть, когда вы наводите указатель мыши на определенный элемент, который  заставляет его выдвигаться, менять цвет или анимировать .
 Идея эффекта наведения указателя мыши  состоит в том, чтобы  уменьшить усилия, которые пользователь должен приложить для  просмотра дополнительных сведений, доступа к ключевой информации или просмотра различных представлений  на веб-сайте. Хороший эффект наведения может сэкономить место, чтобы показать больше информации в . Самый умный из возможных способов .
  Читайте также:  JavaScript-библиотек для интересных эффектов прокрутки
 Итак, чтобы дать моим читателям  нескольких примеров этого интересного эффекта , я собрал 20 креативных примеров веб-сайтов с эффектом наведения курсора мыши.Просто прокрутите вниз,  откройте веб-сайт, поиграйте и убедитесь сами , как потрясающе выглядит эффект наведения.
 пикселей Томера Лернера 
 Это очень креативный веб-сайт с черно-белой домашней страницей, на которой  различных геометрических фигур танцуют и трансформируются при наведении на них курсора.
 Дом 
 Haus — это сайт интерактивного агентства, которое  любит технологии и юмор .  Наведите указатель мыши на мультяшные фигурки  на экране и посмотрите, как они прыгают и бегают.
 Canva 
 Canva — это  сервис для создания различных текстовых изображений . Их домашняя страница имеет темный размытый фон, но когда вы наведете на нее курсор, вы увидите, что область  очищается и отображает изображения на заднем плане , как инструмент стирания.
 Главный завод 
 Это сайт-портфолио студии творческого медиа-производства Mainworks.  Наведите курсор мыши или щелкните точки в строке, чтобы увидеть их проекты .
 Седрик Перейра 
 Это сайт-портфолио Седрика Перейры в пастельных тонах.Когда вы  прокручиваете категории  на главной странице, они  меняют цвета и изображения . Кроме того, когда вы наводите курсор на изображение,  его границы перемещаются на .
 Бык 
 Bullmonk — это веб-сайт для управления бизнесом с простой анимацией SVG  на главной странице . Просто наведите указатель мыши на прямоугольник с сеткой, чтобы увидеть, как в нем сформировано  отверстий .
 InSymbiosis 
 InSymbiosis  обеспечивает биофармацевтическую промышленность альтернативной стратегией  для ускорения программ разработки лекарств.Перемещайте мышь, чтобы увидеть удивительные микровзаимодействия  с текстом, кнопками и элементами фона .
 OUI R Creative Studio 
 OUI R — это многопрофильная студия дизайна  , занимающаяся созданием продуктов, основанных на творческих визуальных идеях. Когда вы помещаете курсор мыши на изображения, они  показывают информацию, а с помощью прокрутки мыши вы переходите к следующему изображению .
 Минним 
 Minnim имеет интерактивную домашнюю страницу  с красочными линейными кругами , которые перемещаются при наведении курсора мыши.Вы можете  создать новый элемент цикла с логотипом  с помощью мыши.
 Полный комплект 
 Full Bundle — креативное цифровое агентство. Их домашняя страница разделена на две колонки: логика с  синими треугольниками и креативность с красными квадратами . Когда вы удерживаете курсор мыши над этими элементами, они  отскакивают очень плавно .
 FS Без названия 
 FS Untitled  предлагает посетителям выбрать имя для начертания шрифта . На домашней странице показаны ячейки, по которым при нажатии  открывается демонстрация конкретного шрифта .
 Trainrobber 
 Trainrobber — это агентство  AR и VR , которое создает революционные впечатления от погружения для брендов. Когда вы наводите указатель мыши на главную страницу, различные элементы  перемещаются по горизонтали, как разноцветный вестерн . Категории также анимируются при наведении курсора мыши.
 Sakura International Inc. 
 Sakura — японская компания, специализирующаяся на человеческих сетях. Вы можете  соединить точки на заднем плане одним движением мыши .
 Вентилятор Студия 
 Fan Studio — это мультяшный сайт, на котором создаются мобильные игры и приложения. Чтобы создать ощущение движения , фон перемещается вместе с курсором мыши .
 Студия Повернуть 
 Это сайт бренда и дизайн-студии  , который помогает клиентам добиться присутствия в Интернете. У них есть домашняя страница с белым фоном и кружком. Но когда вы  нажимаете кнопку «Меню», в круге  появляется изображение.
 Компания TheMcBrideCompany 
 На главной странице TheMcBrideCompany есть красивая пейзажная фотография, которая размыта.Когда вы  перемещаете курсор на фон , небольшая область вокруг курсора  становится прозрачной. Выглядит фантастически .
 Умный Франке 
 Clever Franke — агентство интерактивного дизайна, которое объединяет стратегию, дизайн и технологии для  разработки инновационных продуктов и услуг . Заголовки на главной странице генерируются динамически и автоматически, что похоже на волшебство. Когда вы перемещаете курсор на  над буквами, они перемещаются на , но через секунду отступают.
 Центр дизайна сообщений 
 Сайт Центра дизайна сообщений
 имеет уникальный дизайн. На их домашней странице представлено  ярких заголовков с полигональной геометрией . Когда вы наводите курсор мыши на эти заголовки, они  становятся больше и начинают деформировать .
 Только что закодировано 
 Just Coded имеет удивительный темный фон  с точками, образующими холст . Когда вы наводите курсор на этот холст, он выглядит живым, потому что  начинает двигаться и менять перспективу .
 Кинетические приложения 
 Это отмеченный наградами веб-сайт цифрового агентства, которое использует запатентованную технологию для создания  веб-сайтов и приложений для устройств iOS и Android . Домашняя страница  выглядит как небо , и когда вы наводите курсор мыши, кажется, что вы  выбираете направление полета .
  Читайте также:  30 простых идей, чтобы сделать ваш сайт красивее
 100+ jQuery Image Hover Effect Plugin с демонстрационным примером 
 Flip Box — это простая и легко настраиваемая анимация переворота.Он сделан с адаптивным дизайном Bootstrap и отличной анимацией. Это решение для создания красивых флип-боксов или флип-карт без настройки какого-либо кода javascript. Он имеет 12+ макетов, эффект щелчка мышью, эффект переворота при наведении, вертикальный и горизонтальный переворот и другие варианты настройки и может быть легко интегрирован на любой веб-сайт.
 Меня всегда очаровывал «эффект водной ряби», и поэтому пришло время разобраться с ним. В результате получился небольшой плагин jQuery, который вы можете легко интегрировать в свои проекты.Как и в случае с моими последними плагинами jQuery, вы можете использовать «эффект водной ряби» с jQuery или без него. В качестве zip и minifiert этот плагин имеет размер всего 2 КБ.
 Сегодня мы хотели бы поделиться с вами некоторыми идеями крошечного эффекта наведения. Эта концепция проистекает из эффекта зависания, наблюдаемого на Merci-Michel, который дает действительно приятное ощущение из-за его плавности. Идея состоит в том, чтобы показать стопку за наведенной миниатюрой, которая имеет тот же основной цвет, что и изображение, а затем быстро анимировать элементы. Мы используем аниме из библиотеки JavaScript .js  для анимации.
 Tilt.js — это крошечный запрос AnimationFrame с легким эффектом параллакса и наклона 60+ кадров в секунду для jQuery.
 Учебное пособие о том, как создать простой эффект изображения с небольшими фрагментами изображения, вдохновленными некоторыми плакатами и созданными с помощью clip-path.
 Вдохновение исходит от плаката с изображением Гранд-Каньона с забавным эффектом искажения: некоторые части изображения вырезаются и помещаются в другое место. Детали очень маленькие, что создает интересный и креативный вид.Сегодня мы покажем вам, как создать аналогичный эффект с помощью CSS и некоторого JavaScript.
 Некоторые идеи для анимации наведения с эффектным эффектом наклона. Вдохновленный эффектом наведения на веб-сайт Kikk 2015. Мы хотим анимировать изображение (которое может быть ссылкой или просто обычным элементом сетки) с эффектом наклона его частей. Имея в элементе несколько элементов (которые мы называем «наклон»), мы можем добиться множества очень интересных эффектов. Это изображение, элемент «сияние», полупрозрачный оверлей с цветным градиентом, элемент границы и подпись.
 Облегчает веб-навигацию за счет использования визуальных связей (стрелок) между элементами страницы.
  •  Стрелки создают визуальную связь от начального элемента к конечному, даже если положение / размер этих элементов изменяются;
  •  Не навязчивый. Стрелки по умолчанию скрыты и появляются только тогда, когда указатель мыши находится над начальным элементом (или когда начальный элемент получает фокус для мобильных устройств). В качестве альтернативы они могут быть всегда видны;
  •  Доступные формы: линия, полилиния, квадратичные кривые Безье и кубические кривые Безье;
 jQuery Hover3d — это простой скрипт наведения для создания эффекта трехмерного наведения.Идея состоит в том, чтобы преобразовать элемент в трехмерное пространство с помощью преобразования CSS3, поиграть с translateZ для размещения элементов и определить движение мыши для изменения значения преобразования.
 Philter — это плагин JavaScript с открытым исходным кодом, который позволяет управлять фильтрами CSS с помощью подсчета атрибутов HTML. при наведении курсора на эффекты.
 Комплексный взгляд на события в jQuery 
  Эту статью рецензировали Верн Анчета и Камило Рейес. Спасибо всем рецензентам SitePoint за то, что они сделали контент SitePoint как можно лучше! 
 Практически все действия пользователя на веб-странице могут быть зафиксированы в jQuery как события.События важны в том смысле, что они позволяют вам надлежащим образом реагировать на действия пользователя. Например, вы можете написать код, который изменяет цвет фона веб-страницы в зависимости от нажатия кнопки или событий прокрутки.
 jQuery имеет много методов быстрого доступа, таких как  contextmenu () ,  hover ()  и  keyup () , для обработки различных событий. В дополнение к выделенным методам, jQuery также предоставляет общий метод  на , который позволяет прикрепить обработчик для любого события:  on ('eventName', handler) .Имейте в виду, что эти методы представляют собой просто оболочки для стандартных событий DOM, и вы можете добавить обработчики для этих событий в обычном JavaScript.
 В этом руководстве мы кратко рассмотрим все эти методы событий, которые разделены на пять широких категорий, и поговорим о лучших практиках, которым следует следовать при работе с ними.
 События браузера 
 В этой категории три события. Это  error ,  resize  и  scroll .Ошибка . Событие  запускается, когда такие элементы, как изображения, не загружаются должным образом. Его ярлык устарел с jQuery версии 1.8, поэтому теперь вы должны использовать  для ('error', handler) вместо .
 Событие изменения размера 
 Это событие запускается при изменении размера окна браузера. Различные браузеры могут вызывать обработчик изменения размера по-разному в зависимости от реализации. Браузеры на основе Internet Explorer и WebKit вызывают обработчик непрерывно, в то время как браузеры, такие как Opera, вызывают его только в конце события изменения размера.
 Этот фрагмент кода ниже меняет местами изображение  src  в зависимости от ширины окна.
  $ (окно) .resize (function () {
  var windowWidth = $ (окно) .width ();
  if (windowWidth <= 600) {
    $ ("img"). attr ("src", "image-src-here.jpg");
    
  }
});
  
 Эта демонстрация CodePen показывает событие в действии:
 См. Перо Событие изменения размера SitePoint (@SitePoint) на CodePen.
 Событие свитка 
 Элемент может инициировать это событие, когда пользователь прокручивает до другой позиции в этом конкретном элементе.Помимо объекта  window , это событие может вызвать любой элемент с полосой прокрутки. Например, любой элемент со свойством переполнения  , установленным для прокрутки, или любой прокручиваемый iframe может вызвать это событие.
 Имейте в виду, что обработчик вызывается при изменении положения прокрутки. Причина прокрутки значения не имеет. Это может быть вызвано нажатием клавиш со стрелками, щелчком или перетаскиванием полосы прокрутки или использованием колеса прокрутки мыши. В приведенном ниже коде мы проверяем, прокрутил ли пользователь более 500 пикселей и выполняем некоторые действия.
  $ (окно) .scroll (function () {
  if ($ (окно) .scrollTop ()> = 500) {
    $ ("# alert"). text ("Вы достаточно прокрутили!");
    
  }
});
  
 В демонстрации CodePen ниже, если вы продолжите прокрутку и достигнете конца, вы должны увидеть уведомление о том, что вы почти в самом низу веб-страницы:
 См. Перо Событие прокрутки SitePoint (@SitePoint) на CodePen.
 События загрузки документов 
 jQuery имеет методы для трех событий, которые запускаются в зависимости от состояния документа или DOM.Это  load ,  unload  и  ready .
  load ()  можно использовать для присоединения обработчика к любому элементу, который загружает внешний ресурс, например изображения, скрипты, iframe и сам объект  window . Событие запускается, когда элемент, к которому оно прикреплено, вместе со всеми подэлементами полностью загружен. При использовании с изображениями возникает несколько проблем. Во-первых, он неправильно всплывает по дереву DOM. Вторая проблема заключается в том, что он не является надежным и кроссбраузерным.
 Выгрузка  Событие  запускается, когда пользователь уходит с веб-страницы. Это может произойти из-за того, что пользователь щелкнул ссылку, ввел новый URL-адрес в адресную строку или закрыл окно браузера. Это событие также вызывается перезагрузкой страницы. Обратите внимание, что использование  preventDefault ()  не отменяет событие  unload . Более того, вызовы  alert () ,  confirm ()  и  prompt ()  будут игнорироваться большинством браузеров внутри этого обработчика событий, а это означает, что приведенный ниже код не будет работать:
  $ (окно).unload (function () {
  alert («Пожалуйста, не уходи!»);
});
  
 И  load (), , и  unload ()  устарели, начиная с версии 1.8.
 Событие готовности 
 В большинстве случаев нет необходимости в полной загрузке всех элементов, таких как изображения, перед тем, как скрипт сможет работать без каких-либо проблем. Все, что вам нужно убедиться, это то, что иерархия DOM полностью построена. Событие  ready  позаботится об этом за вас. Любые обработчики, прикрепленные к этому событию, запускаются только после того, как DOM будет готов.Внутри обработчика вы можете без проблем запускать код jQuery или присоединять обработчики событий к другим элементам.
 Демонстрация CodePen ниже загружает изображение с высоким разрешением. Вы заметите, что DOM становится готовым до полной загрузки изображения.
 См. Перо Событие готовности DOM от SitePoint (@SitePoint) на CodePen.
 Если ваш код зависит от значения некоторых свойств стиля CSS, вы должны сначала предоставить ссылку на соответствующие таблицы стилей или встроенные стили перед его запуском.
 События клавиатуры 
 События клавиатуры могут быть вызваны любым взаимодействием пользователя с клавиатурой. Каждое такое событие будет содержать информацию о нажатой клавише и типе события. В jQuery есть три сочетания клавиш для событий клавиатуры -  keydown () ,  keyup ()  и  keypress () .
 События Keyup и Keydown 
 Как следует из названия,  keyup  запускается, когда пользователь отпускает клавишу на клавиатуре, а  keydown  запускается всякий раз, когда пользователь нажимает клавишу на клавиатуре.Обработчики обоих этих событий могут быть прикреплены к любому элементу, но будут запущены только обработчики того элемента, который в данный момент находится в фокусе.
 Рекомендуется использовать свойство  which  объекта  event , чтобы определить, какая клавиша была нажата. Это связано с тем, что браузеры используют разные свойства для хранения этой информации, а jQuery нормализует свойство  which  для надежного извлечения этой информации.
 Еще одна вещь, о которой стоит помнить, это то, что оба эти события не делают различий между  и  и  сдвигом + .В последнем случае и  shift  и  a  регистрируются отдельно. В приведенном ниже коде я представляю пользователю окно предупреждения, которое регистрирует любое событие  keydown . При нажатии клавиши  y  определенный элемент удаляется из DOM.
  $ ("# alert"). Keydown (function (event) {
  switch (event.which) {
    case 89:
    $ ("# элемент"). remove ();
    перемена;
  }
});
  
 См. Перо Событие нажатия клавиши SitePoint (@SitePoint) на CodePen.
 Событие нажатия клавиши 
 Это событие аналогично событию  keydown . Одно из основных различий заключается в том, что клавиши-модификаторы и клавиши без печати, такие как  Shift ,  Esc  и т. Д., Не вызывают событие  keypress . Я не могу это подчеркнуть, когда говорю, что вы не должны использовать событие  keypress  для перехвата специальных нажатий клавиш, таких как клавиши со стрелками.  keypress  используется, когда вы хотите узнать, какой символ был введен, например,  A  или  a .
 Приведенный ниже фрагмент кода скрывает элемент в зависимости от нажатой клавиши:
  $ ("тело"). Keypress (функция (событие) {
  switch (event.keyCode) {
    case 75:
    
    $ (". K"). Css ("дисплей", "нет");
    перемена;
  }
});
  
 См. Перо Событие нажатия клавиши от SitePoint (@SitePoint) на CodePen.
 События мыши 
 События мыши запускаются, когда пользователь взаимодействует с помощью указывающего устройства, например мыши. События могут быть основаны на щелчках, таких как  click ,  dblclick  и  contextmenu , или на движении, например,  mouseenter ,  mouseleave  и  mousemove .В этом разделе я кратко рассмотрю их все и включу несколько демонстраций, чтобы проиллюстрировать незначительные различия между ними.
 События на основе кликов 
 В jQuery определены пять методов событий на основе щелчка. События  mousedown  и  mouseup , как видно из названий, запускаются, когда пользователь нажимает и отпускает кнопку мыши над элементом соответственно. С другой стороны, событие  click  запускается только тогда, когда кнопка мыши одновременно нажата, а затем отпущена над указанным элементом.
  dblclick  немного сложнее. Чтобы событие было зарегистрировано как  dblclick , должно быть выполнено два быстрых щелчка мышью до истечения определенного системно-зависимого временного интервала. Не следует прикреплять обработчики к одному элементу одновременно для  click  и  dblclick , поскольку события, запускаемые при двойном щелчке, зависят от браузера. Некоторые браузеры могут зарегистрировать два события одиночного щелчка перед двойным щелчком, в то время как другие могут просто зарегистрировать одно событие одиночного щелчка перед двойным щелчком.
 Контекстное меню  Событие  запускается после щелчка правой кнопкой по элементу, но непосредственно перед отображением контекстного меню. Это означает, что вы можете предотвратить отображение контекстного меню по умолчанию, используя соответствующий код в обработчике событий.
 Приведенный ниже фрагмент предотвращает отображение контекстного меню по умолчанию при щелчке правой кнопкой мыши и вместо этого отображает настраиваемое меню:
  $ ("img"). Contextmenu (function (event) {
  event.preventDefault ();
  $ ("# настраиваемое-меню")
    .show (). css ({
      вверху: event.pageY + 10,
      слева: event.pageX + 10
      
    });
});

$ ("# custom-menu #option"). click (function () {
   $ ("img"). toggleClass ("имя-класса");
   
});
  
 Эта демонстрация применяет стили CSS к изображению при нажатии и имеет настраиваемое контекстное меню:
 См. Перо Событие contextmenu от SitePoint (@SitePoint) на CodePen.
 События, основанные на движении 
 Некоторые события основаны на перемещении указателя мыши над элементом, внутрь и из элемента.Существует шесть методов событий, основанных на движении.
 Начнем с событий  mouseover  и  mouseenter . Как следует из названия, оба эти события запускаются, когда указатель мыши входит в элемент. Точно так же события  mouseleave  и  mouseout  срабатывают, когда указатель мыши покидает элемент.
 Одно различие между  mouseleave  и  mouseout  состоит в том, что первый запускается, только если указатель мыши перемещается за пределы элемента, к которому он привязан.С другой стороны,  mouseout  запускается даже для перемещений за пределами любых потомков этого элемента. Точно такая же разница существует между  mouseenter  и  mouseover .
 Просмотрите события движения Pen Mouse от SitePoint (@SitePoint) на CodePen.
 Давайте посмотрим, как количество событий  mouseenter  и  mouseover  изменяется в зависимости от движений мыши. Попробуйте войти в большую синюю коробку с правой стороны и остановитесь прямо перед тем, как войти в правую розовую коробку.И  mouseenter , и  mouseover  должны теперь иметь значение 1. Если вы переместитесь влево и войдете в розовое поле, счетчик  mouseover  изменится на два. Это происходит из-за всплытия событий событием  mouseover . Событие  mouseover  на розовом поле «пузырится» до внешнего синего поля, увеличивая счетчик события  mouseover  на 1. Когда вы перемещаетесь дальше влево и останавливаетесь между обоими розовыми полями, событие  mouseover  запускается снова.К тому времени, когда вы дойдете до левого края синего поля, количество событий  mouseover  должно быть 5, а количество событий  mouseenter  должно быть равно 1.
 Точно такие же рассуждения можно применить для объяснения количества событий  mouseleave  и  mouseout . Попробуйте двигаться в другом направлении и посмотрите, как изменится счет.
 События Mousemove и Hover 
 Событие  mousemove  запускается, когда указатель мыши перемещается внутри элемента.Он срабатывает при каждом движении мыши, даже если его размер составляет всего один пиксель. Следовательно, за короткое время могут быть запущены сотни событий. Как вы понимаете, выполнение сложных операций внутри обработчика событий может вызвать задержку браузера. Рекомендуется сделать обработчик событий  mousemove  максимально эффективным и отключить его, когда он больше не нужен.
  hover  срабатывает, только когда указатель мыши входит в элемент или покидает его. Есть два способа вызвать метод  hover .Первый:
  $ ("ваш-селектор"). Hover (handlerIn, handlerOut);
  
 Здесь  handlerIn ()  выполняется, когда указатель мыши входит в элемент, и  handlerOut () , когда указатель мыши покидает его. Второй способ:
  $ ("ваш-селектор"). Hover (handlerInOut);
  
 На этот раз одна и та же функция  handlerInOut  выполняется как при входе в , так и при выходе из элемента .
 См. Перо События наведения и перемещения мыши от SitePoint (@SitePoint) на CodePen.
  Примечание:  В этой демонстрации используются эффекты фильтра CSS, которые не поддерживаются в IE.
 События формы 
 Формы повсеместны в Интернете. Почти каждый пользователь в какой-то момент заполняет форму. В jQuery есть специальные методы, предназначенные для обработки событий формы. Эти события могут запускаться при изменении значения или потере фокуса. Есть семь формальных мероприятий, и мы будем обсуждать их все одно за другим.
 События Blur, Focus, Focusin и Focusout 
 Событие  focus  запускается всякий раз, когда элемент получает фокус.Это применимо только к элементам формы и тегам привязки. Чтобы активировать  focus  на любом другом элементе, вам нужно будет установить свойство  tabindex  элемента. Помните, что установка фокуса на скрытые элементы приведет к ошибке в Internet Explorer. Если вам нужно вызвать событие фокуса без явной установки фокуса, вы можете вызвать метод  triggerHandler ("focus") .
 Размытие  Событие  запускается всякий раз, когда элемент теряет фокус.В старых браузерах это событие применимо только к элементам формы.
 В отличие от события  focus ,  focusin  запускается всякий раз, когда какой-либо элемент или его потомок получает фокус. Точно так же  focusout  запускается всякий раз, когда какой-либо элемент или его потомки теряют фокус. Итак, если вы хотите, чтобы события всплывали, вы должны вместо этого использовать эти два события.
 События выбора, изменения и отправки 
 Изменение  Событие  запускается, когда элемент изменяет значение.Это событие применимо только к элементам   ,
2024 © Все права защищены. Карта сайта