前面的话

  本文介绍过滤选择器中的内容选择器。内容选择器的过滤规则主要体现在它所包含的子元素或文本内容上

: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))
  该选择器没有对应的CSS选择器,如果使用javascript实现类似$(div span:not(.test)).css('color','red')的效果
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');

  lang属性是HTML元素的全局属性,详细情况移步至此

  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选择器系列第五篇——过滤选择器之内容选择器的更多相关文章

  1. 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

    × 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...

  2. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  3. 深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器

    × 目录 [1]焦点状态 [2]哈希状态 [3]动画状态[4]显隐状态 前面的话 过滤选择器的内容非常多,本文介绍过滤选择器的最后一部分——状态选择器 焦点状态 :focus :focus选择器选择当 ...

  4. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  5. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  6. jquery选择器之内容选择器

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. 前端工程师技能之photoshop巧用系列第五篇——雪碧图

    × 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sp ...

  8. 【Windows编程】系列第五篇:GDI图形绘制

    上两篇我们学习了文本字符输出以及Unicode编写程序,知道如何用常见Win32输出文本字符串,这一篇我们来学习Windows编程中另一个非常重要的部分GDI图形绘图.Windows的GDI函数包含数 ...

  9. EnjoyingSoft之Mule ESB开发教程系列第五篇:控制消息的流向-数据路由

    目录 1. 使用场景 2. 基于消息头的路由 2.1 使用JSON提交订单的消息 2.2 使用XML提交订单的消息 2.3 使用Choice组件判断订单格式 3. 基于消息内容的路由 4. 其他控制流 ...

随机推荐

  1. Ajax浅学习

    写在前面:响应事件 function addEvent(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, ...

  2. CSS常用布局学习笔记

    水平居中-行内元素 如果是文字和图片这类的行内元素,则在其父级元素上加上样式:text-align:center; 水平居中-定宽块元素 div{ width:100px; margin:0 auto ...

  3. Where product development should start

    We all need to know our customers in order to create products they’ll actually buy. This is why the  ...

  4. const 使用一二

    Primer C++ 练习题4.20: int i = -1; const int ic = i; 对于这个,一开始认为,ic 作为const 类型变量,定义时应该给其赋常值,而此处给的是变量i,因此 ...

  5. [ios]利用alertView 插入数据都数据库。笔记

    利用alertView 插入数据都数据库 -(void)addItemToList { UIAlertView *alter=[[UIAlertViewalloc]initWithTitle:@&qu ...

  6. Struts2标签大全

    A:<s:a xhref=""></s:a>-----超链接,类似于html里的<a></a><s:action name=& ...

  7. select2的相关问题

    在弹出框中无法使用select2的问题: 通常情况下,使用select2只需要在加载相关js和css后,添加如下代码即可: $("#selectId").select2(); 但如 ...

  8. BSBuDeJie_05

    1 点包装成对象 [NSValue valueWithCGPoint] 2 获取当前时刻 CACurrentMediaTime

  9. 使用DataList实现数据分页的技术

    今天做网站的时候,用到了分页技术,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们. DataList控件可以按照列表的形式显示数据表中的多行记录,但是被显示的多行记录没有分页功能,使用起来不太方 ...

  10. Code First系列之视图,存储过程和异步API

    返回<8天掌握EF的Code First开发>总目录 本篇目录 视图View 存储过程 使用存储过程CRUD 异步API 本章小结 自我测试 本系列的源码本人已托管于coding上:点击查 ...