jQuery可见性过滤选择器用法示例

本文实例讲述了jQuery可见性过滤选择器用法。分享给大家供大家参考，具体如下：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><！--引入jQuery --><script src="js/jquery-1.10.1.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="css/style.css" /><script type="text/javascript">//<！[CDATA[$（document）.ready（function（）{$（"#reset"）.click（function（）{window.location.reload（）;}）//给id为mover的元素添加动画.function animateIt（） {$（"#mover"）.slideToggle（"slow", animateIt）;}animateIt（）;//选取所有不可见的元素.包括<input type="hidden"/>.$（"#btn_hidden"）.click（function（）{alert（ "不可见的元素有："+$（"body :hidden"）.length +"个！
"+"其中不可见的div元素有:"+$（"div:hidden"）.length+"个！
"+"其中文本隐藏域有:"+$（"input:hidden"）.length+"个！"）;$（"div:hidden"）.show（3000）.css（"background","#bbffaa"）;}）//选取所有可见的元素.$（"#btn_visible"）.click（function（）{$（"div:visible"）.css（"background","#FF6500"）;}）}）;//]]></script></head><body><h3>可见性过滤选择器.</h3><button id="reset">手动重置页面元素</button><br/><br/><input type="button" value="选取所有可见的div元素." id="btn_visible"/><br/><input type="button" value="选取所有不可见的元素.包括<input type="hidden"/>和<div style="display:none;">." id="btn_hidden"/><br /><br /><div class="one" id="one" > id为one,class为one的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test" > id为two,class为one,title为test的div.<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div> 包含input的type为"hidden"的div<input type="hidden" size="8"/></div><span id="mover">正在执行动画的span元素.</span></body></html>

效果图：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery选择器用法总结》、《jQuery操作DOM节点方法总结》、《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格（table）操作技巧汇总》及《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。