jQuery的選擇器 可見性過濾選擇器

2021-06-18 02:32:10 字數 2147 閱讀 6096

jquery的可見性選擇器是根據元素的可見和不可見狀態來選擇相對應的元素。主要有兩個：可見:visible和不可見:hidden。今天我們主要來學習這兩個選擇器的使用。先來看乙個html結構，方便學習這兩個選擇器的使用：

hider!


hider!


hider!


hider!


顯示隱然元素
css code:

初步效果

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

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

選擇器

$("e:hidden") //e表示元素標籤


或 $(":hidden") //選擇所有隱藏元素
描述：e:hidden表示選擇隱藏的e元素，而:hidden表示選取所有不可見的元素

返回值：

集合元素

例項：

$(document).ready(function());
功能：":hidden"選取所有不可見的元素，有的瀏覽器還包含了內所有標籤，而且這裡所指的不可見元素是樣式為「display:none」和表單「type="hidden"」兩種，而不包含「visibility:hidden」的隱藏元素。另外提醒大家，「:hidden」有的會導致選擇中內所有標籤,所以建議前面加個元素標籤。

效果：

二、可見性選擇器：:visible

選擇器：

$("e:visible") //e是指元素標籤，選擇指定的可見元素標籤


或者$(":visible")//選擇所有可見元素
描述：「e:visible」表示選擇可見的e元素，比如說「$("div:visible")」表示選擇所有可見的div元素，而「$(":visible")」表示選擇所有可見元素

返回值：

集合元素

例項：



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


效果：


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


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


318 


vote up!


html5的reset 和base樣式的結合 | 


css3 text-overflow
 
JQuery選擇器 7可見性過濾選擇器
見性過過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素，詳細如表 可見性過濾選擇器示例 選擇器描述 返回示例 hidden 選取所有不可見的元素 集合元素 div hidden 選取所有不可見的元素 visible 選取所有可見的元素 集合元素 div visible 選取所有可見的元素 可見...


過濾選擇器 可見性過濾選擇器
可見性過濾選擇器根據元素是否可見的特徵獲取元素，其詳細的說明如表 選擇器功能 返回值 hidden 獲取所有不可見元素，或者type為hidden的元素 元素集合 visible 獲取所有可見的元素 元素集合 說明 hidden選擇器所選擇的不僅包括樣式為display none所有的元素，而且還包...


jQuery選擇器 可見性選擇器
可見性選擇器 visible 匹配所有可見元素 hidden 匹配所有不可見元素 說明 可見元素 如果元素佔據文件的空間，元素被認為是可見的 不可見元素 如果元素未佔據文件的空間，元素被認為是不可見的 注意 元素的visibility hidden或 opacity 0 被認為是可見，因為元素即使具...