深入学习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> 

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

×目录[1]焦点状态[2]哈希状态[3]动画状态[4]显隐状态前面的话　　过滤选择器的内容非常多，本文介绍过滤选择器的最后一部分——状态选择器 焦点状态:focus　　:focus选择器选择当前获得焦点的元素<div><button... 查看详情

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

×目录[1]通用形式[2]反向形式[3]首尾元素[4]唯一元素前面的话　　本文是子元素选择器的续篇，主要介绍关于nth-of-type()选择器的内容。该部分内容并非没有出现在《锋利的jQuery》一书中，nth-of-type()选择器参照CSS中的nth-of-type... 查看详情

jquery选择器学习整理(基本选择器，层级选择器，伪类选择器，属性过滤，内容过滤，可见性过滤，范围选择器，排除选择器)

　　总的来说，选择器引擎规则就是:$(‘查询字符串‘)。　　最常用最基本的就是：1、标签选择器(以文档元素作为选择符)：$("div")； 2、id选择器(以ID作为选择符):$("#demo1")； 3、类选择器(以class作为选择符):$(".selected")；... 查看详情

jquery系列教程

这是根据自己学习jQuery一路记录一下每一个章节的学习重点和主要内容供自己以后回顾和大家参考，我会学完一张以后写一些心得和主要内容在这上面jQuery学习系列教程jQuery选择器基本选择器ID选择器class类选择器标签名选择器... 查看详情

二次学习jquery选择器&选择集过滤&转移(代码片段)

JQuery选择器jQuery选择器1.jQuery选择器的介绍2.jQuery选择器的种类3.小结4.笔记5.示例代码选择集过滤1.选择集过滤的介2.选择集过滤的操作3.小结4.笔记5.完整代码选择集转移1.选择集转移介绍2.选择集转移操作3.总结jQuery选择器1.jQuery... 查看详情

前端学习笔记之jquery选择器一

一.查找按选择器查找：过滤选择器1.基本过滤：位置过滤--------jquery独有，css没有　　什么是：根据元素在查找结果集合中的下标位置选择元素　　强调：1.将所有元素查找到集合中再按照下标过滤　　　　　2.下标从0开始　　... 查看详情

javascript之jquery-2jquery选择器(jquery选择器基本选择器层次选择器过滤选择器表单选择器)

...Query选择器能够将内容与行为分离 -学会使用选择器是学习jQuery的基础jQuery选择器的优势 -简洁的写法:     -$()工厂函数在很多Jav 查看详情

前端学习系列之jquery

Jquery简介Jquery介绍查找到某个具体的元素,然后给它添加样式,创建子元素等Jquery基本选择器idid选择器:根据给定的id查找指定的元素语法$("div");.class类选择器:根据class名称查找指定的元素语法$(".class");selector1,selector2,selectorN将每一... 查看详情

第一百六十五节，jquery，过滤选择器

jQuery，过滤选择器 学习要点：　　1.基本过滤器　　2.内容过滤器　　3.可见性过滤器　　4.子元素过滤器　　5.其他方法 过滤选择器简称：过滤器。它其实也是一种选择器，而这种选择器类似与CSS3(http://t.mb5u.com/css3/)里的... 查看详情

jquery4过滤选择器(代码片段)

学习要点：1.基本过滤器2.内容过滤器3.可见性过滤器4.子元素过滤器5.其他方法过滤选择器简称：过滤器。它其实也是一种选择器，而这种选择器类似CSS3里的伪类，可以让不支持CSS3的低版本浏览器也能支持。和常规选择器一样，... 查看详情

jquery选择器之过滤选择器

    过滤选择器类似于CSS中的伪类选择器，以冒号开头。过滤选择器根据其过滤规则分为：基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、以及表单对象属性过滤选择... 查看详情

jquery选择器

1.基本选择器$("#id")//ID选择器$("div")//元素选择器$(".classname")//类选择器$(".classname,.classname1,#id1")//组合选择器 2.层次选择器$("#id>.classname")//子元素选择器$("#id.classname")//后代元素选择器$("#id+.classname")//紧邻下一个元素选择器$(... 查看详情

第五节：jquery框架源码简析

...zle.js中。关于选择器Sizzle的说明，请看《jQuery技术内幕：深入解析jQuery架构设计与实现原理》，这里不再赘述了。/*! *SizzleCSSSelectorEngine * Copyright2011,TheDojoFoundation *&nbs 查看详情

jquery学习

JQueryJQuery版本$符号选择器按ID查找按tag查找按class查找按属性查找组合查找多项选择器层级选择器子选择器（ChildSelector）过滤器（Filter）表单相关查找和过滤过滤操作DOM修改Text和HTML修改CSS显示和隐藏DOM获取DOM信息操作表单修改D... 查看详情

jquery过滤选择器-----------（表单对象属性过滤选择器与表单选择器）

1.表单对象属性选择器　　 2.程序  3.表单选择器　　  查看详情

jquery的选择器

　　要使某个动作应用于特定的html元素，需要有办法找到这个元素。在jQuery中，执行这一任务的方法称为jQuery选择器。jQuery选择器把网页的结构和行为完全分离。利用jQuery选择器，能快速地找出特定的html元素，然后轻松的给元... 查看详情

jquery选择器

jquery选择器有：1.基本选择器2.层级选择器3.过滤选择器4.内容过滤选择器5.可见性过滤性选择器6.属性过滤选择器7.子元素过滤器8.表单对象过滤器使用时注意事项：1.id使用来选择$("#id")2.在class之前使用tag$("p.contain")在jquery中class选... 查看详情

jquery之过滤选择器

过滤选择器　　1.基本选择器　　2.内容选择器　　3.可见性选择器　　4.子元素过滤器 过滤选择器简称：过滤器。它其实也是一种选择器，而这种选择器类似于CSS3(http://t.mb5u.com/css3/)里的伪类,可以让不支持CSS3的浏览器也能支... 查看详情