可見性過(guò)濾器
可見性過(guò)濾器根據(jù)元素的可見性和不可見性來(lái)選擇相應(yīng)的元素。

$('p:hidden).size(); //元素p 隱藏的元素

$('p:visible').size(); //元素p 顯示的元素

注意：:hidden 過(guò)濾器一般是包含的內(nèi)容為：CSS 樣式為display:none、input 表單類型為type="hidden"和visibility:hidden 的元素。

示例
jQuery的可見性選擇器是根據(jù)元素的可見和不可見狀態(tài)來(lái)選擇相對(duì)應(yīng)的元素。主要有兩個(gè)：可見:visible和不可見:hidden。今天我們主要來(lái)學(xué)習(xí)這兩個(gè)選擇器的使用。先來(lái)看一個(gè)HTML結(jié)構(gòu)，方便學(xué)習(xí)這兩個(gè)選擇器的使用：

<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>

初步效果

下面我們分別來(lái)看看這兩個(gè)選擇器的語(yǔ)法和使用規(guī)則以及所起的作用

一、不可見性選擇器：:hidden

選擇器

$("E:hidden") //E表示元素標(biāo)簽

  或

$(":hidden") //選擇所有隱藏元素

描述：

E:hidden表示選擇隱藏的E元素，而:hidden表示選取所有不可見的元素

返回值：

集合元素

實(shí)例：

$(document).ready(function(){
$("span:first").text("Found " + $(":hidden",document.body).length + " hidden elements total.");//在第一個(gè)span標(biāo)簽中增加文本，顯示body中有多少個(gè)元素隱藏
$("div:hidden").show("3000");//顯示所有隱藏的div元素
$("span:last").text("Found " + $("input:hidden").length + " hidden inputs");//在最后一個(gè)span標(biāo)簽中增加文本，顯示有多少input隱藏
});

功能：

":hidden"選取所有不可見的元素，有的瀏覽器還包含了<header>內(nèi)所有標(biāo)簽，而且這里所指的不可見元素是樣式為“display:none”和表單“type="hidden"”兩種，而不包含“visibility:hidden”的隱藏元素。另外提醒大家，“:hidden”有的會(huì)導(dǎo)致選擇中<header>內(nèi)所有標(biāo)簽,所以建議前面加個(gè)元素標(biāo)簽。

效果：

二、可見性選擇器：:visible

選擇器：

$("E:visible") //E是指元素標(biāo)簽，選擇指定的可見元素標(biāo)簽

  或者

$(":visible")//選擇所有可見元素

描述：

“E:visible”表示選擇可見的E元素，比如說(shuō)“$("div:visible")”表示選擇所有可見的div元素，而“$(":visible")”表示選擇所有可見元素

返回值：

集合元素

實(shí)例：

<script type="text/javascript">
$(document).ready(function(){
  $("div:visible").click(function(e){ //可見DIV元素綁定一個(gè)單擊事件
$(this).css("border","2px solid red"); //給可見的DIV元素增加一個(gè)2px的紅色邊框
e.stopPropagation();//停止事件冒泡
  });
  $("button").click(function(e){ //給button綁定一個(gè)單擊事件
$("div:hidden").show("fast").css("background","red");//隱然的元素顯示出來(lái)，并把背景變成紅色
e.stopPropagation();//停止事件冒泡
});
 });
</script>

功能：

上面第一段代碼是鼠標(biāo)單擊可見的DIV元素后，該元素會(huì)增加一個(gè)2px紅色邊框的樣式，而第二段代碼是單擊按鈕會(huì)顯示所有隱藏的元素，并加上紅色背景色。這里所指的可見元素和我們前面隱藏元素一樣，只是沒(méi)有被“display:none”或“.hide()”隱藏的元素。

效果：

最后再說(shuō)一點(diǎn)：“：visible”過(guò)濾出所有可見元素，但是這里的可見是指沒(méi)有被“display:none”或者使用“.hide()“函數(shù)隱藏的元素；”：hidden“是選擇所有隱藏元素。同樣，這里所謂隱藏，不是指”visibility：hidden“，而是指”display:none“或”type="hidden"“的form元素。

有關(guān)于jQuery的可見性過(guò)濾選擇器就簡(jiǎn)單介紹到這里了，感興趣的朋友可以在本地測(cè)試一下，這樣可能加強(qiáng)對(duì)他們的理解。