<!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 on tez配置

    1.Tez简介 Tez是Hontonworks开源的支持DAG作业的计算框架,它可以将多个有依赖的作业转换为一个作业从而大幅提升MapReduce作业的性能.Tez并不直接面向最终用户--事实上它允许 ...

  2. RabbitMQ的Q&A

    默认的IP端口 amqp默认绑定IP(本机所有IP),端口:5672 clustering默认绑定IP(本机所有IP),端口:25672 RabbitMQ Management插件 (本机所有IP), ...

  3. php之code tips

    使用list来实现一次获取explode后的特定段值: list( , $mid) = explode(';', $string); 使用NULL === 来代替is_null: is_null和 N ...

  4. tensorflow入门笔记（二） 滑动平均模型

    tensorflow提供的tf.train.ExponentialMovingAverage 类利用指数衰减维持变量的滑动平均. 当训练模型的时候,保持训练参数的滑动平均是非常有益的.评估时使用取平均 ...

  5. webpack4入门配置

    下面是抄过来的,方便自己翻越 webpack4.x入门配置   1.首先npm install webpack webpack-cli webpack-dev-server -g (mac电脑用超级管 ...

  6. 【PyQt5-Qt Designer】QDoubleSpinBox-小数微调框

    QDoubleSpinBox-小数微调框 总体说明 大部分的总体说明和QSpinBox的差不多(详见:<PyQt5:微调框1>),这里主要把有差别的地方谈一下(三点). QDoubleSp ...

  7. 百度接口test

    https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=Mk2Orf5pqEOXvYR ...

  8. linux find grep tail

    如果在只是想匹配模式的上下几行,grep可以实现. $grep -5 'parttern' inputfile //打印匹配行的前后5行 $grep -C 5 'parttern' inputfile ...

  9. 流程控制之if...else

    # #如果:男的年龄>49,那么:小哥哥## age_of_boy = 50# if age_of_boy > 49:# print('小哥哥你好')### # 如果:女人的年龄>3 ...

  10. 设置 matlab 画图格式

    1:设置 matlab 画图格式 clear;clc; % load("array.mat"); % Bestallarray=array; % rllofcircle(Besta ...