jQuery事件 - toggle() 方法
定义和用法
toggle() 方法切换元素的可见状态。
如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
语法
$(selector).toggle(speed,callback,switch)
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
2、向Toggle事件绑定两个或更多函数(至少两个)
当指定元素被点击时,在两个或多个函数之间轮流切换。
如果规定了两个以上的函数,则 toggle() 方法将切换所有函数。例如,如果存在三个函数,则第一次点击将调用第一个函数,第二次点击调用第二个函数,第三次点击调用第三个函数。第四次点击再次调用第一个函数,以此类推。
实例
切换不同的背景色:
$("p").toggle(
function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
亲自试一试
语法
$(selector).toggle(function1(),function2(),functionN(),...)
3、切换 Hide() 和 Show()
检查每个元素是否可见。
如果元素已隐藏,则运行 show()。如果元素可见,则元素 hide()。这样就可以创造切换效果。
代码:
$("#btn").toggle(function(){
//控制box隐藏
$("#box").hide();
},function(){
//控制box显示
$("#box").show();
});
4、jQuery hide() 和 show()
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
$("#hide").click(function(){
$("p").hide();
}); $("#show").click(function(){
$("p").show();
});
语法:
$(selector).hide(speed,callback); $(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法:
实例
$("button").click(function(){
$("p").hide(1000);
});
5、jQuery toggle()
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素,并隐藏已显示的元素:
实例
$("button").click(function(){
$("p").toggle();
});
综上,这两种方法实现的效果是一样的:
$("#circle1").toggle(
function(){
$("#show_yes").show(1000);},
function(){
$("#show_yes").hide("fast");}
);
和
$("#circle1").click(function(){
$("#show_yes").toggle(1000);
});
jQuery事件 - toggle() 方法的更多相关文章
- 很实用的jQuery事件 - toggle() 方法
实例 切换不同的背景色: $("p").toggle( function(){ $("body").css("background-color&quo ...
- jquery中交替点击事件toggle方法的使用示例
jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...
- jQuery使用toggle()方法进行显示隐藏
转自:https://www.cnblogs.com/sosoft/p/3460556.html 这是一个示例: 1 <html> 2 <head> 3 <script ...
- 使用jQuery的toggle()方法对HTML标签进行显示、隐藏操作
这是一个示例: <html> <head> <script type="text/javascript" src="https://code ...
- jquery 复合事件 toggle()方法的使用
定义和用法 toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件. 语法: $(selector).toggle(function1(),function2 ...
- jQuery事件绑定方法bind、 live、delegate和on的区别
我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 1.准备知识 当我们在开始的时候,有些知识是必须具备的: 1 ...
- jquery事件使用方法总结
jquery提供了许多的事件处理函数,学习前端一段时间了,下面对其总结一下,梳理一下知识点. 一.鼠标事件 1. click():鼠标单击事件 $div = $("div") $d ...
- jQuery事件委托方法 bind live delegate on
1.bind jquery 1.3之前 定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数 语法: bind(type,[data],function(e)); 特点: a.适合页 ...
- jquery事件使用方法总结 (转)
http://www.cnblogs.com/cwp-bg/p/7668940.html jquery提供了许多的事件处理函数,学习前端一段时间了,下面对其总结一下,梳理一下知识点. 一.鼠标事件 1 ...
随机推荐
- DOMContentLoaded 事件
DOMContentLoaded 事件 字面上看,它会在dom加载完成后触发. 与window.onload事件非常相似,但有一定区别: DOMContentLoaded 事件是在文档完全加载和解析之 ...
- js数组和java数组的区别
1,js数组可以自动扩容,不会出现数组越界的情况 2,js数组中可以存放任意数据类型 3,java数组一旦定义长度,不可以更改 4,java数组中的数据类型必须一致
- 3_01_MSSQL课程_Ado.Net_连接数据库
1. Ado.Net 是一组微软的c#操作数据库的类库. 2.开发人员将界面上的数据(用户的操作和输入的数据)存储到数据库当中.. 3.数据库访问的驱动.即:应用程序和数据库的桥梁. 4.驱动层. S ...
- js 实现复制功能
//复制注册地址 function copyTuiJianAddress() { try { var name = document.getElementById("share") ...
- LibreOJ #6008. 「网络流 24 题」餐巾计划
这道题其实我在刚学 OI 的时候就在一本通上看见过,还记得上面写着"新餐巾一次性买完"之类的话.当时还很稚嫩(现在也是),想了好久,根本想不出来. 学了网络流之后发现这道题的图也是 ...
- Ubuntu16.04深度学习基本环境搭建,tensorflow , keras , pytorch , cuda
Ubuntu16.04深度学习基本环境搭建,tensorflow , keras , pytorch , cuda Ubuntu16.04安装 参考https://blog.csdn.net/flyy ...
- 关于length、length()、size()
length:属性,数组的属性. length(): String的方法,方法体里面是 return value.length; size():集合如list.set.map的方法,返回元素个数.
- @Qualifier
当一个接口,有多个实现类且均已注入到spring容器中了,使用时@AutoWired是byType的,而这些实现类类型都相同,此时就需要使用@Qualifier明确指定使用那个实现类.因此,@Qual ...
- Django 3.0的新功能
谷歌翻译的,我修正并且添加了一些内容.凑合看吧. MariaDB的支持 Django现在正式支持MariaDB 10.1和更高版本.有关更多详细信息,请参见MariaDB注释. ASGI支持 Djan ...
- IDEA报 : Lombok Requires Annotation Processing
Lombok Requires Annotation Processing Annotation processing seems to be disabled for the project &qu ...