深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器
前面的话
本文介绍过滤选择器中的内容选择器。内容选择器的过滤规则主要体现在它所包含的子元素或文本内容上
:contains(text)
:contains(text)选择器选择含有文本内容为'text'的元素,返回集合元素
//返回所有文本内容包含'test'的元素
$(':contains("test")') //返回所有文本内容包含'test'的span元素
$('span:contains("test")')
该选择器并没有对应的CSS选择器,如果使用javascript实现类似$('span:contains("test")').css('color','red')的效果
var spans = document.getElementsByTagName('span');
for(var i = 0; i < spans.length; i++){
if(/test/.test(spans[i].innerHTML)){
spans[i].style.color = 'red';
}
}
[注意]如果:contains(text)选择器中的文本内容text包含在子元素中也可以,但是要小心使用
【1】$('div span:contains("test")').css('color','blue')可以匹配<div><span><i>test</i></span></div>,但实际上匹配的是<span>元素,<i>元素由于是<span>元素的子元素,所以i元素的文本颜色变为蓝色
【2】$('div :contains("test")').css('color','red')也可以匹配<div><span><i>test</i></span></div>,但直接匹配的是<i>元素,所以i元素的文本元素变为红色。如果两个选择器同时存在,则文本元素为红色。因为直接给元素设置颜色比通过父级继承颜色的优先级高
<button id="btn1" style="color: red;">$('div :contains("test")')</button>
<button id="btn2" style="color: blue;">$('div span:contains("test")')</button>
<button id="reset">还原</button>
<div>
<span>test1</span>
<span>test2</span>
<span><i>test3</i></span>
<i><span>test4</span></i>
<i>test5</i>
<i>1</i>
</div>
<script>
reset.onclick = function(){history.go();}
//对于test3,就是上面讨论的直接给元素设置颜色比通过父级继承颜色的优先级高的情况
btn1.onclick = function(){$('div :contains("test")').css('color','red');}
btn2.onclick = function(){$('div span:contains("test")').css('color','blue');}
</script>
:empty
:empty选择器选择不包含子元素或文本的空元素,返回集合元素
$('div :empty').css('color','red');
对应的CSS选择器是:empty选择器,该选择器选择没有子元素的元素,而且该元素也不包含任何文本节点
:empty{color:red;}
如果使用javascript实现类似效果
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
if(divs[i].innerHTML == ''){
divs[i].style.color = 'red';
}
}
:parent
与:empty选择器正好相反,:parent选择器选择含有子元素或文本的元素,返回集合元素
$('div :parent').css('color','red');
该选择器并没有对应的CSS选择器,如果使用javascript实现类似效果
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
if(divs[i].innerHTML != ''){
divs[i].style.color = 'red';
}
}
<style>
div div{height: 20px;width: 20px;}
</style> <button id="btn1" style="color: red;">$('div :empty')</button>
<button id="btn2" style="color: blue;">$('div :parent')</button>
<button id="reset">还原</button>
<div>
<div></div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<script>
reset.onclick = function(){history.go();}
btn1.onclick = function(){$('div :empty').css('backgroundColor','red');}
btn2.onclick = function(){$('div :parent').css('backgroundColor','blue');}
</script>
:has(selector)
:has(selector)选择器选择含有选择器所匹配的元素的父元素,返回集合元素
[注意]该选择器匹配的实际上是父元素
//选择拥有.test的子元素的父元素
$(:has(.test)) //选择拥有.test的子元素的父元素,且该父元素是div元素
$(div:has(.test))
该选择器没有对应的CSS选择器,如果使用javascript实现类似$(div:has(.test)).css('color','red')的效果
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
var tags = divs[i].getElementsByTagName('*');
for(var j = 0; j < tags.length; j++){
if(tags[j].className == 'test'){
divs[i].style.color = 'red';
break;
}
}
}
:not(selector)
:not(selector)选择器去除所有选择器所匹配的元素,返回集合元素
//选择去除.test后的所有span元素
$(span:not(.test)) //选择父元素为div元素下的去除.test后的所有span元素
$(div span:not(.test))
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
var spans = divs[i].getElementsByTagName('span');
for(var j = 0; j < spans.length; j++){
if(spans[j].className != 'test'){
divs[i].spans[j].style.color = 'red';
}
}
}
<style>
div{height: 40px;width: 30px;}
</style> <button id="btn1" style="color: red;">$('div:has(.test)')</button>
<button id="btn2" style="color: blue;">$('span:has(.test)')</button>
<button id="btn3" style="color: green;">$('span:not(.test)')</button>
<button id="btn4" style="color: pink;">$('div:not(.test)')</button>
<button id="reset">还原</button>
<div>
<span class="test">1.1</span>
<span>1.2</span>
</div>
<div>
<span>2.1</span>
<span>2.2</span>
</div>
<script>
reset.onclick = function(){history.go();}
//选择含有.test子元素的div父元素,则第1个div的字体颜色变红
btn1.onclick = function(){$('div:has(.test)').css('backgroundColor','red');} //选择含有.test子元素的span父元素,结果span元素下并没有子元素,所以无变化
btn2.onclick = function(){$('span:has(.test)').css('backgroundColor','blue');} //选择去除.test的span元素,则结果是1.2、2.1、2.2
btn3.onclick = function(){$('span:not(.test)').css('backgroundColor','green');} //选择 去除.test的div元素,由于两个div元素都没有.test,所以全部选中
btn4.onclick = function(){$('div:not(.test)').css('backgroundColor','pink');}
</script>
:header
:header选择器选取所有的标题元素
<button id="btn1">$(':header')</button>
<button id="reset">还原</button>
<h3>h3</h3>
<h4>h4</h4>
<p>p</p>
<script>
reset.onclick = function(){history.go();}
btn1.onclick = function(){$(':header').css('color','red');}
</script>
该选择器并没有对应的CSS选择器,如果使用javascript实现类似$(':header').css('color','red')效果
var tags = document.getElementsByTagName('*');
for(var i = 0; i < tags.length; i++){
if(/H[1-6]/.test(tags[i].nodeName)){
tags[i].style.color = 'red';
}
}
:lang
:lang选择器选择指定语言的所有元素
//选择<div lang="en">或<div lang="en-us">
$('div:lang(en)').css('color','red');
CSS选择器有类似的:lang()选择器,用于匹配某个语言
div:lang(en){color:red;}
如果使用javascript实现类似效果
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
if(/^\s*en\s*$|^\s*en-/.test(divs[i].lang)){
divs[i].style.color = 'red';
}
}
:root
:root选择器选择元素的根元素
$(':root').css('color','red');
CSS也有对应的:root选择器
:root{color:red;}
在javascript中,所有节点都有一个ownerDocument的属性,指向表示整个文档的文档节点document
深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器的更多相关文章
- 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器
× 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
- 深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器
× 目录 [1]焦点状态 [2]哈希状态 [3]动画状态[4]显隐状态 前面的话 过滤选择器的内容非常多,本文介绍过滤选择器的最后一部分——状态选择器 焦点状态 :focus :focus选择器选择当 ...
- 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- jquery选择器之内容选择器
HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 前端工程师技能之photoshop巧用系列第五篇——雪碧图
× 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sp ...
- 【Windows编程】系列第五篇:GDI图形绘制
上两篇我们学习了文本字符输出以及Unicode编写程序,知道如何用常见Win32输出文本字符串,这一篇我们来学习Windows编程中另一个非常重要的部分GDI图形绘图.Windows的GDI函数包含数 ...
- EnjoyingSoft之Mule ESB开发教程系列第五篇:控制消息的流向-数据路由
目录 1. 使用场景 2. 基于消息头的路由 2.1 使用JSON提交订单的消息 2.2 使用XML提交订单的消息 2.3 使用Choice组件判断订单格式 3. 基于消息内容的路由 4. 其他控制流 ...
随机推荐
- mysql数据库表的自增主键号不规律,重新排列
mysql数据库表的自增主键ID乱了,需要重新排序. 原理:删除原有的自增ID,重新建立新的自增ID. 1.删除原有主键: ALTER TABLE `table_name` DROP `id`; 2. ...
- 【BZOJ2442】 [Usaco2011 Open]修剪草坪 斜率优化DP
第一次斜率优化. 大致有两种思路: 1.f[i]表示第i个不选的最优情况(最小损失和)f[i]=f[j]+e[i] 显然n^2会T,但是可以发现f的移动情况可以用之前单调队列优化,就优化成O(n)的了 ...
- javascript Date format(js日期格式化) (转)
方法一:这个很不错,好像是 csdn 的 Meizz 写的: // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) ...
- swift初体验
swift是一门类型安全的语言,同样也是基于c语言 那么c语言的一些类型也是实用的,不同的是:swift声明变量和常量是不一样的 let:用来修饰常量:var用来修饰变量 e.g: let num=1 ...
- iOS开发查看手机app本地存储的文件
开发过程中,有时会在本地存储一些文件,但是我们不确定有没有存上,可以通过以下方法来查看测试手机上本地存储的文件: 1.选择xcode上面的window下面的Devices 2.先在左边选中你当前的设备 ...
- CharSequence cannot be resolved. It is indirectly referenced from required .class files
最近在写项目的时候发现会莫名其妙的出现这个编译错误,网上查了下发现自己安装的是JDK1.8造成的 原因:JDK1.8版本现在还不稳定 解决方法:卸载JDK1.8,安装JDK1.7 扩展:发现安装JDK ...
- MapleSim助力长臂挖掘机建模问题解决
1.问题描述 一家机械零部件设计公司需要一个挖掘机模型,验证他们的零部件是否匹配完整的挖掘机系统.由于他们是一个零部件供应商,公司没有足够的资源和研发人员使用传统的工具创建一个完整系统的详细模型.然而 ...
- OstrichNet 简易统计信息收集工具
Ostrich 是twitter用于监控服务器性能的一个scala库,项目地址https://github.com/twitter/ostrich, 主要功能是收集.展示统计信息, 同时也提供了关闭服 ...
- 一个小白App开发需要了解的基本技术
本文针对小白用户对App做一个简单的介绍,首先要了解App都有哪些类型,不同的类型适用于哪些需求,用户可以根据自己的需求选择不同的App开发. 一 App有哪些形式 WebApp:简单来说,Web A ...
- 《CLR.via.C#第三版》第二部分第10,11章节读书笔记(五)
第10章是对 属性 做阐述 属性本质上是方法 匿名类型的使用: }; Console.WriteLine("Name={0},Year={1}",o1.Name,o1.Year); ...