前的言语

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

 

: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>
    test1
    test2
    <i>test3</i>
    <i>test4</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>
    1.1
    1.2
</div>
<div>
    2.1
    2.2
</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

相关文章

网站地图xml地图