JQuery 可见性过滤器

最新推荐文章于 2022-08-12 23:49:39 发布

原创最新推荐文章于 2022-08-12 23:49:39 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

JQuery 专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何使用jQuery选择并操作HTML页面中的隐藏元素，包括显示隐藏的div和输入框，以及通过按钮点击事件实现div的显示与隐藏切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML1页面结构:

<body>
<!--文本显示1--> 
<span></span>
<div>1</div>
<div style="display:none;">2-hidden</div>
<div>3</div>
<div class="starthidden">4-hidden</div>
<div>5</div>
<form name="frm">
  <input type="hidden"/>
  <input type="hidden"/>
  <input type="hidden"/>
  <input type="hidden"/>
</form>
<!--文本显示2--> 
<span></span>
</body>

CSS样式

<style>
/*  层的大小,背景色,左浮动,外边距5px,内边距5px,边框 */
div {
	width:75px;
	height:40px;
	background: #99F;
	margin:5px;
	float:left;
	border:2px solid gray;
	padding:5px;
}
/* 行级元素转成块级元素,清除左浮动,字体颜色为蓝色 */
span {
	display:block;
	clear:left;
	color:blue;
}
/* 隐藏 */
.starthidden {
	display:none;
}
</style>

JQuery

<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<script type="text/javascript">
  $(function(){
	 //查找:hidden 匹配所有不可见元素，或者type为hidden的元素
	var hiddE = $("body").find(":hidden");
	
	$("span:first").text("总共找到 " + hiddE.length + "个隐藏的!");
	 //显示隐藏的匹配元素。3000毫秒 show( speed, [callback] )' 
	$("div:hidden").show(3000);
	
	$("span:last").text("找到 " + $("input:hidden").length + "隐藏的输入框!");
});
</script>

效果

1) 2-hidden; 4-hidden 原本是隐藏的,运行时慢慢显示出来

2) 最终效果是完全显示

HTML2页面结构:

<button>隐藏<->显示</button><p/>
<div>1</div>
<div style="display:none;">2h</div>
<div>3</div>
<div>4</div>
<div style="display:none;">5h</div>

CSS样式

<style>
div {
	width:50px;
	height:40px;
	margin:5px;
	border:5px outset gray;
	float:left;
	background:#39F;
}

</style>

<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
  $(function(){
	 //显示/隐藏
	$("button").toggle(
	function(){
	  $("div:hidden").show("3000");
	},
	function(){
	  $("div:visible").hide("2000");
	}
	
	);
});
</script>

效果

1)隐藏2个