jQuery选择器之可见性选择器
<!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选择器之可见性选择器的更多相关文章
- jQuery选择器之可见性过滤选择器Demo
测试代码 05-可见性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- jQuery选择器之属性选择器Demo
测试代码: 06-属性选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- jQuery选择器之层次选择器Demo
测试代码: 02-层次选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- jQuery选择器之基本选择器Demo
测试代码: 01-基本选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- jQuery选择器之id选择器
页面的任何操作都需要节点的支撑,开发者如果快速高效的找到指定的节点也是前端开发中的一个重点.jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专 ...
- jquery选择器之属性选择器
[attribute] 匹配指定属性名的所有元素 [attribute=value] 匹配给定的属性名是某个特定值的属性 [attribute!=value] 匹配给定的属性名不是某个特定值的属性 ...
- jquery选择器之内容选择器
HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- jquery选择器之层级选择器
HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- Jquery选择器之基本选择器
id选择器 共同点: text:代表标签之间的文本值 返回值:均为列表 根据给定的ID值匹配一个标签元素,如果id值中有元字符(如 !"#$%&'()*+,./:;<=> ...
随机推荐
- web中使用svg失量图形及ie8以下浏览器的处理方式
直接上代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...
- YTU 2203: 最小节点(线性表)
2203: 最小节点(线性表) 时间限制: 1 Sec 内存限制: 128 MB 提交: 243 解决: 204 题目描述 (线性表)设有一个由正整数组成的无序(向后)单链表,编写完成下列功能的算 ...
- Go语言的管道Channel用法
本文实例讲述了Go语言的管道Channel用法.分享给大家供大家参考.具体分析如下: channel 是有类型的管道,可以用 channel 操作符 <- 对其发送或者接收值. ch <- ...
- python startswith和endswith
startswith判断文本是否以某个或某几个字符开始; endswith判断文本是否以某个或某几个字符结束; text = 'Happy National Day!' print text.star ...
- Linux查看当前在线用户信息
Linux是多用户系统,支持同时登陆多个用户,在终端中用"w"命令可以查看当前的在线用户,以及每个用户正在执行的进程: 第一行显示的字段信息分别是: 12:16:49:系统当前时间 ...
- Java内存溢出？
内存溢出? https://www.cnblogs.com/crossoverJie/p/9552119.html 前言 OutOfMemoryError 问题相信很多朋友都遇到过,相对于常见的业务异 ...
- 枚举子集 Codeforces306 Div2 B
题目 分析:用二进制法去枚举子集,同时判断满足条件的子集个数加1 #include "iostream" #include "cstdio" using nam ...
- Linux终端那件事儿
我们将会讨论如何更好的控制用户终端:也就说是键盘输入与屏幕输出.除了这些,我们还会了解我们编写的程序如何由用户处读取输入,即使是在输入重定向的情况下,以及确保输出到屏幕的正确位置.这里所提供的一些底层 ...
- 【旧文章搬运】ZwQuerySystemInformation枚举内核模块及简单应用
原文发表于百度空间,2008-10-24========================================================================== 简单说,即 ...
- centos7用lvm扩展xfs文件系统的根分区
centos7中默认使用的是xfs文件系统,此文件系统的特点,可以另外查找资料,这里说一下对文件系统的扩容: 1.先看一下没扩容之前的分区大小 2.添加一块新磁盘,并进行分区.格式化(格式化的时候用m ...