DIV CSS 佈局教程網

9.3 下標過濾eq()
編輯:jQuery基礎知識     

下表過濾,就是使用過濾方法來選取“元素集合”中指定下標位置的某一個元素。在jQuery中,我們使用eq()方法來實現下標過濾。

語法:

 
$().eq(n)

說明:

n是一個正整數,從0開始計算,表示用來選取“元素集合”中下標為n的的某一個元素。這個有點類似於JavaScript中的數組下標。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("li").eq(4).click(function () {
                $(this).css("color", "yellow");
            })
        })
    </script>
</head>
<body>
    <ul>
        <li>紅色red</li>
        <li>橙色orange</li>
        <li>黃色yellow</li>
        <li>綠色green</li>
        <li>藍色blue</li>
        <li>紫色purple</li>
    </ul>
</body>
</html>

默認情況下,在浏覽器預覽效果如下:

當我們點擊第5個li元素後,在浏覽器預覽效果如下:

分析:

eq()方法的下標是從0開始的,第1個li元素的下標是0,第2個li元素的下標是1,……,第n個元素的下標是n-1。因此$("li").eq(4)表示選取下標為4的li元素(也就是第5個li元素)

細心的小伙伴可能看出了一點端倪,eq()方法類似於:eq()選擇器。

 
$("li").eq(4).click(function () {
    $(this).css("color", "yellow");
})

上面這段代碼等價於:

 
$("li:eq(4)")click(function () {
    $(this).css("color", "yellow");
})

明明都有一個:eq()選擇器了,搞毛線還弄一個eq()方法出來呢?這是因為選擇器的形式很固定,在某些情況下使用會顯得很呆板且力不從心。而過濾方法使得我們更加靈活地控制元素,換一句話來說:過濾方法其實就是對選擇器的一種補充!關於過濾方法的優勢和特點,我們在以後的實際開發中會慢慢感受到。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved