可見性偽類選擇器,就是根據元素的“可見”與“不可見”這2種狀態來選取元素。
在jQuery中,可見性偽類選擇器只有2種:
“: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中,可見性偽類選擇器用得比較少,了解一下即可。