过滤选择器——可见性过滤选择器
可见性过滤选择器根据元素是否可见的特征获取元素,其详细的说明如表:
选择器 | 功能 | 返回值 |
: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>