<!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. day13: 迭代器和生成器

    1,思考所有可以被for循环的:list,tuple,set,dict,range,enumerate,f,str,差不多了,为何这些数据类型可以被for循环呢? 2,一个标准的装饰器函数 from ...

  2. day4:数据结构list

    1,一直输入用户名,输入Q退出,注意用户的输入别忘了加strip,和upper不区分大小写,list最后一位添加append li = [] while 1: name = input("& ...

  3. redis有序集合性能 列表、集合、有序集合

    https://www.cnblogs.com/pirlo21/p/7120935.html 1.1 列表 列表(list)类型是用来存储多个字符串,元素从左到右组成一个有序的集合.列表中的每个字符串 ...

  4. js的序列化和反序列化

    (1)序列化 即js中的Object转化为字符串  1.使用toJSONString var last=obj.toJSONString(); //将JSON对象转化为JSON字符 2.使用strin ...

  5. 转：JSP之include动态包含与静态包含

    原文地址:http://www.cnblogs.com/ygj0930/p/6044676.html JSP中,include是一个经常用到的标签.当应用程序中所有的页面的某些部分(如标题.页脚和导航 ...

  6. monitor

    // ==UserScript== // @name Page Monitor // @namespace http://tampermonkey.net/ // @version 0.1 // @d ...

  7. oracle用户被锁

    使用PLSQL客户端:1.用管理员账户登录PLSQL Developer(登录名可以为system,选择类型的时候把Normal修改为Sysdba).2.左侧选择My Objects,查看Users文 ...

  8. 关于XML文档的xmlns、xmlns:xsi和xsi:schemaLocation

    https://yq.aliyun.com/articles/40353 ************************************* 摘要: 相信很多人和我一样,在编写Spring或者 ...

  9. office excel中怎么添加批注及修改批注用户名

    office excel中怎么添加批注及修改批注用户名 参考:https://jingyan.baidu.com/article/c33e3f48a52853ea15cbb5db.html 1. of ...

  10. MySQL表操作及数据操作

    表操作 表相当于一个文件,其形式与现实中的表格相同.表中的每条记录都有相应的字段,字段就类似于表格的表头. 表操作详细: #对表进行操作(文件) #首先要切换到指定库(即文件夹)下:use db1; ...