jquery

最新推荐文章于 2024-06-15 20:48:16 发布

小白小罗

最新推荐文章于 2024-06-15 20:48:16 发布

阅读量122

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_42389705/article/details/102812505

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

显示/隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script src="js/jquery-3.3.1.min.js" type=" text/jscript"></script>
		<script src="js/bootstrap.min.js" type="text/javascript"></script>
		<title></title>
		<script>
			$(document).ready(function(){
				$("#hide").click(function(){
					$("p").hide();
				});
				$("#show").click(function(){
					$("p").show();
				});
			});
		</script>
	</head>
	<body>
		<h2>这是一个Test</h2>
		<p>这是一个段落。</p>
		<p>这是另一个段落。</p>
		<p id="test">这是测试Id</p>
		<p class="cf">这是测试class的字段</p>
		<button id="hide">点我隐藏元素</button>
		<button id="show">点我显示元素</button>
	</body>
</html>

同时显示或隐藏隐藏或显示的时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script src="js/jquery-3.3.1.min.js" type=" text/jscript"></script>
		<script src="js/bootstrap.min.js" type="text/javascript"></script>
		<title></title>
		<script>
			$(document).ready(function(){
				$("#hide").click(function(){
					$("p").hide(1000,"linear",function(){
						alert("hide方法已完成");
					});//1000表示隐藏的速度
				});
				$("#show").click(function(){
					$("p").show();
				});
				$("#toggle").click(function(){
					$("p#xy").toggle();//表示选取 id 为 xy 的 <p> 元素
				});//  隐藏/显示
			});
		</script>
	</head>
	<body>
		<h2>这是一个Test</h2>
		<p>这是一个段落。</p>
		<p>这是另一个段落。</p>
		<p id="test">这是测试Id</p>
		<p class="cf">这是测试class的字段</p>
		<p id="xy">显示或者隐藏</p>
		<button id="hide">点我隐藏元素</button>
		<button id="show">点我显示元素</button>
		<button id="toggle">点我显示或者隐藏元素</button>
		
	</body>
</html>

小白小罗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery

$(document).ready(function()<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.css" /> <link rel="stylesheet" href...
复制链接

扫一扫