<!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. Delphi ActiveForm发布全攻略

    论坛上很多朋友(也包括我)提到ActiveForm的发布问题,都没有得到很好的解决.下面是本人开发ActiveForm的一点经验,拿出来跟大家分享,开发环境为 Win2000Server,IIS5.0 ...

  2. DataContractAttribute.IsReference

    IsReference property in data contract It determines how objects are serialized, by default, IsRefere ...

  3. HDU 1257:最少拦截系统

    最少拦截系统 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  4. hdu 2112 HDU Today 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2112 题目意思:又是求最短路的,不过结合埋字符串来考查. 受之前1004 Let the Balloo ...

  5. NOIP2004题解

    传送门 考查题型 dp 搜索 模拟 数据结构堆 贪心 T1   津津的储蓄计划 题目描述 津津的零花钱一直都是自己管理.每个月的月初妈妈给津津300元钱,津津会预算这个月的花销,并且总能做到实际花销和 ...

  6. bzoj2748音量调节——背包

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2748 怎么会有这样的省选题... 代码如下: #include<iostream> ...

  7. win7Setx修改环境变量

    SETX.exe (Resource Kit, Windows 7) Set environment variables permanently, SETX can be used to set En ...

  8. Linux Bash 提示符的一些骚年操作

    当你在 Linux 环境下打开一个 Shell 终端时,会看到命令行中出现了类似下面的一个 Bash 提示符: 百牛信息技术bainiu.ltd整理发布于博客园[user@$host ~]$1[use ...

  9. Spring 3.1新特性之一:使用Spring Profile和Mybatis进行多个数据源(H2和Mysql)的切换

    最近在做WebMagic的后台,遇到一个问题:后台用到了数据库,本来理想情况下是用Mysql,但是为了做到开箱即用,也整合了一个嵌入式 数据库H2.这里面就有个问题了,如何用一套代码,提供对Mysql ...

  10. MySQL_详细基本操作命令

    mysql 修改新密码:use mysql:update user set password='新密码' where user='用户名':flush privileges:  更新权限 增加新用户: ...