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>

?

初步效果

下面我們分別來(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)簽。

效果：

二、可見(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()”隱藏的元素。

效果：

最后在說(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ì)他們的理解。

總結(jié)

以上是生活随笔為你收集整理的jQuery的选择器——可见性过滤选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。