JQuery中的可見性選擇器是指：選擇器:hidden和:visible。上一篇文章中我們提到了display和visibility的差別，本文結(jié)合可見性選擇器，看一下可見性選擇器選中的究竟是什么樣的元素。

<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下的測試結(jié)果如下：

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

? ?none ? ? ? ? ? ?hidden? ? ? ? ? ? ? ? ? ? ? ? ? 0 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1

? ?block ? ? ? ? ? visible ? ? ? ? ? ? ? ? ? ? ? ? ? 1 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0

? ?block? ? ? ? ? ?hidden? ? ? ? ? ? ? ? ? ? ? ? ? 1 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0

分析上面表格，可以得出結(jié)論：

1.:hidden選擇器?不是指"visibility: hidden"，而是指"display: none"

2.:visible選擇器不是指"visibility: visible"，而是指display屬性不是none。

即可見性選擇器與visibility樣式無關(guān)，只與display相關(guān)。

順便提一下：:hidden選擇器還能夠選中type="hidden"的form元素。

在JQuery中如果我們想顯示/隱藏dom元素，可以使用show()和hide()。現(xiàn)在我們來看下，這2個函數(shù)到底做了什么。我們使用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"));//visiblealert($("#outA").css("display"));//nonealert($("#outB").css("visibility"));//visiblealert($("#outB").css("display"));//block 在outA上調(diào)用了hide()，可以看到：outA的display屬性值從block變成了none，而visibility屬性值保持不變。子元素outB的display和visibility屬性值都不受影響。可以得出下面2個結(jié)論：

1.hide()函數(shù)只是將元素的display屬性設(shè)置成none，visibility屬性不受任何影響。

2.hide()函數(shù)只作用于當(dāng)前選中的元素，不影響子元素的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。可以得出結(jié)論：

1.show()函數(shù)也是只影響display屬性的值，將display還原成元素在hide()之前的值(block或者inline)。
這個其實(shí)很好介紹，也很科學(xué)。畢竟hide()和show()只是用來控制元素的可見性，如果調(diào)用show()就將display屬性設(shè)置暴力的統(tǒng)一設(shè)置成block或inline，那么元素之間的布局關(guān)系很有可能就被破壞了。

代碼3：

$("#outA").hide(); $("#outB").show(); outB元素仍然是不可見的，因?yàn)楦冈豲utA不可見，所以就算outB的display屬性是block，visibility屬性是visible，一樣不可見。

?

?

總結(jié)

以上是生活随笔為你收集整理的JQuery的可见性选择器与show、hide的关系的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。