jQuery可见性选择器

最新推荐文章于 2024-09-05 15:53:15 发布

{[("青椒盖饭")]}

最新推荐文章于 2024-09-05 15:53:15 发布

阅读量404

点赞数

分类专栏： javaweb学习笔记

本文链接：https://blog.csdn.net/qq_43386754/article/details/86476235

版权

javaweb学习笔记专栏收录该内容

77 篇文章 0 订阅

订阅专栏

子啊一些页面里面中考虑到页面的显示布局,往往会在一些界面中预留一些层,但是这些层的信息是不会显示出来的,在需要时在显示出来,如果说现在直接使用JavaScript实现此类操作,可以通过两类的形式完成:
- 设置曾层隐藏:div对象,style.display=“none”
- 设置层显示:div对象.style.display=“block”
对于曾而言是可以进行现实或隐藏控制的,那么在jQuery里面为了方便取得隐藏或现实的元素,提供了可见性的选择器


:hidden	取得所有的隐藏元素
:visible	取得所有的显示元素

观察层的显示于隐藏处理
此时可以使用两个动画函数
- 隐藏:hide()
- 显示:show()
不同的浏览器可能不支持该函数,Chrome浏览器可以支持该函数


                                   
<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目</title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
			//将所有div元素设置为隐藏,使用动画hide(),延迟500秒
			$("div").hide(5000);
		})
	</script>
</head>
<body>
	<div>
		<img src="images/gd.jpg"/>
	</div>
</body>
</html>

显示层

<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目</title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
			//设置所有隐藏的div元素,设置显示动画效果
			$("div:hidden").show(5000);
		})
	</script>
</head>
<body>
	<div style="display:none">
		<img src="images/gd.jpg"/>
	</div>
</body>
</html>