深入學習jQuery選擇器系列第五篇——過濾選擇器之內容選擇器 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　本文介紹過濾選擇器中的內容選擇器。內容選擇器的過濾規則主要體現在它所包含的子元素或文本內容上

: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';
    }
}