JQuery hover toggle事件使用
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事件使用的更多相关文章
- jQuery的toggle事件
$(function () { //默认隐藏 $("#SelTime").hide(); $("#SeniorSel").toggle( ...
- jQuery：详解jQuery中的事件（二）
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- jQuery学习笔记（三）jQuery中的事件
目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一．加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...
- jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
- Jquery中的事件和动画
在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...
- jQuery的常用事件
1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果 ...
- jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
- 【jQuery基础学习】03 jQuery中的事件与动画
关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...
- 锋利的jQuery读书笔记---jQuery中的事件
jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...
随机推荐
- 16级第一周寒假作业F题
Subsequence TimeLimit:1000MS MemoryLimit:65536K 64-bit integer IO format:%lld Problem Description A ...
- CentOS 7 安装 GlusterFS
CentOS 7 GlusterFS 环境说明: 3台机器安装 GlusterFS 组成一个集群. 使用 docker volume plugin GlusterFS 服务器: 10.6.0.140 ...
- phpstorm 格式化代码方法
hpstorm 代码格式化方法: 快捷键:Ctrl + Alt + L 设置代码样式:File -> Settings -> Code Style ->PHP 根据个人php代码规范 ...
- IMapControl3 Interface（1） Properties属性
IMapControl3 Interface Provides access to members that control the MapControl. Note: the IMapControl ...
- ionic常用命令记录
npm install -g ionic //安装ionic ionic lib update //更新www/lib/ionic 目录的文件,如有项目中有bower,此命令会运行bower upda ...
- CodeForces 620C Pearls in a Row
水题,每当出现重复就分割开来,最后留下的尾巴给最后一段 #include<cstdio> #include<cstring> #include<cmath> #in ...
- 关于集合set ---STL
关于集合set的去重复,向集合中插入元素 #include<iostream>#include<set>using namespace std;int main(){ set& ...
- Nginx架构解析
Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. daemon守护线程 nginx在启动后 ...
- MYSQL一次性能优化实战经历[转]
每次经历数据库性能调优,都是对性能优化的再次认识.对自己知识不足的有力验证,只有不断总结.学习才能少走弯路. 一.性能问题描述 应用端反应系统查询缓慢,长时间出不来结果.SQLServer数据库服务器 ...
- linux下配置ip地址四种方法(图文)
(1)Ifconfig命令 第一种使用ifconfig命令配置网卡的ip地址.此命令通常用来零时的测试用,计算机启动后 ip地址的配置将自动失效.具体用法如下.Ipconfig ethx i ...