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

页面导航:首页 > 网络编程 > JavaScript > JQuery的可见性选择器与show、hide的关系

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

来源: 作者: 时间:2016-02-03 09:20 【

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

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

如果: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文档。


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

Tags:

相关文章

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <