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 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
webpack 处理CSS资源的实现
Sep 27 Javascript
jquery实现聊天机器人
Feb 08 jQuery
详解vue中v-on事件监听指令的基本用法
Jul 22 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仿ZOL分页类代码
2008/10/02 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
PHP文件操作实例总结
2016/09/27 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
numpy自动生成数组详解
2017/12/15 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
python获取整个网页源码的方法
2020/08/03 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
致跳高运动员广播稿
2014/01/13 职场文书
电钳工人个人求职信
2014/05/10 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL