DIV CSS 佈局教程網

10.2 查找祖先元素
編輯:jQuery基礎知識     

在jQuery中,為我們提供3種查找祖先元素的方法:

  • (1)parent();
  • (2)parents();
  • (3)parentsUntil();

所謂的祖先元素,就是某個元素的“父元素”、“爺元素”……。爺元素,在前端雖然沒這個說法,但是卻比較形象,所以這一節使用這一個說法。

一、parent()方法

在jQuery中,我們可以使用parent()方法來查找當前元素的“父元素”。記住,元素只有一個父元素。

語法:

 
parent(expression)

說明:

參數expression表示jQuery選擇器表達式,用來過濾父元素。當參數省略時,則選擇所有的父元素。如果參數不省略,則選擇符合條件的父元素。

元素不是只有一個父元素麼?為什麼還有“符合條件的父元素”這一說法?對於這個,可以看看下面第2個例子。

舉例1:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        table,tr,td{border:1px solid silver;}
        td
        {
            width:40px;
            height:40px;
            line-height:40px;
            text-align:center;
        }
    </style>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("td").hover(function () {
                $(this).parent().css("background-color", "#F1F1F1")
            }, function () {
                $(this).parent().css("background-color", "white")
            })
        })
    </script>
</head>
<body>
    <table>
        <tr>
            <td>2</td>
            <td>4</td>
            <td>8</td>
        </tr>
        <tr>
            <td>16</td>
            <td>32</td>
            <td>64</td>
        </tr>
        <tr>
            <td>128</td>
            <td>256</td>
            <td>512</td>
        </tr>
    </table>
</body>
</html>

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

當我們鼠標移到某一個單元格的時候,在浏覽器預覽效果如下:

分析:

$(this).parent()表示選擇當前td元素的父元素,但是爺元素(即table元素)不會被選中。

舉例:

在線測試
 
<!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 () {
            $("p").parent(".lvye").css("color", "red");
        })
    </script>
</head>
<body>
    <div><p> 學習網jQuery入門教程</p></div>
    <div class="lvye"><p> 學習網jQuery入門教程</p></div>
    <div><p> 學習網jQuery入門教程</p></div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

$("p").parent(".lvye")表示選擇p元素的父元素,並且這個父元素必須含有類名lvye,不然不會被選中。

二、parents()方法

parents()方法和parent()方法相似,都是用來查找所選元素的祖先元素。但是這兩個方法也有著本質的區別。

其實這2個方法也很好區分,parent是單數形式,查找的祖先元素只有1個,那就是父元素。而parents是復數形式,查找的祖先元素當然是所有的祖先元素。

語法:

 
parents(expression)

說明:

參數expression表示jQuery選擇器表達式字符串,用來過濾祖先元素。當參數省略時,則選擇所有的祖先元素。如果參數不省略,則選擇符合條件的祖先元素。

舉例:

在線測試
 
<!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 () {
            $("#btn").click(function () {
                var parents = $("span").parents()
                              .map(function () { return this.tagName; })
                              .get().join(",");
                alert("span元素的所有祖先元素為:" + parents.toLowerCase());
            });
        })
    </script>
</head>
<body>
    <div><p><strong><span>jQuery入門教程</span></strong></p></div>
    <input id="btn" type="button" value="獲取" />
</body>
</html>

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

當我們點擊“獲取”按鈕,彈出對話框如下:

分析:

map()和get()往往都是配合使用來操作元素,對於這兩個的使用方法請參考:jQuery map()方法。由於這2個方法用得不多,所有不在這裡展開解釋。一般情況下,parents()相對parent()用得較少。

三、parentsUntil()方法

parentsUntil()方法是對parents()方法的一個補充,它可以查找指定范圍的所有祖先元素,相當於在parents()方法返回集合中截取部分祖先元素。

語法:

 
parents(expression)

說明:

參數expression表示jQuery選擇器表達式字符串,用來過濾祖先元素。當參數省略時,則選擇所有的祖先元素。如果參數不省略,則選擇符合條件的祖先元素。

參數selector表示jQuery選擇器表達式字符串,用以確定范圍的祖先元素。該參數為可選,如果省略,則將匹配所有祖先元素,這一點跟parents()方法查找結果是一樣的。

由於parentsUntil()方法用得不多,為了減輕初學者的記憶負擔,我們可以直接忽略。如果想要深入學習的話,可以參考:jQuery parentsUntil()方法。

【後話】:其實在jQuery中,對於查找祖先元素,除了parent()、parents()和parentsUntil()這3種方法之外,還有offsetParent()、closest()這兩種方法。不過對於初學者來說,只要我們認真掌握這一節介紹的3種查找方法,就已經足夠我們走得很遠了。其他兩種方法,我們只需要知道有這麼一回事即可。

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