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 相关文章推荐
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
js实现的map方法示例代码
Jan 13 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
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 函数学习简单小结
2010/07/08 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
PHP中echo和print的区别
2014/08/28 PHP
PHP实现文件下载详解
2014/11/27 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
jQuery中delegate()方法用法实例
2015/01/19 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
Tomcat用户管理的优化配置详解
2022/03/31 Servers