JQuery 可见性过滤器

- 日理万妓 2024-02-17 18:09 55阅读 0赞

**HTML1页面结构:**

<body>
     
    <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>
     
    <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 原本是隐藏的,运行时慢慢显示出来

![Center][]

2) 最终效果是完全显示

![Center 1][]

**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>

JS

<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个

![Center 2][]

2)单击按钮显示隐藏的

![Center 3][]

3)再次单击将显示的全部隐藏

![Center 4][]

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/77a10c92c9cc41c1ae908bcf2c923105.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/02c64c44ffa74e6a8bf90692c809da83.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/612c3aafd95f4b658631dbc6edae5763.png
[Center 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f4d4b6e17c9949a39472a4ac62152a2d.png
[Center 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8b8d41af42b640ca8ee59bb48ed37bed.png

发表评论取消回复

表情：

评论列表（有 0 条评论，55人围观）

还没有评论，来说两句吧...

相关阅读

相关【JQ】Jquery_过滤器（基础-子元素-可见性-内容）

[CSDN话题挑战赛第2期][CSDN_2] 参赛话题：[前端技术分享][Link 1] 分享的本意就是总结并传播知识。这里，大家可以将自己掌握的前端知识总结，分享给大家

刺骨的言语ヽ痛彻心扉/ 2024年04月03日 09:09/ 0 赞/ 79 阅读

相关 Java——》可见性

> 推荐链接： > [总结——》【Java】][Java] > [总结——》【Mysql】][Mysql] > [总结——》【Redis】][Redis] >

淩亂°似流年/ 2024年02月19日 08:59/ 0 赞/ 69 阅读

相关 JQuery 可见性过滤器

HTML1页面结构: <body>  <span></span> <div>1</div> <div sty

- 日理万妓/ 2024年02月17日 18:09/ 0 赞/ 56 阅读

相关原子性与可见性

[http://www.cnblogs.com/mengyan/archive/2012/08/22/2651575.html][http_www.cnblogs.com_m

矫情吗；*/ 2022年09月27日 12:28/ 0 赞/ 356 阅读

相关 jquery可见，不可见，过滤器选择器，hidden，visible，val show。hide

1.1．可见性过滤选择器可见性过滤选择器它匹配display:none或表单中input hidden这样的元素. :Hidden：匹配所有不可见元素，或者t

「爱情、让人受尽委屈。」/ 2022年06月06日 06:24/ 0 赞/ 201 阅读

相关 Volatile可见性

Volatile 使变量在多个线程可见每一个线程都会有一块工作内存区其中，存放着所有线程共享的主内存中的变量值的拷贝当线程执行时在自己的工作区内存中

曾经终败给现在/ 2022年05月14日 02:51/ 0 赞/ 316 阅读

相关 jquery可见性过滤器

一介绍元素的可见状态有两种，分别是隐藏状态和显示状态。可见性过滤器就是利用元素的可见状态匹配元素的。因此，可见性过滤器也有两种，一种是匹配所有可见元素的 :visible

爱被打了一巴掌/ 2022年05月12日 00:36/ 0 赞/ 247 阅读

相关 Scala 可见性

Scala public protected private 作用域 1 Public可见性 2 Protected可见性 3 Private可见性 4 作用域内私

￡神魔★判官ぃ/ 2022年04月15日 06:12/ 0 赞/ 270 阅读

相关 volatile 可见性

> volatile 关键字：当多个线程进行操作共享数据时，可以保证内存中的数据可见。 > 相较于 synchroniz

淩亂°似流年/ 2021年11月05日 12:58/ 0 赞/ 443 阅读

相关 css可见性

overflow：hidden；溢出隐藏 visibility：hidden；隐藏元素，隐藏之后还占据原来的位置 display：none；

水深无声/ 2021年10月24日 04:18/ 0 赞/ 401 阅读