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 ...
随机推荐
- HDU 5166 Missing number 简单数论
Missing number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) [ ...
- 转 linux目录介绍
以下用一个表格来罗列linux默认的目录或文件及其用途: 目录/文件 用途 来源 / /处于Linux文件系统树形结构的最顶端,它是Linux文件系统的入口,所有的目录.文件.设备都在/之下. - / ...
- XPath语法
XPath 是XML 的查询语言,和SQL 的角色很类似.以下面XML 为例,介绍XPath 的语法 <?xml version="1.0" encoding="I ...
- android里uri和url的区别
URI :是从虚拟根路径开始的 URI,是uniform resource identifier URL:是整个链接 URI,是uniform resource location uri:file: ...
- CodeForces 614A Link/Cut Tree
#include<cstdio> #include<cstring> #include<cmath> #include<stack> #include& ...
- MulticastSocket绑定端口的问题
该文章由 Binkery 发布于 Binkery技术博客 http://www.binkery.com 如转载请注明出处,该文章的链接地址为 http://www.binkery.com/archiv ...
- linux shell 之if-------用if做判断
综合网络,略有修改, 一 简介 1 字符串判断 str1 = str2 当两个串有相同内容.长度时为真 str1 != str2 当串str1和str2不等时为真 -n str1 当串的长度大于0 ...
- Spring--注入类型--setter
setter注入: package com.bjsxt.service; import com.bjsxt.dao.UserDAO; import com.bjsxt.model.User; publ ...
- 使用USBASP给Arduino烧写bootloader教程
源:使用UsbAsp给UNO烧写bootloader ATMEGA16U2.ATMEGA328P固件烧写教程 arduino板由于操作不发导致固件损坏,或者想更新固件怎么办?今天给大家介绍一下如何使用 ...
- echarts 系列一
由于近期项目需要做地图方便的可视化图标,经过比较最终选定echarts. echarts在可视化视图方面非常强大,可以满足大多数开发需求. 采用标签式引入js文件,引用的js 文件位置 echarts ...