jQuery的toggle

最新推荐文章于 2024-01-04 20:28:55 发布

孤独斗士

最新推荐文章于 2024-01-04 20:28:55 发布

阅读量266

点赞数

分类专栏： web前端文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/gulanga5/article/details/124453469

版权

web前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--引入jq框架-->
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	</head>
	<body>
		
		<input type="text" value="5">
		<input type="button" value="按钮1">
		<input type="button" value="按钮2">
		<input type="button" value="按钮3">
		<input type="button" value="按钮4">
		<div>我是div</div>
	
		<script type="text/javascript">
				let h=$("<h1>我是一级标题</h1>");
				$("body").append(h);
				
				$("input:eq(1)").click(function(){
					$("div").text($("input:first").val());
					
					//删除h1
					//$("h1").remove();	
															
				});
				
				$("input:eq(2)").click(function(){
					$("h1").hide();
				});
				
				$("input:eq(3)").click(function(){
					$("h1").show();
				});
				
				$("input:eq(4)").click(function(){
					$("h1").toggle();//隐藏和现实切换执行
				});
		</script>
	</body>
</html>
<!-- jQuery给元素设置文本
	点击事件
	追加元素
	删除元素
	-->

toggle() 定义和用法

toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换。

该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 show()，如果一个元素是可见的，则运行 hide() - 这会造成一种切换的效果。

注释：隐藏的元素不会被完全显示（不再影响页面的布局）。

提示：该方法可被用于自定义函数之间的切换。
语法
$(selector).toggle(speed,easing,callback)

参数描述
speed 可选。规定隐藏/显示效果的速度。

可能的值：

毫秒
"slow"
"fast"

easing 可选。规定在动画的不同点上元素的速度。默认值为 "swing"。

可能的值：

"swing" - 在开头/结尾移动慢，在中间移动快
"linear" - 匀速移动

提示：扩展插件中提供更多可用的 easing 函数。
callback 可选。toggle() 方法执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

孤独斗士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的toggle

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title>  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> </head> <body> .
复制链接

扫一扫