快捷導(dǎo)航

舉例講解jQuery中可見(jiàn)性過(guò)濾選擇器的使用

更新時(shí)間：2016年04月18日 17:09:43 作者：大漠

這篇文章主要介紹了jQuery中可見(jiàn)性過(guò)濾選擇器的使用,文中分為不可見(jiàn)性選擇器和可見(jiàn)性選擇器來(lái)分別舉例講解,需要的朋友可以參考下

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

過(guò)濾器名	jQuery 語(yǔ)法	說(shuō)明	返回
:hidden	$(':hidden')	選取所有不可見(jiàn)元素	集合元素
:visible	$(':visible')	選取所有可見(jiàn)元素	集合元素

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

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

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

示例
jQuery的可見(jiàn)性選擇器是根據(jù)元素的可見(jiàn)和不可見(jiàn)狀態(tài)來(lái)選擇相對(duì)應(yīng)的元素。主要有兩個(gè)：可見(jiàn):visible和不可見(jiàn):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 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>

初步效果

2016418170550312.png (537×112)

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

一、不可見(jiàn)性選擇器：:hidden

選擇器

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

或

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

描述：

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

返回值：

集合元素

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

效果：

2016418170632545.png (529×142)

二、可見(jiàn)性選擇器：:visible

選擇器：

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

或者

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

描述：

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

返回值：

集合元素

實(shí)例：

<script type="text/javascript">
 $(document).ready(function(){
   $("div:visible").click(function(e){ //可見(jiàn)DIV元素綁定一個(gè)單擊事件
 $(this).css("border","2px solid red"); //給可見(jiàn)的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)單擊可見(jiàn)的DIV元素后，該元素會(huì)增加一個(gè)2px紅色邊框的樣式，而第二段代碼是單擊按鈕會(huì)顯示所有隱藏的元素，并加上紅色背景色。這里所指的可見(jiàn)元素和我們前面隱藏元素一樣，只是沒(méi)有被“display:none”或“.hide()”隱藏的元素。

效果：

2016418170706043.png (533×110)

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

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

您可能感興趣的文章: