一、事件监听方法

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 事件监听方法的更多相关文章

  1. JavaScript addEventListener()事件监听方法

    addEventListener()方法将事件处理程序附加到指定的元素. addEventListener()方法将事件处理程序附加到元素,而不覆盖现有的事件处理程序. 您可以向一个元素添加许多事件处 ...

  2. Android点击Button按钮的四种事件监听方法总结

    首先我们在activity_main.xml里面先定义一个Button空间 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <RelativeLayout xmlns:a ...

  3. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

  4. jquery easyui控件事件监听委托给jquery事件监听，keyup取最新值问题

    <div id="<?php echo NS; ?>toolbar"> <div style="padding:5px"> ...

  5. jQuery中的事件监听小记

    一,一个事件监听的简便写法 最近发现一个jQuery中事件监听的简洁写法,感觉方便好多.同时也深感自己基础薄弱,好多东西竟然都模棱两可.因此,记录的同时,也对jQuery事件监听做个小的总结 原文链接 ...

  6. 前端基本知识（四）：JS的异步模式：1、回调函数；2、事件监听；3、观察者模式；4、promise对象

    JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列 ...

  7. javascript的事件监听与捕获和冒泡

    在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作. 而js中事件监听方法总共有三种,分别如下所示: element.addEventL ...

  8. Android——按钮的事件监听

    关于Button按钮的四种事件监听方法总结 首先我们在activity_main.xml里面先定义一个Button空间 <RelativeLayout xmlns:android="h ...

  9. JavaScript的事件监听、捕获和冒泡

    在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...

随机推荐

  1. kamctl start

    尽管没有吃饭,胃酸,九点半,,,还是挺高兴的.只截图不说话. 这个问题弄得我好烦啊.几个小时...网罗了国外几个论坛都没有解.我还没有想到这就不是问题,,,多试多试 再看看moni 也没什么意思,就是 ...

  2. 使用webbench工具测试网站访问压力

    介绍 Webbench是一个在Linux下使用的网站压测工具.它使用fork()模拟多个客户端 同时访问我们设定的URL,测试网站在压力下工作的性能, 最多可以模拟3万个并发连接去测试网站的负载能力. ...

  3. vue 路由传参 、接收参数

    传参组件 一. <router-link :to='"/main/course?navName=" +item.columnName + "&id=&quo ...

  4. python 流式游标读取mysql大型数据库

    import asyncio import aiomysql async def dbdaochu(loop): sqlstr='sql' conn = await aiomysql.connect( ...

  5. RealProxy AOP的实现

    微软有一篇实现 一下是对于该实现的理解 https://msdn.microsoft.com/zh-cn/library/dn574804.aspx public class DynamicProxy ...

  6. ztree树的模糊搜索功能

    在做机场项目的时候,业务为一个input框,点击的时候出现一个下拉树,这个下拉树是所有的设备,由于设备太多,加上分了区域,为了更好的用户体验,设计一个模糊搜索的功能,方便用户进行选择 具体实现过程如下 ...

  7. vim实战：插件安装(Vundle，NerdTree)

    一:插件管理器Vundle 1.简介 Vundle是vim的一个插件管理器, 同时它本身也是vim的一个插件.插件管理器用于方便.快速的安装.删除.Vim更新插件.vim Vundle插件官方地址:h ...

  8. JavaScript 函数用途

    在JavaScript中,函数可以:被赋值给一个变量,被赋值为对象的属性.作为参数被传入别的函数.作为函数的结果被返回.用字面量来创建. 1. 赋值给一个变量 //声明一个函数,接受两个参数 func ...

  9. Mongodb定时备份脚本和清除脚本

    Mongodb用的是可以热备份的mongodump和对应恢复的mongorestore,在linux下面使用shell脚本写的定时备份,代码如下 1.定时备份 #!/bin/bash sourcepa ...

  10. Redis介绍与安装

    一.redis简介 (一)什么是redis 1.redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value 内存数据库. 2.特点:读写性能强悍 支持丰 ...