jQuery toggle() 方法与实例以及代替方法。
看《jQeury 权威指南》时看到这个toggle()方法。因为之前在慕课网学习接触过。发现两者讲的有细微的不同
以隐藏/显示目标元素效果为例，慕课网是这样讲解的
$("#clickId").toggle(
function(){$('#divId').hide();}, //方法之间以逗号隔开
function(){$('#divId').show();}
);
点击ID名为clickId的按钮，第一次会执行第一个function来隐藏ID名为divId的块。第二次点击会显示。第三次点击再次执行隐藏，以此类推。
同样一个功能，而《jQeury 权威指南》中是这样讲解用法的。
$("#clickId").click(function() {
$("divId").toggle();
})
使用toggle()的无参数方法来
同样的隐藏/显示目标元素的效果，《jQuery 权威指南》的处理方式显得更加简洁。使用无参方法时，只有2种状态。但是当需要切换2种以上的状态时，就只能使用慕课网的方法了。下面讲解toggle()方法可以实现多函数绑定
<body>
<input id="btntest" type="button" value="点一下我" />
<div>你好，请选择佳丽</div>
<script type="text/javascript">
$(function(){
$("#btntest").toggle(
function(){
$("div").html("1号范冰冰");
},function(){
$("div").html("2号李冰冰");
},function() {
$("div").html("3号杨幂");
},function() {
$("div").html("4号姚晨");
}
)
})
</script>
</body>
以下是运行结果。可见toggle（）方法可以绑定多个函数，使用相当灵活。
toggle有3种调参的方法。上面讲了第一种无参使用方法，下面是第二种
toggle(switch)
switch是布尔类型的 数值是true或者false （若使用布尔值。则无法使用第三种speed参数方法）
var intI = 0;
var blnA = intI > 1; //获取逻辑值false;
$("img").toggle(blnA);
此时的blnA值是false。所以他能将"img"图片隐藏。
第三种是
$(selector).toggle(speed,callback)
speed是触发事件后执行的事件，可能的值：
- 毫秒 （比如 1000 也就是1秒）
- "slow"（0.6秒）
- "normal"（0.4秒）
- "fast"（0.2秒）
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。也就是动画效果了
callback是整个toggle()方法执行完之后触发的事件，和上面的多函数绑定是不同的，一定要设置speed参数才能使用callback参数。
在1.8.2及之前的版本可以使用toggle,但在1.9版本之后就将其删除了（挺好用的，不知道为什么删除了=.=！）
那么就要用手动方式来代替他了，或者使用过渡版本的jQuery，下面是手动方式。
//使用toggle方法时
$('button').click(function(){$("img").toggle();})
//手动实现toggle()方法
$('button').click(function(){
if($("img").is(":hidden")){
$("img").show(); }else{
$("img").hide(); }
})
部分数据参考w3school
http://www.w3school.com.cn/jquery/effect_toggle.asp
jQuery toggle() 方法与实例以及代替方法。的更多相关文章
- 静态工厂方法和实例工厂方法及普通的bean
容纳你的bean bean工厂:最简单的容器,提供了基础的依赖注入支持.创建各种类型的Bean. 应用上下文(ApplicationContext):建立在bean工厂基础之上,提供系统架构服务. ...
- java 反射机制之 getDeclaredMethod（）获取方法，然后invoke执行实例对应的方法
关于反射中getDeclaredMethod().invoke()的学习,来源于项目中的一行代码: SubjectService.class.getDeclaredMethod(autoMatchCo ...
- JQuery 获取json数据$.getJSON方法的实例代码
这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...
- jQuery实例属性和方法
jQuery.fn = jQuery.prototype = { //添加实例属性和方法 jquery : 版本 constructor : 修正指向问题 init() : 初始化和参数 ...
- jQuery中on()方法用法实例详解
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...
- jquery toggle 方法被废除的替代方法
今天使用 toggle 方法的时候,该方法一直不能生效. 原来jquery 的引入文件是1.9,该方法在1.8以上已被废除. 那么简单的切换状态,我们可使用if 语句进行代替 如下: 记录一开始设置隐 ...
- jquery动态加载js三种方法实例
这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\" ...
- jQuery中on()方法用法实例
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...
- jquery toggle()方法 语法
jquery toggle()方法 语法 作用:toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件.该方法也可用于切换被选元素的 hide() 与 sho ...
随机推荐
- SVN服务器搭建（与apache整合）
一．SVN介绍 SVN是一个版本控制工具,Subversion的版本库(repository),就是位于服务器,统一管理和储存数据的地方. 二．SVN数据存储方式 在Subversion中,版本库的数 ...
- 【转】 linux iio子系统
原文网址:http://blog.csdn.net/tsy20100200/article/details/47101661 最近由于工作的需要,接触了Linux iio子系统,对于这个目录其实以前是 ...
- 不允许从数据类型 nvarchar 到 varbinary 的隐式转换
一:错误截图 二:解决 数据库里面的数据类型错了,应该是varchar,而我选了varbinary.太粗心了!
- SANSA 上上洛可可 贾伟作品 高山流水 香炉 香插香台香具 高端商务礼品 黑色【正品 价格 图片 折扣 评论】_尚品网ShangPin.com
SANSA 上上洛可可 贾伟作品 高山流水 香炉 香插香台香具 高端商务礼品 黑色[正品 价格 图片 折扣 评论]_尚品网ShangPin.com
- redis和ehcache
Ehcache在java项目广泛的使用.它是一个开源的.设计于提高在数据从RDBMS中取出来的高花费.高延迟采取的一种缓存方案.正因为Ehcache具有健壮性(基于java开发).被认证(具有apac ...
- maven profile实现多环境打包
快速解决: 项目目录 1.pom文件中添加profile <profiles> <profile> <!-- 本地开发环境 --> <id>dev< ...
- ECLIPSE TOMCAT CONFIG JSTL
{LJ?Dragon}[标题]Eclipse 配置 JSTL标签库 {LJ?Dragon}[Diary]2017年,愉快的开始:当和他们离别时,感觉失去了整个世界......... 1.JSTL简 ...
- NYOJ 491 幸运三角形
幸运三角形 import java.util.Scanner; public class Main{//搜索 static int sum=0,n; public static void main(S ...
- 谋哥：App自推广这个概念就由我来创立了！
［谋哥每天一干货,第六十四篇］ 昨天谋天团新增加了一名90后会员崔崔(微信号cuinianyyyy9),之前请教过我关于怎样从.Net到移动IOS开发然后创业的问题.我说你转到IOS,你须要自己学新语 ...
- Ubuntu 下 JDK+Tomcat+MySql 环境的搭建
Linux环境 修改catalina.sh 在“echo "Using CATALINA_BASE: $CATALINA_BASE"”上面加入以下行: JAVA_OPTS=&quo ...