jQuery的可见性筛选选择器有visible和hidden,对应于元素的显示和隐藏状态;为此先要区分display:none和visibility:hidden的区别:
display:none是在文档流中不占据位置,而visibility:hidden占据一定的空间位置;另外,设置了display:none属性的元素的子元素继承了该属性,而visibility:hidden的子元素仍然可以通过设置visibility的值来控制其可见性;
visible:
- 当元素在文档流中占据 位置时,就认为该元素是可见的;脱离了标准文档流的元素也认为是不可见的。因此,display:none是不可见的,visibility:hidden或者opacity=0的元素是可见的;
- 元素的宽和高设置为0是不可见的;
- 具有属性display:none的元素及其子元素;
- width=0并且height=0的元素;
- type=“hidden”的表单元素,这个与我之前想的不太一样;
- opacity=0的元素;
</pre><pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>test for attrs of visible and hidden</title>
<style>
*{margin: 0px;padding: 0px;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div>
<div class="div">
<p id="div1" style="display:none;">display</p>
</div>
<div class="div">
<p id="div2" style="width:0;height:0">width/height</p>
</div>
<div class="div">
<p id="div3" style="visibility:hidden;opacity:0;">visibility</p>
</div>
<form class="div">
<label for="form"><input type="hidden" id="div4" /></label>
</form>
</div>
<p class="show1"></p>
<p class="show2"></p>
<p class="show3"></p>
<p class="show4"></p>
<p class="show5"></p>
<p class="show6"></p>
<p class="show7"></p>
<p class="show8"></p>
<script type="text/javascript">
function show (ele,i) {
var show = ".show"+i;
if (ele instanceof jQuery) {
$(show).html('元素长度 = ' + ele.length);
// i++;
console.log(i);
} else {
alert(ele+' 不是jQuery对象')
}
}
</script>
<script type="text/javascript">
//查找id = div1的DOM元素,是否可见
show($('#div1:visible'),1);
</script>
<script type="text/javascript">
//查找id = div2的DOM元素,是否可见
show($('#div2:visible'),2);
</script>
<script type="text/javascript">
//查找id = div3的DOM元素,是否可见
show($('#div3:visible'),3);
</script>
<script type="text/javascript">
//查找id = div1的DOM元素,是否隐藏
show($('#div1:hidden'),4);
</script>
<script type="text/javascript">
//查找id = div2的DOM元素,是否隐藏
show($('#div2:hidden'),5);
</script>
<script type="text/javascript">
//查找id = div3的DOM元素,是否隐藏
show($('#div3:hidden'),6);
</script>
<script type="text/javascript">
//查找id = div3的DOM元素,是否隐藏
show($('#div4:visible'),7);
</script>
<script type="text/javascript">
//查找id = div3的DOM元素,是否隐藏
show($('#div4:hidden'),8);
</script>
</body>
</html>
测试结果如下: