jQuery隐藏与显示

最新推荐文章于 2023-05-23 09:40:00 发布

执~漠

最新推荐文章于 2023-05-23 09:40:00 发布

阅读量256

点赞数 3

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_44116816/article/details/86548624

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

开发工具与关键技术：DW与jQuery
作者：陈锦通
撰写时间：2019年1月19日星期六

第一步：
先来导入jQuery的文件，否则会报错。

<!--<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>-->
<script>
$(".button").click(function(){
		$(".div").hide(3000);
		/*$(".div").show(3000);*/
	});
</script>

结果：
在这里插入图片描述
第二步：
来了解一下要用的两个属性值

show是匹配到显示隐藏的元素。
hide是匹配到隐藏显示的元素。
代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
	.div{
		width:400px;
		height:400px;
		background:#FC0004;
	}	
	.button{
		width:100px;
		height:50px;
		background:#F414D7;
		border:3px solid #00FF5C;
	}
</style>
</head>
<body>
<button class="button">这是按钮</button>
<div class="div"></div>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script><!--导入jQuery文件-->
<script>/*jQuery代码部分*/
	$(".button").click(function(){
		$(".div").hide(3000);/*隐藏显示的元素*/
		/*$(".div").show(3000);*//*显示隐藏的元素*/
		/*hide和show一起用的话结果不变*/
	});
</script>
</body>
</html>