一、事件监听方法

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. Dynamics CRM 365常用js记录。

    var entityname =window.parent.Xrm.Page.data.entity.getEntityName();//获取实体名称 var sampid = window.pare ...

  2. Storm个人学习总结

    https://www.jianshu.com/p/c7fba7d6a24d https://www.cnblogs.com/peak-c/p/6297794.html https://blog.cs ...

  3. C++标准库类模板(stack)和 队列(queue)

    在C++标准库(STL)中有栈和队列的类模板,因此可以直接使用 1.栈(stack):使用栈之前,要先包含头文件 : #include<stack> stack.push(elem); / ...

  4. ubuntu 16.04 屏幕截图

    shift+prtsc   快捷键截取指定区域的图片 类似qq截图

  5. [转] Hive函数大全

    1.内置运算符 1.1关系运算符 运算符 类型 说明 A = B 所有原始类型 如果A与B相等,返回TRUE,否则返回FALSE A == B 无 失败,因为无效的语法. SQL使用”=”,不使用”= ...

  6. ORACLE迁移GP实践

    最近在做oracle到greenplum的迁移实践,步骤如下: 1. 使用ora2pg实现Oracle的数据结构迁移到GP的实现过程 2. Oracle的数据迁移到GP的实现过程   1. ora2p ...

  7. Mongodb cassandra 和 Mysql对比

    MongoDBDB.Cassandra和 Mysql对比 1.为什么是Nosql? 1.1 Nosql在大数据处理相对于关系型数据库具有优势 1.1.1                  1. 低延迟 ...

  8. html的framset使用

    frameset主要用在显示多个页面的需求下: 看代码: <html> <head> <title>html frameset test</title> ...

  9. Orchard源码分析 - 缓存管理

        ICacheManager  &   ICacheHolder              Orchard缓存管理主要通过 ICacheManager 接口对外提供缓存服务. 其实现类D ...

  10. Java - 多线程中的不变性问题

    这篇记录一下保证并发安全性的策略之——不变性. (注意:是Immutable,不是Invariant!) 将一连串行为组织为一个原子操作以保证不变性条件,或者使用同步机制保证可见性,以防止读到失效数据 ...