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 文件获取. 您可能感兴趣的相关文章 ...
随机推荐
- Eclipse插件开发demo
一.安装 1. 下载安装JDk 2. 下载安装PDE(Plugin-in Development Environment) 访问eclipse官网,点击Download,选择Download Pack ...
- web安全之cookie伪造
我们注册一个用户登陆上 Cookie都是351e766803开头 我们猜把351e766803后面的值改成admin的md5值 351e766803 21232f297a57a5a743894a0e4 ...
- 大数据BI系统是怎么助力企业长久发展的
多元化集团企业在发展到一定阶段后,往往会遇到业务与财务分离.管理缺乏系统决策支持等管理问题.财务决策支持系统建设实施BI是管理升级的内在要求. 1996年,加特纳集团提出了商业智能(Businesin ...
- 3款自助型BI分析平台功能盘点，帮助你预测商业发展方向
在快速发展的今天,商业智能BI已经不同于传统的商业智能BI,商业智能BI已经逐渐转变为自助和业务主导的模式,自助BI分析平台应运而生,自助BI分析平台逐渐成为许多企业的选择. 自助式BI分析平台与传统 ...
- 案例六：shell脚本监控httpd服务80端口状态
这里是举例监控httpd服务端口状态,根据端口判断服务器是否启动,如果没有启动则脚本自动拉起服务,如果服务正在运行则退出脚本程序:如果换成别的服务端口也可以,但是脚本程序需要做调整. #!/bin/b ...
- 【C# .Net GC】GC内存分配规则
GC 管理内存分配和回收 公共语言运行时的垃圾回收器为应用程序管理内存的分配和释放. https://docs.microsoft.com/zh-cn/dotnet/standard/automati ...
- 进程&线程（一）——multiprocessing,threading
本节内容为①进程线程的基础知识:②在Python的实现方法: 学习总结自: 一文看懂Python多进程与多线程编程(工作学习面试必读) - 知乎 multiprocessing 官方文档 1.进程线程 ...
- Java：List（一）——概述
说明 在集合类中,List是最基础的一种集合--有序List. List的行为和数组几乎相同:List内部按照放入元素先后顺序存放,每个元素都可以通过索引确定自己的位置,List的索引和数组相同,都是 ...
- JZ-058-对称的二叉树
对称的二叉树 题目描述 请实现一个函数,用来判断一棵二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的. 题目链接: 对称的二叉树 代码 /** * 标题:对称的二叉树 ...
- 随机数据生成工具Mockaroo
测试用例生成工具:https://www.mockaroo.com/ 网站描述是:Random Data Generator and API Mocking Tool | JSON / CSV / S ...