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 相关文章推荐
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
JS面向对象编程之对象使用分析
Aug 19 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
详解webpack打包vue时提取css
May 26 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
JavaScript的function函数详细介绍
Nov 20 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
PHP对字符串的递增运算分析
2010/08/08 PHP
js代码实现微博导航栏
2015/07/30 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
Vue.js常用指令的使用小结
2017/06/23 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
Python中使用SAX解析xml实例
2014/11/21 Python
Python实现把xml或xsl转换为html格式
2015/04/08 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
python实现多层感知器
2019/01/18 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
企业法人授权委托书
2014/04/03 职场文书
政府门卫岗位职责
2014/04/29 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书