<!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. js 中继承的几种方式

    继承的方式一共有三种: 一.原型继承 通过prototype   来实现继承. function Person(name,age) { this.name=name; this.age=age; } ...

  2. oracle：os认证用户登录测试

        90%的情况下,我们使用的都是数据库认证用户登录oracle,但还存在使用OS认证用户登录oracle的情况: 下面就实验一下OS用户要登录oracle相关操作: 测试环境:oracle10. ...

  3. 获取指定类型如枚举/属性上自定义attribue值

    有时候我们用数字来区分一些类型,如1:中国银行,2:建设银行,3:工商银行,…….这时候我在代码中通常会定义枚举来与定义的一一对应,并在该枚举值上设置特性来表示所代表的含义,这样避免多处写一些数字来标 ...

  4. MongoDb复制集实现故障转移，读写分离

    前言 数据库技术是信息系统的一个核心技术,发展很快,各种功能类型数据库层出不穷,之前工作中使用过关系型数据库(mysql.oracle等).面相对象数据库(db4o).key-value存储(Memc ...

  5. ASP.NET Core：template

    ylbtech-ASP.NET Core: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://yl ...

  6. Native App、Web App 还是Hybrid App？(转)

    一.什么是Native App? Native App即原生应用,即我们一般所称的客户端,是针对不同手机系统单独开发的本地应用,如需使用需要先下载到手机并安装,下载Native App的最常见方法是访 ...

  7. Centos系统真机安装，U盘方式

    下载Centos系统镜像,建议选择Minimal ISO.下载地址:https://www.centos.org/download/ 下载Fedora Media Writer,用来将系统镜像写到U盘 ...

  8. E20170426-gg

    recursive   adj. 回归的,递归的; removal    n. 除去; 搬迁; 免职; 移走; customize vt. 定制,定做; 按规格改制;

  9. Android Fragment使用小结及介绍

    目录(?)[-] 一什么是Fragment 二Fragment的生命周期 三Fragment的两种添加方式addreplace 四两种添加方式性能比较 偶记得第一次接触Fragment,觉得好牛叉的组 ...

  10. hdoj2571【DP基础】

    题意:中文题/ 思路:DP的思想要理解,就是从上一个最优状态使被传到的状态也是最优状态.因为很久没有打DP,所以连简单地这样的都wa了6次:(QAQ废话不多说). 题目要求是从(x,y)到(x,y+1 ...