基本過濾器 (jQuery 6)

官網連結

目前總共有14個：

以下3個1.8(含)之後可接受負數，1.7(含)以上的我才會寫，想知道的看官網藍色的那一條最右邊都有寫
:eq()：equals，等於，從0開始，和.eq()相同，但.eq()很早就可以用負數了，兩個現在只差在寫在括號裡面或外面而已； 不過.eq()是放在遍歷裡，所以跑迴圈時，儘量用.eq，其他再用:eq
:gt()：greater than, 大於，從0開始，目前沒有.gt()這種東西
:lt()：last than小於，從0開始，目前沒有.lt()這種東西

:first：取第一筆
:last：取最後一筆

:odd：取奇數
:even：取偶數

:header：取HTML的H1~H6
:not()：取反

:lang()：抓屬性lang的字串，大小寫沒差

:root：取得HTML物件

:animated：取得有動畫的物件
:target：取得網址上#後面的字
:focus：jQuery 5介紹過，所以它是選擇器，也是過濾器

※:eq、:gt、:lt、:first、:last

$(function() {
    $("ul:eq(1) > li:eq(1)").css('background-color', 'red');
    
    for(var i=0; i<$('ul').length; i++){
        $("ul:eq(" + i + ") > li:lt(1)").css('background-color', 'red');
    }
    
    $("ul:last > li:first").css('background-color', 'red');
});
----------
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>
<ul>
    <li>F</li>
    <li>G</li>
</ul>
<ul>
    <li>H</li>
    <li>I</li>
    <li>J</li>
</ul>

※$("ul:eq(1) > li:eq(1)")，是比較好的寫法，G被選中

※$("ul > li:eq(1)")，只有B會被選中，並不是所有的ul，我試的結果也只有:eq指的是第一個，其他都是指全部的ul

※如果每一個ul都要選中，我想到的是用迴圈

※$("ul > li:lt(1)")，小於1(B)的，所以結果是A

※$("ul > li:gt(1)")，大於1(B)的，所以C~J都會被選中

※$("ul > li:first")，只有A會被選中

※$("ul > li:last")，只有J會被選中

※:odd、:even

$("ul li:odd").css('background-color', 'lightgreen');
$("ul li:even").css('background-color', 'pink');

※ul一樣指全部，也是從0開始，0是偶數，所以第一行是粉紅色

※:header、:not

$(function() {
    $(':header').css('color', 'red');
    $('input:not(:disabled)').css('color', 'green');
    $(':header').css('color', 'red');
});
----------
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h7>7</h7>
<h8>8</h8>
<h9>9</h9>
<h10>10</h10>
    
<input value="a" />
<input value="b" />
<input value="c" disabled="disabled"/>
<input value="d" />
<input value="e" disabled="disabled"/>

※雖然HTML沒有H7~H9，但我試也是可以(但不會換行)，H10(含)以上就不行了

※:lang

$(function() {
    $("span:lang(en_us)").css('background-color', 'red');
    $("span:lang(zh_tw)").css('color', 'green');
});
----------
<span lang="EN_US">
    a
    <span>
        b
        <span>c</span>
    </span>
</span>
<span lang="zh_tw">
    1
    <span>
        2
        <span>3</span>
    </span>
</span>

※很多屬性都有lang，裡面的字串對應到:lang的()裡就能選中了，所以不一定要用zh_tw這種格式，大小寫沒差

※:root

$(function() {
    var xxx = $(':root');
    // debugger;
    alert(xxx[0].nodeName);
});

※取得HTML物件，但為什麼可以.nodeName呢？還可以點哪些呢？
打開註解那一行後，瀏覽器按F12，然後再按重整，如下操作(只截IE8、IE11和Chrome的圖)：

※最後的圖是IE8，要先Start Debugging再重整才有作用

※有下拉是因為滑鼠要放在變數(xxx)不動，出來後，左邊就是可以點的名稱了，右邊是值

※:animate

$(function() {
    $("div").animate({width: "500px"}, "slow");
    $("span").animate({width: "500px"}, "slow");
    var xxx = $(":animated");
    alert(xxx[0].nodeName);
    alert(xxx[1].nodeName);
});
----------
<div></div>
<span></span>

※必須先有動畫，所以前兩行讓下面的div和span有動畫，然後就可以取得物件，能點什麼名稱，和上面的圖一樣的做法

※:target

$(function($) {
    $('button').click(function(){
        test();
    });
});
    
function test(){
    $(':target').css('color', 'red');
}
----------
<button>test</button>
<div id="xxx">div</div>
<a href="#xxx">xxx</a>

※a href="#"其實就是書籤的功能，點擊超連結後，網址後面就會多個#xxx，這時再按button就會看到變化了