<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         #target {

             border: 1px solid #eee;

             border-radius: 6px;

             padding: 10px;

             transition: all 1s linear;

         }

         #target.over {

             border: 1px solid #aaa;

             box-shadow: 0 0 12px #aaa;

         }

     </style>

 </head>

 <body>

 <h1>补充：使用hover(fn,fn)函数监听mouseover和mouseout两个事件</h1>

 <h3>鼠标悬停在div上方，则突出显示；移出则取消突出显示</h3>

 <div id="target">

     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi neque quae voluptatum ducimus culpa itaque maxime distinctio soluta cum cupiditate esse tenetur deserunt fuga perferendis sed veritatis asperiores. Numquam officia.</p>

 </div>

 <script src="javascript/jquery-1.11.3.js"></script>

 <script>

   //为id为target的元素绑定hover事件，两个处理函数:

   $("#target").hover(

           //相应mouseover，为当前元素添加over类

           function(){$(this).addClass("over")},

           //响应mouseout，为当前元素移除over类

           function(){$(this).removeClass("over")})

 </script>元素

 </body>

 </html>
 jQuery页面加载后执行:

 特殊:$(document).ready(function(){......})

 笔试题:vs DOM:windows.onload=function(){.....}

     ready的底层事件:DOM中的ondocumentcontentloaded

                     只要DOM树加载,js执行完毕就会触发

 而onload:必须等到html,css，js，img全部加载完成才触发

 优化:可将原来在load之后才执行的任务(事件绑定，修改DOM树)，提前ready之后执行，可缩短页面整体加载时间。

 如何使用:$(document).ready(function(){......})

 简化:$().ready(function(){......})

 更简化:$(function(){....})

 其实:只要将script放在body的结尾，就可实现DOM加载后立刻执行。

 一个事件:

 hover：

      其实就是mouseover和mouseout的合体,hover要绑定两个事件处理函数

 如何使用:只要同时相应mouseover和mouseout时，就可简写hover

jQuery-使用hover(fn,fn)函数监听mouseover和mouseout两个事件的更多相关文章

  1. 【转】Android开发20——单个监听器监听多个按钮点击事件

    原文网址:http://woshixy.blog.51cto.com/5637578/1093936 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律 ...

  2. Android手机上监听短信的两种方式

    Android手机上监听短信有两种方式: 1. 接受系统的短信广播,操作短信内容. 优点:操作方便,适合简单的短信应用. 缺点:来信会在状态栏显示通知信息. AndroidManifest.xml: ...

  3. VueApp监听手机物理返回键的事件

    代码 第一步创建js文件夹子 在main里面引用   JS文本内容如下 //监听手机物理返回键的事件 document.addEventListener('plusready', function() ...

  4. jquery实时监听某个文本框的输入事件

    想给页面的的一个文本框添加监听事件 $(function(){ //页面加载完毕后触发事件 $("textarea[name='content']").bind('input pr ...

  5. iview中render函数监听事件

    iview的table中添加datepicker在组件中嵌套组件,如果需要监听子组件的自定义事件,应该使用render中的on:{ 'on-change' () => { console.log ...

  6. jquery tagsinput监听输入、修改、删除事件

    个人博客 地址:http://www.wenhaofan.com/article/20181118192458 由于度娘上的根本搜不到对应的操作,连该插件对应的文档介绍都没有,不得已debug了源码才 ...

  7. 【转】监听按钮除OnClick外其他事件的方法，附简易改编的UIButton类

    http://lib.csdn.net/article/unity3d/38463 作者:IceFantasyLcj 大家好,我是雨中祈雨.一直以来,CSDN都是我最好的编程助手.这是我在CSDN的第 ...

  8. 【转】 NGUI 监听按钮除OnClick外其他事件的方法，附简易改编的UIButton类

    http://blog.csdn.net/icefantasylcj/article/details/49450555 大家好,我是雨中祈雨.一直以来,CSDN都是我最好的编程助手.这是我在CSDN的 ...

  9. 第34天学习打卡（GUI编程之组件和容器 frame panel 布局管理 事件监听 多个按钮共享一个事件 ）

    GUI编程 组件 窗口 弹窗 面板 文本框 列表框 按钮 图片 监听事件 鼠标 键盘事件 破解工具 1 简介 GUi的核心技术:Swing AWT 1.界面不美观 2.需要jre环境 为什么要学习GU ...

随机推荐

  1. 结构体地址 字符串地址 数组地址 辨析 字符char是整型 内存地址

    小结: 1.函数传参中,结构体不同数组,结构体是传值,指针和数组是传地址:2.随声明顺序,指针变量的内存地址从低到高,其他从高到低:3.char c[]字符数组,即数组的一种:char *c字符指针, ...

  2. ORM Active Record Data Mapper

    What's the difference between Active Record and Data Mapper? https://www.culttt.com/2014/06/18/whats ...

  3. python 冷知识

    nohup python robot.py nohup python -u robot.py > robot.log 2>&1 & -u 就是指定实时的日志输出目录,而 & ...

  4. dhttp与IdCookieManager处理登陆过程

    dhttp与IdCookieManager处理登陆过程 我们知道,用IE注册网页(象论坛)时,它能够自动找出相应的Cookie并提交给服务器,从而使用户不用重新登录就能够看到与他自己帐号有关的内容.这 ...

  5. 获取文件后缀名（zip,rar等）

    var filename = file.name; var index1 = filename.lastIndexOf("."); var index2 = filename.le ...

  6. Python开发【异步】：asyncio

    异步asyncio asyncio是一个使用async / await语法编写并发代码的库. asyncio用作多个Python异步框架的基础,这些框架提供高性能的网络和Web服务器,数据库连接库,分 ...

  7. oracle稳定执行计划（更改）的方法

    应用于那些执行计划已经发生了的不好的变更的SQL上(在不改变SQL文本的情况下,改变其执行计划),即便通过创建SQL Profile解决了目标SQL执行计划变更的问题,依然不能保证系统后续执行的SQL ...

  8. echart 设计宽度为百分比时，div撑不开

    解决思路:将百分比换算成px 一句话搞定 ("#chart").css( 'width', $("#chart").width() );$("#cha ...

  9. netstat 查看端口

    -l 仅列出有在监听(listen)的服务状态 -n 拒绝显示别名,能显示数字的全部转化成数字 -p 显示建立相关链接的程序名 -t 仅显示 tcp 相关选项 -u 仅显示 udp 相关选项 -a 显 ...

  10. Java面试总结（面试流程及核心面试题）

    Java面试流程及核心面试题 面试整体流程 1.1 简单的自我介绍      我是xxxx,工作xxx年.我先后在xxxx公司.yyyy公司工作.先后做个xxxx项目.yyyy项目. 1.2 你简单介 ...