jQuery可見性過濾器
可見性篩選器
可見性篩選器根據元素的可見性和不可見性來選擇對應的元素。
| 濾鏡名稱 | ? ?jQuery 語法 | 說明? ? ? | ##? 回傳? ?|
| ?$(':hidden') | 選取所有不可見元素 | ?集合元素? | |
| ??$(':visible') | 選取所有可見元素 | ?集合元素? ? |
$('p:hidden).size(); //元素p 隱藏的元素
#$('p:visible').size(); //元素p 顯示的元素
注意：:hidden 過濾器一般是包含的內容為：CSS 樣式為display:none、input 表單類型為type="hidden"和visibility:hidden 的元素。
範例
jQuery的可見性選擇器是根據元素的可見和不可見狀態(tài)來選擇相對應的元素。主要有兩個：可見:visible和不可見:hidden。今天我們主要來學習這兩個選擇器的使用。先來看一個HTML結構，方便學習這兩個選擇器的使用：
<div class="wrap"> <span></span> <div></div> <div style="display:none">Hider!</div> <div style="visibility:hidden">Hider!</div> <div class="startHidden">Hider!</div> <div class="startVisibilityHidden">Hider!</div> <div></div> <form> <input type="hidden" /> <input type="hidden" /> <input type="hidden" /> </form> <span></span> <button>顯示隱然元素</button> </div>
CSS?
<style type="text/css">
.wrap {
width: 500px;
padding: 10px;
margin: 20px auto;
border: 1px solid #ccc;
}
.wrap div {
width: 70px;
height: 40px;
background: #0083C1;
margin: 5px;
float: left
}
span {
display: block;
clear: left;
color: #008000;
}
.startHidden {
display: none;
}
.startVisibilityHidden {
visibility: hidden;
}
</style>初步效果
$("span:first").text("Found " + $(":hidden", document.body).length + " hidden elements total.");//在第一個span標籤中增加文本，顯示body中有多少個元素隱藏
$("div:hidden").show(" 3000");//顯示所有隱藏的div元素
$("span:last").text("Found " + $("input:hidden").length + " hidden inputs");//在最後一個span標籤中增加文本，顯示有多少input隱藏
});
##實例：
<script type="text/javascript">
$(document).ready(function(){
? $("div:visible").click(function(e){ //可見DIV元素綁定一個單擊事件
$(this).css("border","2px solid red"); //給可見的DIV元素增加一個2px的紅色邊框
e.stopPropagation( );//停止事件冒泡
? });
? $("button").click(function(e){ //為button綁定一個點選事件
$("div:hidden ").show("fast").css("background","re??d");//隱然的元素顯示出來，並把背景變成紅色
e.stopPropagation();//停止事件冒泡
});
?});
</script>
#功能：
上面第一段程式碼是滑鼠點選可見的DIV元素後，該元素會增加一個2px紅色邊框的樣式，而第二段程式碼是點選按鈕會顯示所有隱藏的元素，並加上紅色背景色。這裡所指的可見元素和我們前面隱藏元素一樣，只是沒有被「display:none」或「.hide()」隱藏的元素。
效果：
#最後再說一點：「：visible」過濾出所有可見元素，但是這裡的可見是指沒有被「display:none」或使用「.hide()「函數隱藏的元素；」：hidden「是選擇所有隱藏元素。同樣，這裡所謂隱藏，不是指」visibility：hidden“，而是指”display:none“或”type="hidden"“的form元素。
有關於jQuery的可見性過濾選擇器就簡單介紹到這裡了，有興趣的朋友可以在本地測試一下，這樣可能加強對他們的理解。
