An example to explain the use of visibility filter selector in jQuery_jquery

Visibility Filter
The visibility filter selects elements based on their visibility and invisibility.

过滤器名	jQuery 语法	说明	返回
:hidden	$(':hidden')	选取所有不可见元素	集合元素
:visible	$(':visible')	选取所有可见元素	集合元素

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

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

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

範例
jQuery的可見性選擇器是根據元素的可見和不可見狀態來選擇相對應的元素。主要有兩個：可見: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 Code:

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

 

初步效果

下面我們分別來看看這兩個選擇器的語法和使用規則以及所起的作用

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

選擇器

 $("E:hidden") //E表示元素标签

  或

 $(":hidden") //选择所有隐藏元素

描述：

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

傳回值：

集合元素

實例：

$(document).ready(function(){
 $("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隐藏
});

功能：

":hidden"選取所有不可見的元素，有的瀏覽器還包含了

內所有標籤，而且這裡所指的不可見元素是樣式為「display:none」和表單「type=" hidden"」兩種，不包含「visibility:hidden」的隱藏元素。另外提醒大家，「:hidden」有的會導致選擇中

內所有標籤,所以建議前面加個元素標籤。

效果：

二、可見性選擇器：:visible

選擇器：

 $("E:visible") //E是指元素标签，选择指定的可见元素标签

  或

 $(":visible")//选择所有可见元素

 

描述：

「E:visible」表示選擇可見的E元素，例如說「$("div:visible")」表示選擇所有可見的div元素，而「$(":visible")」表示選擇所有可見元素

傳回值：

集合元素

實例：

<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","red");//隐然的元素显示出来，并把背景变成红色
 e.stopPropagation();//停止事件冒泡
 });
  });
</script>

功能：

上面第一段程式碼是滑鼠點選可見的DIV元素後，該元素會增加一個2px紅色邊框的樣式，而第二段程式碼是點選按鈕會顯示所有隱藏的元素，並加上紅色背景色。這裡所指的可見元素和我們前面隱藏元素一樣，只是沒有被「display:none」或「.hide()」隱藏的元素。

效果：

最後再說一點：「：visible」過濾出所有可見元素，但是這裡的可見是指沒有被「display:none」或使用「.hide()「函數隱藏的元素；」：hidden「是選擇所有隱藏元素。同樣，這裡所謂隱藏，不是指」visibility：hidden“，而是指”display:none“或”type="hidden"“的form元素。

有關於jQuery的可見性過濾選擇器就簡單介紹到這裡了，有興趣的朋友可以在本地測試一下，這樣可能加強對他們的理解。