jquery 事件监听方法

Posted 2020-10-14 amandaj

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 事件监听方法相关的知识，希望对你有一定的参考价值。

一、事件监听方法

mouseover() 鼠标移入事件方法

mouseout() 鼠标移出事件方法

mouseenter() 鼠标移入事件方法

mouseleave() 鼠标移出事件方法

focus() 获得焦点

blur() 失去焦点

二、hover()方法

【语法1】：

hover(function(){
    鼠标移入执行的代码
},function(){
    鼠标移出执行的代码
});

【语法2】：

hover(function(){
   移入移出两个事件执行的代码
});

参数解释：

1 .hover(参数1,参数2);

2.参数1和参数2是匿名函数function(){}，如果只写一个参数，表示鼠标移入和移出两个事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
     *{
         margin:0;
         padding:0;
     }
     .con{width:400px; margin:100px auto;}
     .con ul{
         list-style: none;
     }
     .con ul li{
         float:left;
         width:100px;
         height:30px;
         position:relative;
     }
     .con ul li a{
         background: #ccc;
         display: block;
         width:100px;
         height:30px;
         color:#fff;
         font-size:12px;
         line-height: 30px;
         text-align:center;
         text-decoration: none;
     }
     .con ul li a:hover{
         background:pink;
     }
     .con ul ul{
         position:absolute;
         top:30px;
         left:0;
         display: none;
     }
    </style>
</head>
<body>
    <div class="con">
        <ul>
            <li>
                <a href="##">项目内容1</a>
                <ul>
                    <li><a href="##">内容内容</a></li>
                    <li><a href="##">内容内容</a></li>
                    <li><a href="##">内容内容</a></li>
                </ul>
            </li>
            <li>
                <a href="##">项目内容2</a>
                <ul>
                    <li><a href="##">内容内容</a></li>
                    <li><a href="##">内容内容</a></li>
                    <li><a href="##">内容内容</a></li>
                </ul>
            </li>
            <li>
                <a href="##">项目内容3</a>
                <ul>
                    <li><a href="##">内容内容</a></li>
                    <li><a href="##">内容内容</a></li>
                    <li><a href="##">内容内容</a></li>
                </ul>
            </li>
            <li>
                <a href="##">项目内容4</a>
                <ul>
                    <li><a href="##">内容内容</a></li>
                    <li><a href="##">内容内容</a></li>
                    <li><a href="##">内容内容</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>
<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// $(‘.con>ul>li‘).hover(function(){
    //鼠标移入，向下滑动显示
//  if($(this).children(‘ul‘).is(":animated")){
//       return;
//         }
//   $(this).children(‘ul‘).slideDown();
// },function(){
    //鼠标移出，向上滑动隐藏
//     $(this).children(‘ul‘).slideUp();
// })

  $(‘.con>ul>li‘).hover(function(){
      $(this).children(‘ul‘).stop(true).slideToggle();
  })


</script>

以上是关于jquery 事件监听方法的主要内容，如果未能解决你的问题，请参考以下文章

JQuery的on()监听方法使用

jquery监听动态添加的input的change事件

为啥我应用jquery框架，对按钮绑定了一个监听事件后，按钮不能执行这个事件

Javascript异步编程方法之------“事件监听”

Android 键盘事件触发以及监听

时间绑定和事件监听！