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 文件获取. 您可能感兴趣的相关文章 ...
随机推荐
- mysql 去除前后空白字符
update table set field = replace(replace(replace(field,char(9),''),char(10),''),char(13),'');
- 【性能测试实战：jmeter+k8s+微服务+skywalking+efk】系列之：性能测试场景设计
说明: 本文是基于虚拟机环境配置设计的 性能测试需求 总tps≥100 每个业务的rt<500ms 持续稳定跑50万业务量 单场景 目的:找到单场景的性能问题,为容量场景提供参考,如果低于容量场 ...
- png图片隐写
- （一）scrapy 安装及新建爬虫项目并运行
> 参考:https://www.cnblogs.com/hy123456/p/9847570.html 在 pycharm 中并没有创建 scrapy 工程的选项,需要手动创建. 这里就有两种 ...
- RFC3918组播组容量测试——网络测试仪实操
一.简介 1.RFC3918简介 历史 · 在1999年3月成为正式标准 功能 · 评测网络互连设备或网络系统的性能 · 网络设备: 交换机,路由器- 内容 · 定义了一整套测试方法,为不同厂家的设备 ...
- 思迈特软件Smartbi光鲜亮丽的背后是什么在支撑？
思迈特软件Smartbi是国内知名BI厂商,自2011年成立以来就以提升和挖掘客户的价值为使命,致力于为客户提供一站式商业智能平台和BI解决方案,发展到如今已经获得了来自国家.地方政府.国内外权威分析 ...
- Linux性能优化实战CPU篇之软中断（三）
一.软中断 1,中断的定义 a>定义 举例:你点了一份外卖,在无法获知外卖进度的情况下,配送员送外卖是不等人的,到了发现没人取会直接走,所以你只能苦苦等着,时不时去门口看送到没有,无法干别的事情 ...
- Windows操作下各种工具常用快捷键
目录 Windows快捷键 谷歌浏览器快捷键 Nodepad++快捷键 Mobaxterm快捷键 Markdown快捷键 Windows快捷键 Win + E打开文件系统 Win + L锁屏 谷歌浏览 ...
- HTML背景图加载过慢解决思路
压缩图片的大小 第一个压缩图片网站 第二个压缩图片网站
- mapreduce 中 groupingComparator 用法
groupingComparator是对reduce输入的数据进行分组,比如 public int compare(WritableComparable a, WritableComparable b ...