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

jQuery能見度過濾器簡介

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

jQuery能見度過濾器速查表

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



jQuery能見度過濾器範例

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

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

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

元素在"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 文件翻譯編寫。

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「+1」,我會很高興的。

无觅相关文章插件,迅速提升网站流量