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 相关文章推荐
JS插件overlib用法实例详解
Dec 26 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
Javascript var变量删除原理及实现
Aug 26 Javascript
react ant Design手动设置表单的值操作
Oct 31 Javascript
JS实现公告上线滚动效果
Jan 10 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 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中get_object_vars()方法用法实例
2015/02/08 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
jquery tools之tooltip
2009/07/25 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
layui使用label标签的方法
2019/09/14 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
常用python数据类型转换函数总结
2014/03/11 Python
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
烹调加工管理制度
2014/02/04 职场文书
数学检讨书1000字
2014/02/24 职场文书
教师工作失职检讨书
2014/09/18 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技