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中的学习中为了能使让页面以 ...
随机推荐
- Android学习笔记进阶十三获得本地全部照片
这是Intent的一个用法. 在ActivityAction里面有一个“ACTION_GET_CONTENT”字符串常量,该常量让用户选择特定类型的数据. intent.setType("i ...
- Switchover and Failover说明
SWITCHOVER Switchover是有计划的将primary切换为standby,standby切换为primary.在主库结束生产后,备库应用完所有主库archivelog或者redo lo ...
- HDU3689 Infinite monkey theorem 无限猴子(字符串DP+KMP)
题目描述: 大概的意思就是根据无限猴子定理,无限只猴子坐在打字机旁瞎敲,总有一个能敲出莎士比亚文集.现在给你一个打字机和一只猴子,打字机的每个按钮(共n个)上的字母及猴子按下这个按钮的概率已知,而且猴 ...
- Spring3拦截引发的问题——WEB开发中的client路径
什么是client路径? 第一类.也就是html或js文件等client訪问的文件里的路径,这里包含一些资源文件的引入(js.css还有各种图片等),或是跳转到静态html页面,总之获取的都是静态资源 ...
- 2.Web开发过程流程图
转自:https://blog.csdn.net/hello_simon/article/details/19993343 最近公司在进行一系列新模块的开发,在痛苦开发的过程中,大家不时在一起进行总结 ...
- React render return 空行问题
Uncaught Invariant Violation: App.render(): A valid React element (or null) must be returned. You ma ...
- 【Educational Codeforces Round 33 D】Credit Card
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每次遇到0的时候,看看当前累计的delta是多少. 如果大于0,则temp = d-delta; 小于0,取temp2 = min( ...
- Numpy库进阶教程(一)求解线性方程组
前言 Numpy是一个很强大的python科学计算库.为了机器学习的须要.想深入研究一下Numpy库的使用方法.用这个系列的博客.记录下我的学习过程. 系列: Numpy库进阶教程(二) 正在持续更新 ...
- 从软件project的角度写机器学习3——主要监督学习算法的project性分析
主要机器学习算法的project适用性分析 前段时间AlphaGo跟李世石的大战及相关的深度学习的新闻刷了一遍又一遍的朋友圈.只是这件事情,也仅仅是在机器学习的深度上进一步拓展,而机器学习的广度(也即 ...
- postman--基本使用1
本文转自:http://blog.csdn.net/five3/article/details/53021084 HTTP的接口测试工具有很多,可以进行http请求的方式也有很多,但是可以直接拿来就用 ...