JQuery hover toggle事件使用：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta charset="UTF-8">

<title>b index</title>

<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>

<style type="text/css">

    .s1{

        width: 100px;

        height: 100px;

        background-color: pink;

    }

    .s2{

        width: 50px;

        height: 50px;

        background-color: green;

    }

</style>

</head>

<body style="margin:1px;">

    <div id="div001">div001</div>

    <div id='div002'>div002</div>

    <div id='div003'>div003</div>

    <div>

        <button id="btn001">click me to div003 toggle </button>

        <button id="btn002">click me to div003 toggle(fn1,fn2,fn3) </button>

    </div>

    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript" src="b/js/bootstrap.js"></script>

    <script type="text/javascript" src="js/index038.js"></script>

</body>

</html>
$(function() {

    $('#div001').hover(div001in, div001out);

    // 这种情况下，mouseenter和mouseleave事件都是执行这个div001in函数；

    $('#div002').hover(div001in);

    $('#btn001').click(btn001Click);

    $('#btn002').click(btn002Click);

});

function div001in(e) {

    $(this).addClass('s1');

    console.log(e.target.id + "---" + e.type);

}

function div001out() {

    $(this).removeClass();

}

function btn001Click() {

    $('#div003').toggle();

}

function btn002Click() {

    // 只能传入一个函数，传入两个以上就会报错；可以使用'fast'参数，如果不使用，默认会是slow；

    // 当前效果是显示/隐藏之后执行function函数；

    $('#div003').toggle('fast', function() {

        console.log('fn1');

    });

}

JQuery hover toggle事件使用的更多相关文章

  1. jQuery的toggle事件

    $(function () {    //默认隐藏   $("#SelTime").hide();  $("#SeniorSel").toggle(      ...

  2. jQuery：详解jQuery中的事件（二）

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  3. jQuery学习笔记（三）jQuery中的事件

    目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一．加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...

  4. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  5. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  6. jQuery的常用事件

    1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果 ...

  7. jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  8. 【jQuery基础学习】03 jQuery中的事件与动画

    关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...

  9. 锋利的jQuery读书笔记---jQuery中的事件

    jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...

随机推荐

  1. Linux操作系统入门教程

    http://www.linuxidc.com/Linux/2015-07/120815p8.htm

  2. 基于M9K块配置ROM的LCD12864图片显示实验

    先上传三张图片在说                             由于串口传输速度较慢,故此实验是在“LCD12864 液晶显示-汉字及自定义显示(并口)”基础上进一步修改而来.在写代码之前 ...

  3. ecma6的学习好网站

    http://www.nodeclass.com/api/ECMAScript6.html#function http://es6.ruanyifeng.com/#docs/destructuring ...

  4. CodeForces 605B Lazy Student

    构造.对边的权值排序,权值一样的话,在MST中的边排到前面,否则权值小的排在前面. 然后边一条一条扫过去,如果是1 ,那么连一个点到集合中,如果是0,集合内的边相连. #include<cstd ...

  5. strace 分析 跟踪 进程错误

    strace是什么? 按照strace官网的描述, strace是一个可用于诊断.调试和教学的Linux用户空间跟踪器.我们用它来监控用户空间进程和内核的交互,比如系统调用.信号传递.进程状态变更等. ...

  6. 已经安装了Myeclipse8.5 的情况下，激活myeclipse10.7要注意

    使用下载好的10.7的包里的激活文件和提供的激活方法激活,不成功,在网上搜索了很多方法试过也不成功,最后打开安装目录D:\MyEclipse 10下的myeclipse.ini文件,发现如下内容: . ...

  7. 我对hibernate的对象的3种状态的理解

    老师的说法 Hibernate中对象的状态    在Hibernate使用中,对象的状态有以下三种    a.临时对象 : 在程序中使用new方式创建的对象    b.持久对象 : 在程序中与sess ...

  8. php --with-mysql=mysqlnd

    1.什么是mysqlnd驱动? PHP手册上的描述: MySQL Native Driver is a replacement for the MySQL Client Library (libmys ...

  9. keil mdk中如何确保某一段程序不被优化掉（转）

    源:keil mdk中如何确保某一段程序不被优化掉 使用mdk编程,假如有一个有用的函数你定义了但是没有显式的调用,mdk在默认方式下,将会把这个函数从整个程序总删除掉,以节省ROM. 比如,你在RO ...

  10. JS表单原生验证器

    一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部流行的框架,如bootstrap,由于我负责的模块 仅仅是其中的一部分,因此少数服从多数,无 ...