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 相关文章推荐
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
JavaScript实现优先级队列
Dec 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
PHP 进程锁定问题分析研究
2009/11/24 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
解析Python编程中的包结构
2015/10/25 Python
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
Python多进程同步简单实现代码
2016/04/27 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
python手写均值滤波
2020/02/19 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
进修护士自我鉴定
2013/10/14 职场文书
20年同学聚会感言
2014/02/03 职场文书
党校毕业心得体会
2014/09/13 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript