jQuery--内容过滤和可见性过滤
一.内容过滤
1.内容过滤选择器介绍
- :empty 当前元素是否为空（是否有标签体）
- :contains(text) 标签体是否含有指定的文本
- :has(...) 当前元素是否含有指定的子元素
- :parent 当前元素是否是父元素
2.代码实例
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>04-内容过滤选择器.html</title>
6 <!-- 引入jQuery -->
7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
8 <script src="./script/assist.js" type="text/javascript"></script>
9 <link rel="stylesheet" type="text/css" href="./css/style.css" />
10 <script type="text/javascript">
11 $(function(){
12 // <input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
13 $("#btn1").on("click",function(){
14 $("div:contains('di')").css("background-color","red");
15 });
16 // <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
17 $("#btn2").on("click",function(){
18 $("div:empty").css("background-color","red");
19 });
20 // <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
21 $("#btn3").on("click",function(){
22 $("div:has('.mini')").css("background-color","red");
23 });
24 // <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
25 $("#btn4").on("click",function(){
26 $("div:parent").css("background-color","red");
27 });
28 });
29 </script>
30 </head>
31 <body>
32 <h3>内容过滤选择器.</h3>
33 <button id="reset">手动重置页面元素</button>
34 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
35
36 <input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
37 <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
38 <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
39 <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
40
41
42 <br /><br />
43
44 <!-- 测试的元素 -->
45 <div class="one" id="one" >
46 id为one,class为one的div
47 <div class="mini">class为mini</div>
48 </div>
49
50 <div class="one" id="two" title="test" >
51 id为two,class为one,title为test的div.
52 <div class="mini" title="other">class为mini,title为other</div>
53 <div class="mini" title="test">class为mini,title为test</div>
54 </div>
55
56 <div class="one">
57 <div class="mini">class为mini</div>
58 <div class="mini">class为mini</div>
59 <div class="mini">class为mini</div>
60 <div class="mini"></div>
61 </div>
62
63
64
65 <div class="one">
66 <div class="mini">class为mini</div>
67 <div class="mini">class为mini</div>
68 <div class="mini">class为mini</div>
69 <div class="mini" title="tesst">class为mini,title为tesst</div>
70 </div>
71
72
73 <div style="display:none;" class="none">style的display为"none"的div</div>
74
75 <div class="hide">class为"hide"的div</div>
76
77 <div>
78 包含input的type为"hidden"的div<input type="hidden" size="8"/>
79 </div>
80
81
82 <span id="mover">正在执行动画的span元素.</span>
83
84 </body>
85 </html>
二、可见性过滤
1.可见性过滤器介绍
- :hidden 隐藏的 特指<xxx style="display:none;"/>,获得<input type="hidden"/>
- :visible 可见的
2.代码实例
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>05-可见性过滤选择器.html</title>
6 <!-- 引入jQuery -->
7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
8 <script src="./script/assist.js" type="text/javascript"></script>
9 <link rel="stylesheet" type="text/css" href="./css/style.css" />
10 <script type="text/javascript">
11 $(function(){
12 // <input type="button" value=" 选取所有可见的div元素" id="b1"/>
13 $("#b1").click(function () {
14 alert("123");
15 $("div:visible").css("background","red");
16 });
17 // <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/>
18 $("#b2").click(function () {
19 $(":hidden").css("background","red");
20 });
21 // <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/>
22 $("#b3").click(function () {
23 $("input:hidden").each(function(index){
24 alert($(this).val());
25 });
26 });
27 // <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/>
28 $("#b4").click(function () {
29 $.each($("input:hidden"),function(index,domEle){
30 alert(index + "@" + $(domEle).val());
31 });
32 });
33 });
34 </script>
35 </head>
36 <body>
37 <h3>可见性过滤选择器.</h3>
38 <button id="reset">手动重置页面元素</button>
39 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
40 <br/><br/>
41 <input type="button" value=" 选取所有可见的div元素" id="b1"/>
42 <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/>
43 <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/>
44 <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/>
45 <br /><br />
46
47 <!--文本隐藏域-->
48 <input type="hidden" value="hidden_1">
49 <input type="hidden" value="hidden_2">
50 <input type="hidden" value="hidden_3">
51 <input type="hidden" value="hidden_4">
52
53 <div class="one" id="one" >
54 id为one,class为one的div
55 <div class="mini">class为mini</div>
56 </div>
57
58 <div class="one" id="two" title="test" >
59 id为two,class为one,title为test的div.
60 <div class="mini" title="other">class为mini,title为other</div>
61 <div class="mini" title="test">class为mini,title为test</div>
62 </div>
63
64 <div class="one">
65 <div class="mini">class为mini</div>
66 <div class="mini">class为mini</div>
67 <div class="mini">class为mini</div>
68 <div class="mini" title="tesst">class为mini,title为tesst</div>
69 </div>
70
71
72 <div style="display:none;" class="none">style的display为"none"的div</div>
73
74 <div class="hide">class为"hide"的div</div>
75
76 <span id="mover">正在执行动画的span元素.</span>
77 </body>
78 </html>
jQuery--内容过滤和可见性过滤的更多相关文章
- jQuery学习笔记之可见性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素. 显示隐藏的例子: <!DOCTYPE html> <html> <head> <script ...
- jQuery中的内容、可见性过滤选择器（四、四）：:contains()、:empty、:has()、:parent、:hidden、:visible
<!DOCTYPE html> <html> <head> <title>内容.可见性过滤选择器</title> <meta http ...
- JQuery 可见性过滤选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jQuery选择器之可见性过滤选择器Demo
测试代码 05-可见性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- jQuery选择器的分类之过滤选择器
jQuery选择器的分类之过滤选择器 上一篇文章为大家简单呢的介绍了jQuery选择器中的基本选择器,层级选择器,表单选择器,接下来就带大家了解一下过滤选择器... 过滤选择器都分为哪些??? 1.基 ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- PHP实现对站点内容外部链接的过滤方法
熟悉SEO的朋友都知道,对于网站外部链接失效的情况如果链接带有rel="nofollow"属性可以避免不必要的损失.本文就以实例形式演示了PHP实现对站点内容外部链接的过滤方法.具 ...
- 用jQuery实现搜索框的过滤效果
遇到的问题: 1.动态添加了某些元素,在动态添加的某个元素上绑定事件失效 原因:因为需要绑定的元素的直接父元素也是动态添加的解决:向上为上一级父元素绑定事件 $(".check-box&qu ...
- Hashslider – 带有 Hash 标签功能的 jQuery 内容滑块
Hashslider 实现了常见的 jQuery 滑块的功能,特别之处在于给 URL 加上了标签,因此你能够连接到滑块的某块内容.滑块的内容也可以从外部的 HTML 文件获取. 您可能感兴趣的相关文章 ...
随机推荐
- 《手把手教你》系列技巧篇（六十九）-java+ selenium自动化测试 - 读取csv文件（详细教程）
1.简介 在实际测试中,我们不仅需要读取Excle,而且有时候还需要读取CSV类的文件.如何去读取CSV的文件,宏哥今天就讲解和分享一下,希望对你能够有所帮助.前面介绍了如何读取excel文件,本篇介 ...
- 『无为则无心』Python面向对象 — 53、对Python中封装的介绍
目录 1.继承的概念 2.继承的好处 3.继承体验 4.单继承 5.多继承 1.继承的概念 在Python中,如果两个类存在父子级别的继承关系,子类中即便没有任何属性和方法,此时创建一个子类对象,那么 ...
- ssh 连接出现expecting SSH2_MSG_KEX_ECDH_REPLY失败解决
问题描述: ssh连接通过ipsec后连接卡住:ssh -vvv显示: echo "1420" > /sys/class/net/eth0/mtu #把mtu值设置一下默认是 ...
- RFC2899广播帧转发测试——网络测试仪实操
一.简介 RFC 2889为LAN交换设备的基准测试提供了方法学,它将RFC 2544中为网络互联设备基准测试所定义的方法学扩展到了交换设备,提供了交换机转发性能(Forwarding Perform ...
- jar工具常用命令
参考链接:https://www.ibm.com/developerworks/cn/java/j-jar/index.html
- petite-vue源码剖析-为什么要读源码？
什么是petite-vue? 根据官方解释,petite-vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式. 与完整的Vue相比最大的特点是,面对数据的变化petite-vue采取 ...
- OJ教程--递归
弄清楚递归的基本思想,递归函数的运行过程,暂且不考虑是否使用递归在效率方面的差异. 题目 1: 数的组合问题.从1,2,-,n中取出m个数,将所有组合按照字典顺序列出.如n=3,m=2时,输出:12 ...
- Spark on Yarn出现hadoop.compression.lzo.LzoCodec not found问题发现及解决
问题描述: spark.SparkContext: Created broadcast 0 from textFile at WordCount.scala:37 Exception in threa ...
- Qt：QMap
0.说明 QMap < Key , T > 一个QMap就是一个K-V对,也可以说是字典对象. 1)构造 构造一个Key是QString,Value是int的QMap: QMap<Q ...
- c/c++（c++和网络编程）日常积累（二）
Linux下C编程通过宏定义打开和关闭调试信息 https://www.cnblogs.com/robinsons/p/3667032.html https://blog.csdn.net/u0134 ...