<!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. Hadoop开发环境配置2-eclipse集成maven插件

    1.下载eclipse:eclipse-SDK-4.5-win32-x86_64.zip 下载地址: http://archive.eclipse.org/eclipse/downloads/drop ...

  2. yum下载rpm包

    方法一:downloadonly插件 1.安装插件 yum -y install yum-download  2.下载httpd软件包到当前文件夹内 yum -y install httpd -dow ...

  3. 2016年蓝桥杯省赛A组c++第1题

    /* 某君新认识一网友. 当问及年龄时,他的网友说: “我的年龄是个2位数,我比儿子大27岁, 如果把我的年龄的两位数字交换位置,刚好就是我儿子的年龄” 请你计算:网友的年龄一共有多少种可能情况? 提 ...

  4. iOS开发 - 事件传递响应链

    序言 当我们在使用微信等工具,点击扫一扫,就能打开二维码扫描视图.在我们点击屏幕的时候,iphone OS获取到了用户进行了“单击”这一行为,操作系统把包含这些点击事件的信息包装成UITouch和UI ...

  5. 转：Java 异常结构体系

    原文地址:Java 异常结构体系 保存一份资料 前几天在参加网易和360公司的在线考试的时候,都出了一道关于java中异常类的多项选择题.这几天翻看了相关书籍和网上一些资料,结合自己的理解与思考,将自 ...

  6. 转：mysql where group by having

    原文地址:https://blog.csdn.net/tengdazhang770960436/article/details/6992272 1.where为什么要写在group by之前呢? 因为 ...

  7. 最全的MonkeyRunner自动化测试从入门到精通（1）

    一.环境变量的配置 1.JDK环境变量的配置 步骤一:在官网上面下载jdk,JDK官网网址: http://www.oracle.com/technetwork/java/javase/downloa ...

  8. matlab中的常用函数

    1.将变量a保存到a.txt,每个值中间用tab隔开 dlmwrite('a.txt',a,'\t'); 2.对比两个矩阵是否完全一样 isequal(a,b); %返回logic=1,则完全相同 3 ...

  9. 【数据库】SQL语句解析

    学习网站: http://www.runoob.com/sql/sql-having.html 1. 1.现在我们想要查找总访问量大于 200 的网站. 回取出多条重复的网址的SQL语句: selec ...

  10. Linux中程序开机自启

    Linux中程序开机自启 https://www.itbulu.com/debian-ubuntu-rclocal.html