<!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. Hive中的窗口函数

    简介 本文主要介绍hive中的窗口函数.hive中的窗口函数和sql中的窗口函数相类似,都是用来做一些数据分析类的工作,一般用于olap分析 概念 我们都知道在sql中有一类函数叫做聚合函数,例如su ...

  2. 记录jq控制select 选中状态

    $("#categoryId option[value='"+ data.category_id +"']").attr("selected" ...

  3. Verilog HDL语言实现的单周期CPU设计（全部代码及其注释）

    写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...

  4. [报错]ios开发 failed to read file attributes for

    下载第三方demo,运行报错:   failed to read file attributes for https://stackoverflow.com/questions/46301270/fa ...

  5. HashMap如何做循环遍历

    1.TestCase:

  6. python解析VOC的xml文件并转成自己需要的txt格式

    在进行神经网络训练的时候,自己标注的数据集往往会有数据量不够大以及代表性不强等问题,因此我们会采用开源数据集作为训练,开源数据集往往具有特定的格式,如果我们想将开源数据集为我们所用的话,就需要对其格式 ...

  7. 前端用Json传输数据给后台，用postman测试

    postman发送json格式的post请求   在地址栏里输入请求url:http://127.0.0.1:8081/getmoney 选择“POST”方式, 在“headers”添加key:Con ...

  8. more 命令

    [root@localhost ~]# .txt # 按页显示文件内容,能向下翻页查看

  9. 20171123初学demo爬去网页资料

    一.工具vs2015 +python3.5 import urllib.request import urllib.error import re def getcontent(url,page): ...

  10. kafka6 编写使用自定义分区的生产者

    一 客户端 在上一篇博客创建的简单生产者的基础上,进行两个修改操作: 1.新建SimplePartitioner.java,修改返回分区为1. SimplePartitioner.java代码如下 p ...