jQuery能見度過濾器簡介
網頁中並不是所有元素都是可見的(或顯示出來的)，例如，<script>、<style>，有一些是刻意隱藏起來的，當我們想要找出被隱藏的元素或目前UI上顯示的元素，就可以使用能見度過濾器來進行過濾選擇。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")來替代。
沒有留言:
張貼留言
感謝您的留言，如果我的文章你喜歡或對你有幫助，按個「讚」或「分享」它，我會很高興的。