jQuery选择器之过滤选择器之内容过滤选择器
来源:互联网 发布:形容网络发达的句子 编辑:程序博客网 时间:2024/05/04 18:01
过滤选择器之内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
1、:contains(text):参数为文本
用法: $(”div:contains(’John’)”) 返回值 集合元素
说明: 匹配包含给定文本的元素.这个选择器比较有用,当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容.
2、:empty
用法: $(”td:empty”) 返回值 集合元素
说明: 匹配所有不包含子元素或者文本的空元素
3、:has(selector)
用法: $(”div:has(p)”).addClass(”test”) 返回值 集合元素
说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.
4、:parent
用法: $(”td:parent”) 返回值 集合元素
说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.
练习:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.10.2.js"></script><style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;} </style> <!--引入jquery的js库--> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF" id="b1"/> <input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为" id="b2"/> <input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF" id="b3"/> <input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF" id="b4"/> <input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色" id="b5"/> <h1>天气冷了</h1> <h2>天气又冷了</h2> <div id="one"> id为one div </div> <div id="two" class="mini" > id为two class是 mini div <div class="mini" >class是 mini</div></div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div></div><div class="one"></div><br><div id="mover" > 动画</div><br></body><script language="JavaScript">//<input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF" id="b1"/>//<input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为" id="b2"/>//<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF" id="b3"/>//<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF" id="b4"/>//<input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色" id="b5"/> </script> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.10.2.js"></script><style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;} </style> <!--引入jquery的js库--> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF" id="b1"/> <input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为" id="b2"/> <input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF" id="b3"/> <input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF" id="b4"/> <input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色" id="b5"/> <h1>天气冷了</h1> <h2>天气又冷了</h2> <div id="one"> id为one div </div> <div id="two" class="mini" > id为two class是 mini div <div class="mini" >class是 mini</div></div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div></div><div class="one"></div><br><div id="mover" > 动画</div><br></body><script language="JavaScript">//<input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF" id="b1"/>$("#b1").click(function(){$("div:contains(di)").css("background","#0000FF");});//<input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为" id="b2"/>$("#b2").click(function(){$("div:empty").css("background","#0000FF");});//<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF" id="b3"/>含有即表示被包含元素的最外层$("#b3").click(function(){$("div:has(.mini)").css("background","#0000FF");});//<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF" id="b4"/>$("#b4").click(function(){$("div:parent").css("background","#0000FF");});//<input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色" id="b5"/> $("#b5").click(function(){$("div:not(:contains(di))").css("background","#0000FF");});</script> </html>
- jQuery选择器之过滤选择器之内容过滤选择器
- jquery选择器之内容过滤选择器
- jQuery之内容过滤选择器
- Jquery(六)过滤选择器之内容过滤
- jQuery选择器之过滤选择器
- Jquery过滤选择器之基本过滤选择器
- jQuery之过滤选择器
- Jquery之过滤选择器
- jQuery选择器之过滤选择器之基础过滤选择器
- jQuery选择器之过滤选择器之可见度过滤选择器
- jQuery选择器之过滤选择器之属性过滤选择器
- JQuery选择器(内容过滤选择器)
- Jquery过滤选择器之内容过滤器
- jQuery选择器之过滤选择器之子元素过滤选择器
- jQuery学习之内容过滤选择器、表单域选中选择器
- jQuery基础教程之强大的选择器(过滤选择器-内容过滤选择器)
- jQuery基础教程之强大的选择器(过滤选择器-内容过滤选择器)
- jquery之层次选择器和过滤选择器
- Menu菜单的创建和事件处理
- 可以直接拿来用的15个jQuery代码片段
- matlab预测双色球
- scanf的用法汇总
- BM算法实现源代码
- jQuery选择器之过滤选择器之内容过滤选择器
- 一种无采样电阻的功率器件保护方法
- [视频处理] 使用copy命令合并视频
- C++、GDAL创建shapefile,并向矢量文件中添加网格
- spoj 147
- 低成本MOS管下管驱动电路原理分析
- Linux上iptables防火墙的基本应用教程
- 飘逸的python - 多条件排序及itemgetter的应用
- 杭电1159-Common Subsequence