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 相关文章推荐
在html页面中包含共享页面的方法
Oct 24 Javascript
js 字符串操作函数
Jul 25 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
JavaScript简单编程实例学习
Feb 14 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 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
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
php集成动态口令认证
2016/07/21 PHP
php 多文件上传的实现实例
2016/10/23 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
js停止输出代码
2008/07/20 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
代码整洁之道(重构)
2018/10/25 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
python套接字流重定向实例汇总
2016/03/03 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
Python循环结构的应用场景详解
2019/07/11 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
python groupby 函数 as_index详解
2019/12/16 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
物业管理专业求职信
2014/06/11 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
python实现批量移动文件
2021/04/05 Python
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
Python中异常处理用法
2021/11/27 Python