jquery-11 jquery中的事件切换如何实现
jquery-11 jquery中的事件切换如何实现
一、总结
一句话总结：事件切换hover()和toggle()函数。参数两个，都是函数，依次执行两个函数。
1、如何实现单击切换图片？
用toggle()方法，参数为两函数
26 $('img').toggle(
27 function(){
28 this.src='b.png';
29 },
30 function(){
31 this.src='a.png';
32 }
33 );
2、如何实现谋元素鼠标移入和移出执行不同的函数？
用hover()方法
26 $('img').hover(
27 function(){
28 this.src='b.png';
29 },
30 function(){
31 this.src='a.png';
32 }
33 );
3、如何实现某个元素交替执行不同的方法？
用toggle()方法，参数为两函数
26 $('img').toggle(
27 function(){
28 this.src='b.png';
29 },
30 function(){
31 this.src='a.png';
32 }
33 );
二、jquery中的事件切换如何实现
4.事件切换
hover();
toggle();
toggle循环单击
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style>
#div1{
position: absolute;
top:0px;
left:0px;
border-radius:256px;
width:256px;
height:256px;
background: #ccc;
overflow: hidden;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div id="div1">
<img src="a.png">
</div>
</body>
<script>
$('img').toggle(
function(){
this.src='b.png';
},
function(){
this.src='a.png';
}
);
</script>
</html>
循环移入和移出
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style>
#div1{
position: absolute;
top:0px;
left:0px;
border-radius:256px;
width:256px;
height:256px;
background: #ccc;
overflow: hidden;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div id="div1">
<img src="a.png">
</div>
</body>
<script>
$('img').hover(
function(){
this.src='b.png';
},
function(){
this.src='a.png';
}
);
</script>
</html>
jquery-11 jquery中的事件切换如何实现的更多相关文章
- jQuery文本框中的事件应用
jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...
- 使用jQuery在javascript中自定义事件
js中的自定义事件有attachEvent,addEventListener等等好多种,往往受困于浏览器兼容,而且代码写起来也相当麻烦.jQuery为我们解决了这个问题,几行代码就可以很好的实现事件的 ...
- JQuery 在循环中设置事件,最后一个覆盖了前面所有的设置
function setValidation() { for (i = 0; i < alValidations.length; i++) { //alValidations是一 ...
- jQuery中的事件（七）
1. ready(fn), 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数 这个方法纯粹是对向window.load事件注册事件的替代方法.通过使用这个方法,可以在DOM载入就绪能够读取并操纵时 ...
- 第四篇 jQuery中的事件与应用
4.1 事件中的冒泡现象,ready()方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- 四、jquery中的事件与应用
当用户浏览页面时,浏览器会对页面代码进行解释或编译--这个过程实质上是通过时间来驱动的,即页面在加载时,执行一个Load事件,在这个事件中实现浏览器编译页面代码的过程.时间无论在页面元素本身还是在元素 ...
- jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
- Jquery中的事件和动画
在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...
随机推荐
- 构建自己的AngularJS - 作用域和Digest（一）
作用域 第一章 作用域和Digest(一) Angular作用域是简单javascript对象,因此你能够像对其它对象一样加入属性.然而,他们也有一些额外的功能:用于观測数据结构的变化.这样的观察能力 ...
- poj2796
#include <cstdio> /* * source poj.2796 * 题目: * 给定一个非负数的数组 其中value[l,r] = sum(l,r) * min (l,r); ...
- 删除D盘空目录 、检索大于10M的文件
删除D盘空目录 @echo off for %%i in (d:\xx) do ( if exist %%i:\ ( for /f "delims=" %%a in ('dir / ...
- Vue的学习--遇到的一些问题和解决方法
包括: 1.Missing space before function parentheses 2.如何给.vue文件的页面添加css 3.如何给.vue文件页面里的元素添加监听器 4.如何为每一个页 ...
- 字符设备驱动-------Linux异常处理体系结构
裸机中断流程 外部触发 CPU 发生中断, 强制的跳到异常向量处 跳转到具体函数 保存被中断处的现场(各种寄存器的值) 执行中断处理函数,处理具体任务 恢复被中断的现场 Linux处理异常流程 异常发 ...
- Cts框架解析(1)-windows下cts配置
环境搭建 下载 cts工具的下载地址:http://source.android.com/compatibility/downloads.html windows选择Android4.4 R3 Com ...
- 【ASP.NET开发】.NET三层架构简单解析
对于三层架构来说,主要是使用设计模式的思想,对于项目的各个模块实现"高内聚,低耦合"的思想.这里就不做详细的介绍了,如果大家有兴趣,可以阅读软件工程和设计模式相关文章. 对于三层架 ...
- JS 保留2位小数 四舍五入（小数点后面不足2位，自动用0补齐）
function changeTwoDecimal_f(x) { var f_x = parseFloat(x); if (isNaN(f_x)) { alert('function:changeTw ...
- 洛谷——P1096 Hanoi双塔问题
https://www.luogu.org/problem/show?pid=1096 题目描述 给定A.B.C三根足够长的细柱,在A柱上放有2n个中间有孔的圆盘,共有n个不同的尺寸,每个尺寸都有两个 ...
- JS实现动画的四条优化方法
JS实现动画的四条优化方法 1)如果使用的是setTimeout实现的轮询动画,在每一次执行方法之前需要把前面的设置的定时器清除掉 2)为了防止全局变量的污染,我们把定时器的返回值赋值给当前操作元素的 ...