jQuery可见性过滤器
2016-12-19 18:58
141 查看
jQuery可见性过滤器
:hidden 隐藏。特指 ,获得:visible 可见(默认)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>05-可见性过滤选择器.html</title> <!-- 引入jQuery --> <script src="../js/jquery-1.8.3.js" type="text/javascript"></script> <script src="script/assist.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript"> $(document).ready(function(){ //<input type="button" value=" 选取所有可见的div元素" id="b1"/> $("#b1").click(function(){ $("div:visible").css("background-color","#f00"); }); //<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/> $("#b2").click(function(){ $("div:hidden").css("background-color","#f00").show(3000);//3000代表用3秒时间显示出来 }); //<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/> $("#b3").click(function(){ //$("input:hidden").css("backgroubnd-color","#f00").show(2000); //alert($("input:hidden").val());//只能打印一个 //方式1: $("input:hidden").each(function(){ alert($(this).val()); }); //方式2: $.each("input:hidden",function(){ alert($(this).val()); }); //方式3: $.each("input:hidden",function(index,donFile){ alert($index+"="+$(domFile.val())); }); }); }); </script> </head> <body> <h3>可见性过滤选择器.</h3> <button id="reset">手动重置页面元素</button> <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label> <br/><br/> <input type="button" value=" 选取所有可见的div元素" id="b1"/> <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/> <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/> <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id< 4000 /span>="b4"/> <br /><br /> <!--文本隐藏域--> <input type="hidden" value="hidden_1"/> <input type="hidden" value="hidden_2"/> <input type="hidden" value="hidden_3"/> <input type="hidden" value="hidden_4"/> <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" 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> <span id="mover">正在执行动画的span元素.</span> </body> </html>
相关文章推荐
- jquery 初步(五) 可见和隐藏过滤器
- 36、实例 jQuery过滤器之可见过滤器
- jQuery中可见性过滤器简单用法示例
- jquery可见,不可见,过滤器选择器,hidden,visible,val show。hide
- Jquery 可见性过滤器选择器
- 前端学习笔记-jquery-11-(过滤选择器)过滤器:可见性过滤器
- jQuery 可见性过滤选择器
- jQuery选择器之可见性过滤选择器Demo
- 前端学习笔记-jquery-12-(过滤选择器)过滤器:子元素过滤器
- jquery 初步(三) 基本过滤器
- jQuery的选择器——可见性过滤选择器
- Jquery 过滤器(first,last,not,even,odd)应用
- JQuery选择器、过滤器大整理
- jquery 判断元素可见性
- jQuery 8 基本过滤器
- jquery表单对象的属性过滤器
- jQuery 选择器和过滤器
- JQuery--过滤器
- jQuery表单对象属性过滤器
- JQuery 选择器 过滤器 其他 总结