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 相关文章推荐
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
bootstrap css样式之表单
Jan 19 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
原生小程序封装跑马灯效果
Oct 21 Javascript
Vue+TypeScript中处理computed方式
Apr 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读取XML值的代码(推荐)
2011/01/01 PHP
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
基于vue.js实现的分页
2018/03/13 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
python实现定制交互式命令行的方法
2014/07/03 Python
django 自定义用户user模型的三种方法
2014/11/18 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
python实现雨滴下落到地面效果
2018/06/21 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
孝老爱亲模范事迹
2014/01/24 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
作风整顿剖析材料
2014/09/30 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript