<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <link rel="stylesheet" href="imooc.css" type="text/css">

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>

<body>

    <h2>可见性筛选选择器</h2>

    <h3>:visible/:hidden</h3>

    <div class="left">

        <div class="div">

            <a>display</a>

            <p id="div1" style="display:none;">display</p>

        </div>

        <div class="div">

            <a>width</a>

            <a>height</a>

            <p id="div2" style="width:0;height:0">width/height</p>

        </div>

        <div class="div">

            <a>visibility</a>

            <a>opacity</a>

            <p id="div3" style="visibility:hidden;opacity:0">visibility</p>

        </div>

    </div>

    <p id="show"></p>

    <script type="text/javascript">

        function show (ele) {

            if (ele instanceof jQuery) {

                $("#show").html('元素的长度的 = ' + ele.length)

            } else {

                alert(ele+' 不是jQuery对象')

            }

        }

    </script>

    <script type="text/javascript">

        //查找id = div1的DOM元素,是否可见

        show( $("#div1:visible") );

    </script>

    <script type="text/javascript">

        //查找id = div2的DOM元素,是否可见

        show($("#div2:visible"));

    </script>

    <script type="text/javascript">

        //查找id = div3的DOM元素,是否可见

        show($("#div3:visible"));

    </script>

    <script type="text/javascript">

        //查找id = div1的DOM元素,是否隐藏

        show($("#div1:hidden"));

    </script>

    <script type="text/javascript">

        //查找id = div2的DOM元素,是否隐藏

        show($("#div2:hidden"));

    </script>

    <script type="text/javascript">

        //查找id = div3的DOM元素,是否隐藏

        show($("#div3:hidden"));

    </script>

</body>

</html>
show()函数的意思

function show (ele) {

			if (ele instanceof jQuery) {//如果是jQuery元素

				$("#show").append('元素的长度的 = ' + ele.length) // 显示“元素的长度 = （ele的个数）”

			} else {//如果不是jQuery元素

				alert(ele+' 不是jQuery对象')

			}

		}

执行结果：元素的长度的 = 0元素的长度的 = 0元素的长度的 = 1元素的长度的 = 1元素的长度的 = 1元素的长度的 = 0

show( $("#div1:visible") ); //div1的CSS display值为none，所以获取不到visible的元素，结果为0

show( $("#div2:visible") ); //div2的宽度和高度都显式设置为0 ，所以获取不到visible的元素，结果为0

show(  $("#div3:visible") ); //div3的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局，结果1

show( $("#div1:hidden") ); // 该元素hidden了，获取到一个hidden元素，结果1

show($("#div2:hidden") ); // 该元素hidden了，获取到一个hidden元素，结果1

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. REST的本质，就是用户操作某个网络资源（具有独一无二的识别符URI），获得某种服务，也就是动词+资源（都是HTTP协议的一部分）

    REST的名称”表现状态转化”中,省略了主语.”表现”其实指的是资源的表现. 资源就是网络上的一个数据实体,或者说是一个具体信息.它可以是一段文本.一张图片.一首歌曲.一种服务.你可以用一个URI(统 ...

  2. kbmMemTable关于内存表的使用，以及各种三层框架的评价

    关于内存表的使用(kbmMemTable) 关于内存表的使用说明一. Delphi使用内存表1.1 Delphi创建内存表步骤:1． 创建一个Ttable实例.2． 设置一个DataBaseName为 ...

  3. Why you shouldn’t connect your mobile application to a database

    BY CRAIG CHAPMAN · PUBLISHED 2015-07-02 · UPDATED 2015-07-02   Working at Embarcadero, I frequently ...

  4. python数据分组运算

    摘要: pandas 的 GroupBy 功能可以方便地对数据进行分组.应用函数.转换和聚合等操作.   # 原作者:lionets GroupBy 分组运算有时也被称为 “split-apply-c ...

  5. 一步一步学Silverlight 2系列（11）：数据绑定

    概念 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  6. I.MX6 Android busybox 从哪里生成的

    /**************************************************************************** * I.MX6 Android busybo ...

  7. 「HNSDFZ暑期集训 测试1」「LuoguT36488」 连连看

    题目描述 给定一个n × m的矩形地图,每个各自上可能为空,可能有牌,牌上有一个数字. 对于两张同样数字的牌,如果我们可以在地图上用不超过三根水平或竖直,在地图界内,且不经过其他牌的线段将两张牌连起来 ...

  8. scp.sh

    #!/bin/sh #Auto change server files #liudong 2016-3-21 if [ ! -f ip.txt ];then echo -e "\033[31 ...

  9. UI：多线程 、用GCD创建线程

    什么是应用(程序):就是我们编写的代码编译后生成的app文件 进程:凡是一个运行的程序都可以看作为一个进程,如打开的多个 word,就可以认为是一个进程的多个线程. 线程:至少有一个线程就是主线程,网 ...

  10. Linux2.6 内核中结构体初始化（转载）

    转自:http://hnniyan123.blog.chinaunix.net/uid-29917301-id-4989879.html 在Linux2.6版本的内核中,我们经常可以看到下面的结构体的 ...