DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> jQuery基礎知識 >> 3.4 可見性偽類選擇器
3.4 可見性偽類選擇器
編輯:jQuery基礎知識     

可見性偽類選擇器,就是根據元素的“可見”與“不可見”這2種狀態來選取元素。

在jQuery中,可見性偽類選擇器只有2種:

jQuery可見性偽類選擇器 選擇器 說明 :hidden 選取所有不可見元素 :visible 選取所有可見元素,與:hidden相反

“:hidden”選擇器選擇的不僅包括樣式為display:none所有元素,而且還包括屬性type="hidden"和樣式為visibility:hidden的所有元素。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<style type="text/css">
        #list *
        {
            display:none;
        }
    </style>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () { 
                $("#list :hidden").css("display", "block");
            })
        })
    </script>
</head>
<body>
    <div id="list">
        <div>(1)HTML</div>
        <p>(2)CSS</p>
        <span>(3)JavaScript</span>
    </div>
    <input id="btn" type="button" value="顯示" />
</body>
</html>

在浏覽器預覽效果如下:

當我們點擊“顯示”按鈕後,在浏覽器預覽效果如下:

分析:

$("#list :hidden")表示選擇id為list元素下的所有“不可見元素”。

 
$("#btn1").click(function () {
    //定義鼠標單擊事件的內容
});

上面代碼中的click()表示元素的鼠標單擊事件。對於鼠標單擊事件,我們之前在JavaScript入門教程(這是jQuery的先修教程),只不過上面這種形式是jQuery的寫法,大家先接觸一下這種寫法,我們在後面教程中會大量接觸到。

在jQuery中,可見性偽類選擇器用得比較少,了解一下即可。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved