JQuery入门——事件切换之toggle()方法应用介绍


Posted in Javascript onFebruary 05, 2013

1、在toggle()方法中,可以依次调用N个指定的函数,直到最后一个函数,然后重复对这个函数轮番调用,其语法如下:toggle(fn, fn2, [fn3, fn4,...]),其中fn、fn2、fn3、fn4等函数依次调用。

2、示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>toggle方法</title> 
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
<style type="text/css"> 
body{font-size:13px} 
img{border:solid 1px #ccc;padding:3px} 
</style> 
<script type="text/javascript"> 
$(function(){ 
$("img").toggle(function(){ 
$("img").attr("src","Images/img05.jpg"); 
$("img").attr("title",this.src); 
},function(){ 
$("img").attr("src","Images/img06.jpg"); 
$("img").attr("title",this.src); 
},function(){ 
$("img").attr("src","Images/img07.jpg"); 
$("img").attr("title",this.src); 
} 
) 
}) 
</script> 
</head> <body> 
<img /> 
</body> 
</html>

3、效果图预览

第一次点击:

JQuery入门——事件切换之toggle()方法应用介绍

第二次点击:

JQuery入门——事件切换之toggle()方法应用介绍

Javascript 相关文章推荐
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
JavaScript的public、private和privileged模式
Dec 28 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 #Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 #Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 #Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 #Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 #Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 #Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 #Javascript
You might like
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
Yii全局函数用法示例
2017/01/22 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
js下将字符串当函数执行的方法
2011/07/13 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
微信小程序单选框自定义赋值
2020/05/26 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
python控制台英汉汉英电子词典
2020/04/23 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
使用Python处理BAM的方法
2018/09/28 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
什么是python类属性
2020/06/10 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
物流专业大学生的自我鉴定
2013/11/13 职场文书
英文简历中的自我评价用语
2013/12/09 职场文书
个人简历中自我评价
2014/02/11 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
运动会广播稿200字
2014/10/18 职场文书
中学生检讨书1000字
2014/10/28 职场文书
预备党员入党感想
2015/08/10 职场文书
详解Flask开发技巧之异常处理
2021/06/15 Python
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js