1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <link rel="stylesheet" href="imooc.css" type="text/css">
  8.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  9. </head>
  10.  
  11. <body>
  12.     <h2>可见性筛选选择器</h2>
  13.     <h3>:visible/:hidden</h3>
  14.     <div class="left">
  15.         <div class="div">
  16.             <a>display</a>
  17.             <p id="div1" style="display:none;">display</p>
  18.         </div>
  19.         <div class="div">
  20.             <a>width</a>
  21.             <a>height</a>
  22.             <p id="div2" style="width:0;height:0">width/height</p>
  23.         </div>
  24.         <div class="div">
  25.             <a>visibility</a>
  26.             <a>opacity</a>
  27.             <p id="div3" style="visibility:hidden;opacity:0">visibility</p>
  28.         </div>
  29.     </div>
  30.  
  31.     <p id="show"></p>
  32.     <script type="text/javascript">
  33.         function show (ele) {
  34.             if (ele instanceof jQuery) {
  35.                 $("#show").html('元素的长度的 = ' + ele.length)
  36.             } else {
  37.                 alert(ele+' 不是jQuery对象')
  38.             }
  39.         }
  40.     </script>
  41.  
  42.     <script type="text/javascript">
  43.         //查找id = div1的DOM元素,是否可见
  44.         show( $("#div1:visible") );
  45.     </script>
  46.  
  47.     <script type="text/javascript">
  48.         //查找id = div2的DOM元素,是否可见
  49.         show($("#div2:visible"));
  50.     </script>
  51.  
  52.     <script type="text/javascript">
  53.         //查找id = div3的DOM元素,是否可见
  54.         show($("#div3:visible"));
  55.     </script>
  56.  
  57.     <script type="text/javascript">
  58.         //查找id = div1的DOM元素,是否隐藏
  59.         show($("#div1:hidden"));
  60.     </script>
  61.  
  62.     <script type="text/javascript">
  63.         //查找id = div2的DOM元素,是否隐藏
  64.         show($("#div2:hidden"));
  65.     </script>
  66.  
  67.     <script type="text/javascript">
  68.         //查找id = div3的DOM元素,是否隐藏
  69.         show($("#div3:hidden"));
  70.     </script>
  71.  
  72. </body>
  73.  
  74. </html>
  1. show()函数的意思
  2. function show (ele) {
  3. 			if (ele instanceof jQuery) {//如果是jQuery元素
  4. 				$("#show").append('元素的长度的 = ' + ele.length) // 显示“元素的长度 = （ele的个数）”
  5. 			} else {//如果不是jQuery元素
  6. 				alert(ele+' 不是jQuery对象')
  7. 			}
  8. 		}
  9. 执行结果：元素的长度的 = 0元素的长度的 = 0元素的长度的 = 1元素的长度的 = 1元素的长度的 = 1元素的长度的 = 0
  10. show( $("#div1:visible") ); //div1的CSS display值为none，所以获取不到visible的元素，结果为0
  11. show( $("#div2:visible") ); //div2的宽度和高度都显式设置为0 ，所以获取不到visible的元素，结果为0
  12. show(  $("#div3:visible") ); //div3的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局，结果1
  13. show( $("#div1:hidden") ); // 该元素hidden了，获取到一个hidden元素，结果1
  14. show($("#div2:hidden") ); // 该元素hidden了，获取到一个hidden元素，结果1
  15. show( $("#div3:hidden")); // 该元素是visible的，获取不到hidden元素，结果0

jQuery选择器之可见性选择器的更多相关文章

  1. jQuery选择器之可见性过滤选择器Demo

    测试代码 05-可见性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  2. jQuery选择器之属性选择器Demo

    测试代码: 06-属性选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  3. jQuery选择器之层次选择器Demo

    测试代码: 02-层次选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  4. jQuery选择器之基本选择器Demo

    测试代码: 01-基本选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  5. jQuery选择器之id选择器

    页面的任何操作都需要节点的支撑,开发者如果快速高效的找到指定的节点也是前端开发中的一个重点.jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专 ...

  6. jquery选择器之属性选择器

    [attribute]   匹配指定属性名的所有元素 [attribute=value] 匹配给定的属性名是某个特定值的属性 [attribute!=value] 匹配给定的属性名不是某个特定值的属性 ...

  7. jquery选择器之内容选择器

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. jquery选择器之层级选择器

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. Jquery选择器之基本选择器

    id选择器 共同点: text:代表标签之间的文本值 返回值:均为列表 根据给定的ID值匹配一个标签元素,如果id值中有元字符(如 !"#$%&'()*+,./:;<=> ...

随机推荐

  1. 从零开始徒手撸一个vue的toast弹窗组件

    相信普通的vue组件大家都会写,定义 -> 引入 -> 注册 -> 使用,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): ...

  2. 目录操作（PHP）

    1.创建目录(文件夹)mkdir("./test");2.删除目录(文件夹)只能删除空的文件夹rmdir("./test");3.移动目录(文件夹)rename ...

  3. linux：在vmware上模拟新加一个硬盘对其格式化分区

    在实际情况中,很容易有系统硬盘空间不够,然后需要添加新硬盘情况:这里我用vmware来模拟实验: 一:在一个Linux vmware上创建一个虚拟硬盘   1.打开vmware,选择一个已经搭建好的l ...

  4. CodeForces-668D：Remainders Game （中国剩余定理||理解）

    Today Pari and Arya are playing a game called Remainders. Pari chooses two positive integer x and k, ...

  5. ie7 ie8 使用border模拟圆

    border-radius 属性ie8+才支持,ie7 ie8 下的圆角就可以使用border进行模拟:(移动端都支持) 我们平常使用border-style一般都是solid实线,其他常用的还有da ...

  6. bzoj2616

    树形dp+笛卡尔树+单调栈 这道题跟树形dp有什么关系? 事实上,我们对矩形建立笛卡尔树,先找出最矮的矩形,向两边区间最矮的矩形连边,这样就构成了一棵二叉树,因为只有一个矮的区间会对高的区间造成影响, ...

  7. ios::sync_with_stdio(false);

    取消cin与stdin的同步,加快输入速度

  8. hdoj2859【DP基础】

    /* 看题解A的. 总结:小矩阵--> 大矩阵 dp[i][j]=min(t,dp[i-1][j+1]+1); */ #include <iostream> #include < ...

  9. 黑客攻防技术宝典web实战篇：攻击其他用户习题

    猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 在应用程序的行为中,有什么“明显特征”可用于确定大多数 XSS 漏洞? 用户提交的输入在应 ...

  10. hbase表结构 + hbase集群架构及表存储机制

    本博文的主要内容有    .hbase读取数据过程 .HBase表结构 .附带PPT http://hbase.apache.org/ 读写的时候,就需要用hbase了,换句话说,就是读写的时候.需要 ...