M

E

N

U

 

 

события мыши

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

click()

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

Показать

Копировать

Выполнить
  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 id="main">
  <div class="a">OK</div>
  <p class="b"></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>
 
 
 

dblclick()

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

Показать

Копировать

Выполнить
  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 id="main">
  <div class="a">OK</div>
  <p class="b"></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 id="main">
  <div class="a">OK</div>
  <p class="b"></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>
 
 
 

hover()

Функция устанавливает обработчики двух событий:
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 id="main">
  <div class="a">OK</div>
  <p class="b"></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 id="main">
  <div class="a">OK</div>
  <p class="b"></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>
 
 
 

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 {
   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 id="box1">
  <label>X : </label>
  <span id="x"></span>
  <br />
  <label>Y : </label>
  <span id="y"></span>
 </div>
 <div id="main"></div>
 <script>
  $(document).ready(function () {
   $('#main').mousemove(function (e) {
    $('#x').text(e.pageX);
    $('#y').text(e.pageY);
   });
  });
 </script>
</body>
</html>