JQuery的可见性选择器与show、hide的关系

JQuery中的可见性选择器是指：选择器:hidden和:visible。上一篇文章中我们提到了display和visibility的差别，本文结合可见性选择器，看一下可见性选择器选中的究竟是什么样的元素。

<div id="outB" style="width:400px;height:200; background:#0000ff;display:block;visibility:hidden;"></div>

如果:visible选择器能够选中outB，那么$("#outB:visible").size()的值1；

如果:hidden选择器能够选中outB，那么$("#outB:hidden").size()的值1。

在IE11/FF17/Chrome39下的测试结果如下：

display visibility $("#outB:visible").size() $("#outB:hidden").size()
none visible 0 1

none hidden 0 1

block visible 1 0

block hidden 1 0

分析上面表格，可以得出结论：

1.:hidden选择器 不是指"visibility: hidden"，而是指"display: none"

2.:visible选择器不是指"visibility: visible"，而是指display属性不是none。

即可见性选择器与visibility样式无关，只与display相关。

顺便提一下：:hidden选择器还能够选中type="hidden"的form元素。

在JQuery中如果我们想显示/隐藏dom元素，可以使用show()和hide()。现在我们来看下，这2个函数到底做了什么。我们使用JQuery2.1.1版本，测试下面这段HTML文档。

<div id="outA" style="width:400px; height:400px; background:#CDC9C9;display:block;">
      <div id="outB" style="width:400px;height:200; background:#0000ff;display:block;">
</div>

代码1

  $("#outA").hide();
  alert($("#outA").css("visibility"));//visible
  alert($("#outA").css("display"));//none
  alert($("#outB").css("visibility"));//visible
  alert($("#outB").css("display"));//block

在outA上调用了hide()，可以看到：outA的display属性值从block变成了none，而visibility属性值保持不变。子元素outB的display和visibility属性值都不受影响。可以得出下面2个结论：

1.hide()函数只是将元素的display属性设置成none，visibility属性不受任何影响。

2.hide()函数只作用于当前选中的元素，不影响子元素的display和visibility属性。

代码2：

// 先隐藏outB,再显示outB
$("#outB").hide();
$("#outB").show();
 
// 观察属性值的变化
alert($("#outB").css("visibility"));//visible
alert($("#outB").css("display"));//block

如果B在隐藏之前display属性是block，那么outB元素先hide在show之后，display属性的值是block；如果B在隐藏之前display属性是inline，那么outB元素先hide在show之后，display属性的值是inline。可以得出结论：

1.show()函数也是只影响display属性的值，将display还原成元素在hide()之前的值(block或者inline)。
这个其实很好介绍，也很科学。毕竟hide()和show()只是用来控制元素的可见性，如果调用show()就将display属性设置暴力的统一设置成block或inline，那么元素之间的布局关系很有可能就被破坏了。

代码3：

$("#outA").hide();  
$("#outB").show();

outB元素仍然是不可见的，因为父元素outA不可见，所以就算outB的display属性是block，visibility属性是visible，一样不可见。

参考文章： https://blog.csdn.net/aitangyong/article/details/43275249

JQuery的可见性选择器与show、hide的关系

猜你喜欢