jQuery选择器 过滤选择器(三.可见性过滤选择器)
来源:互联网 发布:台湾的网络直播平台17 编辑:程序博客网 时间:2024/05/17 22:29
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquerysource/jquery.js" type="text/javascript"></script> <!-- <link rel="stylesheet" type="text/css" href="../css/style.css"/>--> <style> div,span,p { width:140px; height:140px; margin:5px; background:#aaa; border:#000 1px solid; float:left; font-size:17px; font-family:Verdana; } div.mini { width:55px; height:55px; background-color: #aaa; font-size:12px; } div.hide { display:none; } </style> <script> /* 辅助: 1,自动重置 2,给元素添加动画 */ $(document).ready(function(){ //手动重置页面元素 $("#reset").click(function(){ $("*").removeAttr("style"); $("div[class=none]").css({"display":"none"}); }); //判断是否自动重置 $("input[type=button]").click(function(){ if($("#isreset").is(":checked")){ $("#reset").click(); } }); //给id为mover的元素添加动画. function animateIt() { $("#mover").slideToggle("slow", animateIt); } animateIt(); }) $(function(){ //过滤选择器(一.内容过滤选择器) //1.:hidden;选取所有不可见的元素;$(":hidden")选取所有不可见的元素.包括(input type=hidden),(div style=display:none等元素.如果只想选取input元素使用$("input:hidden") //2.:vidible;选取所有可见的元素;$("div:visible")选取所有可见的div元素 //3.是css的东西 display:none;表示隐藏某个对象; 定义表单的:而type="hidden"表示表单的隐藏域 //display: none;的元素相当于消失,而visibility: hidden;则只表示隐藏,位置还在 $("#btn1").click(function(){ $("div:visible").css("background","#bfa"); }); $("#btn2").click(function(){ $("div:hidden").show(300); }); }); </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="btn1"/><input type="button" value="显示隐藏的div元素" id="btn2"/><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为mini3</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 style="visibility: hidden" class="none"> style的visibility为"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>
1 0
- jQuery选择器 过滤选择器(三.可见性过滤选择器)
- 一步一步学习 JQuery (三) 过滤选择器:基本过滤选择器 && 内容过滤选择器 && 可见性过滤选择器
- JQuery过滤选择器-可见性过滤选择器
- JQuery选择器(7可见性过滤选择器)
- jQuery可见性过滤选择器
- jQuery可见性过滤选择器
- jQuery可见性过滤选择器
- jquery可见性过滤选择器
- jquery可见性过滤选择器
- jQuery可见性过滤选择器
- jquery可见性过滤选择器
- Jquery选择器之可见性选择器、属性过滤选择器
- 基本过滤选择器、可见性过滤选择器
- JQuery选择器(三)过滤选择器
- jQuery(2-5)可见性过滤选择器
- jquery中的可见性过滤选择器
- jQuery的可见性过滤选择器
- 使用jquery可见性过滤选择器
- springMVC注解实现定时任务
- 工作常用软件
- 机器学习的经典教程
- MySQL主从复制原理及基本配置
- Struts2系列笔记(4)---Ation类访问servle
- jQuery选择器 过滤选择器(三.可见性过滤选择器)
- Android屏幕适配
- 从一台机器给另一台机器tomcat发请求,查看各个环节的耗时时间
- 简单实现C中sizeof函数是怎么实现的(面试的时候可能用到)
- PyQt4 信号和槽用法总结
- nginx配置文件参数详解
- LeetCode 33. Search in Rotated Sorted Array
- 编程练习
- 流媒体服务器的搭建