KingKong Bruce記事: jQuery - Selectors (7) Visibility Filter

jQuery能見度過濾器簡介

網頁中並不是所有元素都是可見的(或顯示出來的)，例如，<script>、<style>，有一些是刻意隱藏起來的，當我們想要找出被隱藏的元素或目前UI上顯示的元素，就可以使用能見度過濾器來進行過濾選擇。

jQuery能見度過濾器速查表

jQuery能見度過濾器
過濾器	說明	範例
:hidden	選擇所有隱藏的元素	$(':hidden')
:visible	選擇所有可見的元素	$(':visible')

jQuery能見度過濾器範例

:hidden過濾器範例：顯示所有隱藏div元素和計算隱藏input元素

元素被隱藏的的幾個原因：

CSS設定display:none
表單元素的type="hidden"
元素高度與寬度都設置為0
一個直係上層元素(祖或父元素)是隱藏

元素在"visibility: hidden"或"opactiry:0"都被認為是可見的，因為他們仍然占有layout(排版)空間。一個元素在進行動畫(動態效果)期間被隱藏，該元素要直到動畫效果結束才可見。

在jQuery 1.3.2版本中，對如何判斷:hidden做了修改。如果他的一個直係上層元素(祖或父元素)是隱藏且沒有占用layout空間，這個子或孫元素會被認為是隱藏的(上述第四點)。CSS的visibility(能見度屬性)不在考慮內(因此 $(elem).css('visibility','hidden').is(':hidden') == false，我們將elem元素透過CSS的visibility設定為隱藏，但透過is函式判斷是否為隱藏時，會得到false)。詳細資訊請參考jQuery 1.3.2 release notes。

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }
  span { display:block; clear:left; color:red; }
  .starthidden { display:none; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <span></span>
  <div></div>
  <div style="display:none;">Hider!</div>
  <div></div>
  <div class="starthidden">Hider!</div>
  <div></div>
  <form>
    <input type="hidden" />
    <input type="hidden" />
    <input type="hidden" />
  </form>
  <span>
  </span>
<script>
// 注意：在一些瀏覽器中 :hidden 包含 head, title, script … 等
// 1. 由body元素裡找所有隱藏元素，不要包含script元素
var hiddenEls = $("body").find(":hidden").not("script");
// 2. 第一個span元素，寫入一段文字
$("span:first").text("Found " + hiddenEls.length + " hidden elements total.");
// 3. 將所有div元素且隱藏的div元素，顯示出來
$("div:hidden").show(3000);
// 4. 最後一個span元素，寫入一段文字
$("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");
</script>
</body>
</html>

因為:hidden是一個jQuery所延伸方法，並不是CSS規格的一部分，執行:hidden查詢在原生DOM的querySelectorAll()方法中，並不能得到有利的執行效能。要得到更好的效能，使用$("your-pure-css-selector").filter(":hidden")來替代。

:visible過濾器範例：讓所有可見的div元素在點擊時變成黃色

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }
  .starthidden { display:none; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Show hidden to see they don't change</button>
  <div></div>
  <div class="starthidden"></div>
  <div></div>
  <div></div>
  <div style="display:none;"></div>
<script>
// 1. 幫所有可見的div元素加上click事件
$("div:visible").click(function () {
  $(this).css("background", "yellow");
});

// 1. 當點擊網頁上button時，執行…
$("button").click(function () {
  // 2. 顯示所有隱藏的div元素
  $("div:hidden").show("fast");
});
</script>
</body>
</html>

上面範例好玩的地方在於，它只幫一開始顯示在網頁上的div元素加上click事件，雖然事後我們能點擊button將所有div元素都顯示出來，但事後顯示的div元素不會有click事件，當我們點擊時不會有變色效果。

因為:visible是一個jQuery所延伸方法，並不是CSS規格的一部分，執行:visible查詢在原生DOM的querySelectorAll()方法中，並不能得到有利的執行效能。要得到更好的效能，使用$("your-pure-css-selector").filter(":visible")來替代。

KKBruce補充

如果你和我一樣，是從jQuery 1.2.6版或更早的版本學起，注意一下jQuery 1.3.2版本對於:hidden的修改。要注意替代用法，改用.filter(":hidden")或.filter(":visible")來替代，盡量一開始就使用推薦的替代用法。

jQuery基礎選擇器修改歷程

[2011/12/30] 參考 jQuery 1.7 文件翻譯編寫。

Visibility Filters :hidden
Visibility Filters :visible

KingKong Bruce記事

網頁

jQuery - Selectors (7) Visibility Filter - 能見度過濾器