过滤选择器——可见性过滤选择器

可见性过滤选择器根据元素是否可见的特征获取元素,其详细的说明如表:

选择器 功能 返回值
:hidden 获取所有不可见元素,或者type为hidden的元素 元素集合
:visible 获取所有可见的元素 元素集合

说明::hidden选择器所选择的不仅包括样式为display:none所有的元素,而且还包括属性type="hidden"样式为visibility:hidden的所有元素

示例——使用jQuery可见性过滤选择器选择元素

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0
 2 Transitional//EN"
 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head>
 6 <title>使用jQuery层次选择器</title>
 7 <script type="text/javascript" src="../../software/jquerys/jquery-1.7.2.js"></script>
 8 <style type="text/css">
 9     body{font-size:12px;text-align:center}
10     div,span{float:left;border:solid 1px #ccc;
11             margin:8px;width:65px;height:65px}
12     .GetFocus{border:solid 1px #666;background-color:#eee}
13 </style>
14 <script type="text/javascript">
15 
16     $(function(){    // 增加所有可见元素类别
17         //$("span:hidden").show();
18         //$("div:visible").addClass("GetFocus");
19     })/** **/
20     
21     $(function(){    // 增加所有不可见元素类别
22         //$("span:hidden").show().addClass("GetFocus");
23     }) 
24 </script>
25 </head>
26 <body>
27     <span style="display:none">Hidden</span>
28     <div>Visible</div>
29 </body>
30 </html>
Demo

 

posted @ 2014-10-13 11:33  行者无疆Duffy  阅读(368)  评论(0编辑  收藏  举报