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 文件获取. 您可能感兴趣的相关文章 ...
随机推荐
- 使用第三方插件pagination在页面实现分页功能
1.导入相应的js和css文件 2.在相应的页面映入pagination.js和pagination.css 3.将页面的分页代码替换为pagination动态生成的分页代码 4.编写js代码
- [LeetCode]1295. 统计位数为偶数的数字
给你一个整数数组 nums,请你返回其中位数为 偶数 的数字的个数. 示例 1: 输入:nums = [12,345,2,6,7896] 输出:2 解释: 12 是 2 位数字(位数为偶数) 345 ...
- blender导入灰度图生成地形模型
安装软件 在此处下载blender并安装. 添加平面 1.打开blender,右键删除初始的立方体. 2.shift+a选择平面添加进场景: 3.按下s键鼠标拖动调节平面大小确定后按下鼠标左键: 4. ...
- python-通过configparser模块读取后缀为 .ini 的配置文件信息
前言 一般为了方便会将路径,连接信息等写到配置文件(通常会将这些信息写到yaml,ini....配置文件)中,configparser模块读取后缀为 .ini 的配置文件信息 配置文件格式 #存在 c ...
- C#索引器-有参属性
总结 只要类中有类似于属性的元素就应创建索引器,此属性代表的不是一个值,而是值的集合,其中每一个项由一组参数标识. 这些参数可以唯一标识应引用的集合中的项. 索引器延伸了属性的概念,索引器中的一个成员 ...
- 《Java编程思想》学习笔记（详细）
目录 01 对象导论 02 一切都是对象 03 操作符 04 控制执行流程 05 初始化与清理 06 访问权限控制 07 复用类(继承) 08 多态 09 接口 10 内部类 11 持有对象 12 通 ...
- 【ASP.NET Core】绑定到 CancellationToken 对象
负责管理 HTTP 请求上下文的 HttpContext 对象有一个名为 RequestAborted 的属性.据其名思其义,就是可用来表示客户端请求是否已取消. 果然,它的类型是 Cancellat ...
- redis数据类型的使用及介绍
Redis数据类型 1.Sting类型 set命令 设置键值,存在则覆盖,不存在则新建 set key value EX 秒 设置有效时长为秒 nx 如果键不存在则新建,如果存在返回nil xx 只有 ...
- 两天两夜，1M图片优化到100kb！
坦白从宽吧,我就是那个花了两天两夜把 1M 图片优化到 100kb 的家伙--王小二! 自从因为一篇报道登上热搜后,我差点抑郁,每天要靠 50 片安眠药才能入睡. 网络上曝光的那些关于一码通的消息,有 ...
- 记一次NAS故障分析（ZFS NFS）
问题: 使用vdbench进行单层100w目录,每个目录30个文件,共3000w文件读写时,在创建文件得时候IO会出现断断续续得情况. 分析过程: 1. nfs抓包分析 使用vdbench创建一个文 ...