Selectors-Basic Filter

Posted on Edited on In Views: Disqus:

 

一、:animated Selector

找尋動畫正在播放的元素。

$("div:animated")

 

二、:eq() Selector

找尋第n個元素(zero-based)。

$("td:eq(2)")

 

三、:even Selector

找尋雙數元素(zero-based)。

$("tr:even")

 

四、:first Selector

找尋第一位元素。

$("tr:first")

 

五、:focus Selector

找尋被focus的元素。

這有點複雜，另外jQuery也有類似.focus()方法可用，故這用法先不提。

 

六、:gt() Selector

找尋大於索引的元素(zero-based)。

$("td:gt(4)")

說明：找尋大於第四個<td>但不包含四的元素。

 

七、:header Selector

找尋<h1>~<h6>的元素

$("*:header")

 

八、:lang(language) Selector

找尋lang屬性其屬性值為language的元素

$("div:lang(en-us)")

 

九、:last Selector

選取最後一個的元素。

$("tr:last")

 

十、:lt() Selector

找尋小於索引的元素(zero-based)。

$("td:lt(4)")

說明：找尋小於第四個<td>但不包含四的元素。

 

十一、:not(selector) Selector

找尋不屬於指定selector的元素。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <p class="a">pa</p>
    <p class="b">pb</p>
    <div class="a">da</div>
    <div class="b">db</div>

    <script>
        $("p:not(.a)").css("color", "red");
    </script>
</body>
</html>

說明：在p元素裡找尋類別名稱不是a的元素。

 

十二、:odd Selector

找尋單數元素(zero-based)。

$("tr:odd")

 

十三、:root Selector

找尋根元素。

這通常也不怎麼會使用他，其根元素通常指的是html

 

十四、:target Selector

選擇由文檔的URI的片段標識符指示的目標元素。

 

說明：但實際用法個人總覺得在取擁有id屬性的jQuery object。