內容過濾器、能見度過濾器 (jQuery 8)

※內容過濾器

官網連結
目前有以下4種：


:contains()：抓包含的字串，大小寫有差，子字串、後面有「-」也抓的到，可以說是屬性選擇器的6種綜合體(屬性選擇器有7種，去掉!=)
:empty：只有抓空而已(tab、空格、換行、<br>、\t、\r\n都不行)
:has()：有包含其他的selector，抓的是選擇器的，不是has裡面的
:parent：父元素以下(含)都算

※:contains()

$(function(){
    $( "span:contains('abc')" ).css('color', 'green');
});
----------
<span>Abc def</span>
<span>abc def</span>
<div>abc def</div>
<span>abC def</span>
<span>abcdef</span>
<span>abc-def</span>

※會抓到2、5、6行

※變色是整行都變色，並不是包含的字變色

※:empty

$(function(){
    $( "td:empty" ).css('background-color', 'lightblue');
});
----------
<table border='1' width="20%">
    <tr>
        <td></td>
        <td> </td>
        <td>
        </td>
        <td><br/></td>
    </tr>
</table>

※只會抓到第一個

※:has()

$(function(){
    $( "div:has(p)" ).css('color', 'red');
    $( "div:has(div)" ).css('color', 'yellow');
    $( "div:has(ul)" ).css('color', 'green');
    $( "div:has(li)" ).css('color', 'blue');
    $( "div:has(span)" ).css('color', 'purple');
});
----------
<div>
    <p>
        A
        <div>B</div>
    </p>
    <ul>
        <li>C</li>
        <li>D</li>
    </ul>
    <span>E</span>
</div>
<div>
    <div>F</div>
<div>

※A~E五個都會抓到，F只有第二個會抓到

※會變顏色的是整個div，也就是選擇器上的div，並不是has裡面的

※:parent

$(function(){
    $( "#a:parent" ).css('color', 'red');
});
----------
<div id="a">
    A
    <div id="b">
        B
        <div id="c">C</div>
    </div>
    <div id="d">
        D
        <div id="e">E</div>
        <div id="f">F</div>
    </div>
    <div id="g">G</div>
</div>
<div id="h">
    H
    <div id="i">I</div>
<div>

※結果：
$( "#a:parent" )：A~G
$( "#b:parent" )：BC
$( "#c:parent" )：D
$( "#d:parent" )：DEF
$( "#e:parent" )：E
$( "#f:parent" )：F
$( "#g:parent" )：G
$( "#h:parent" )：HI
$( "#i:parent" )：I

※能見度過濾器

官網連結
只有兩種：


:hidden：抓隱藏起來的
:visible：抓沒有隱藏的

$(function(){
    alert($( "div:visible" ).text());// A
    alert($( "div:hidden" ).text());// B
    alert($( "input:visible" ).length);// 2
    $('input[disabled]').hide();
    alert($( "input:visible" ).length);// 1
});
----------
<div>A</div>
<div style="display:none;">B</div>
<input type="text" disabled="disabled" />
<input type="text" />

※disabled不算隱藏