深入学习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. 其他控制流 ...
随机推荐
- javascript系列:NaN类型
NaN,即非数值是一个特殊的数值,这个数值用于表示一个本来要返回数值的操作数未返回数值的情况下. ECMAScript中任何数值除以0会返回NaN,因此不影响其他代码运行. NaN特点: ...
- 转行|如何成为企业想要的Android工程师
没经验 一来没钱 二来没时间 三来投简历没人要 四来就算忽悠进去了,也做不了,亚历山大,迟早被踢 1.做好手上的工作 不要裸辞 忌讳心猿意马的心态,当有两个选择的时候,往往 所以要专注于当下手头上唯一 ...
- 使用js_md5加密密码
为什么在传输过程中要用md5对密码进行加密? 众所周知,我们在表单中的输入框输入了密码后,如果采用ajax的post或者get方式提交数据,在浏览器的newwork中就可以看到我们向后台传输的内容,其 ...
- bootstrap之HTML模板
bootstrap之HTML模板 <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title ...
- 图文解释XCode常用快捷键的使用
刚开始用Xcode是不是发现以前熟悉的开发环境的快捷键都不能用了?怎么快捷运行,停止,编辑等等.都不一样了.快速的掌握这些快捷键,能提供开发的效率. 其实快捷键在Xcode的工具栏里都标注有,只是有的 ...
- 踏上Salesforce的学习之路(三)
一.创建Invoice对象 为了使我们的这个Warehouse app更加接近现实,我们现在为他创建一个Invoice对象. 先点击右上角的Setup,然后在左侧的Quick Find查找框中输入Ob ...
- win7安装oracle 时容易出的问题
Windows7下安装Oracle11G.10G,都会提示如下信息 正在检查操作系统要求... 要求的结果: 5.0,5.1,5.2,6.0 之一 实际结果: 6.1 检查完成.此次检查的总体结果为: ...
- EXT 下拉框事件
1. <ext:ComboBox ID="cbline" FieldLabel="平台部门来源" runat="server" Dis ...
- 关于pl/sql数据库下拉中选项为空的问题
1.可能是在配置环境变量TNS_ADMIN的时候后面多了一个分号,去掉分号就可以了
- 在Excel中把横行与竖列进行置换、打勾号
在Excel中把横行与竖列进行置换:复制要置换的单元,在新的单元上右键->选择性复制,会出现对话框,选中“置换”,即可在Excel中打勾号,左手按住ALT不放,右手在小键盘也就是右边的数字键盘依 ...