过滤选择器——可见性过滤选择器-优快云博客

本文介绍如何利用jQuery实现元素的可见性过滤选择，包括隐藏元素和可见元素的选择，通过实例演示了如何应用这些选择器来改变网页元素的类别。

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

选择器	功能	返回值
: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>