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/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
PHP中session变量的销毁
2014/02/27 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
python分析nignx访问日志脚本分享
2015/02/26 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
2015年财务试用期工作总结
2014/12/24 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
创业计划书之服装
2019/10/07 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
Ajax实现异步加载数据
2021/11/17 Javascript
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫
Javascript webpack动态import
2022/04/19 Javascript