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,一样不可见。

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值