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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
JQuery 学习笔记 选择器之四
Jul 23 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
JavaScript中数组常见操作技巧
Sep 01 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 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
web方式ftp
2006/10/09 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
php异常处理使用示例
2014/02/25 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
JS打开新窗口的2种方式
2013/04/18 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
python 图片验证码代码分享
2012/07/04 Python
Python迭代器和生成器介绍
2015/03/06 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
Python生成器以及应用实例解析
2018/02/08 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
详解python程序中的多任务
2020/09/16 Python
Python操作Excel的学习笔记
2021/02/18 Python
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
销售员自我评价怎么写
2013/09/19 职场文书
自我鉴定模板
2013/10/29 职场文书
电信营业员岗位职责
2015/04/14 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
作文之亲情600字
2019/09/23 职场文书