jQuery parent() parents()和parentsUntil()方法

為了更靈活地操作元素，除了選擇器之外，jQuery 還為我們提供了以“方法”形式存在的兩種方式：一種是“過濾方法”，另一種是“查詢方法”。過濾方法和查詢方法，其實就是對 jQuery 選擇器的一種補充。

過濾方法，指的是對所選元素進一步地進行篩選。查詢方法，主要是以當前所選元素為基點，找到這個元素的父元素、子元素或兄弟元素。

在 jQuery 中，對於查詢方法，我們可以分為以下 3 種情況。

查詢祖先元素。
查詢後代元素。
查詢兄弟元素。

本節教學先來介紹第一種查詢祖先元素，查詢後代元素和查詢兄弟元素之後介紹.

在 jQuery 中，如果想要查詢當前元素的祖先元素（父元素、爺元素等），我們有 parent()、parents() 和 parentsUntil() 3 種方法

jQuery parent()方法

在 jQuery 中，我們可以使用 parent() 方法來查詢當前元素的“父元素”。注意，每個元素只有一個父元素。

語法：

$.parent(selector)

selector 是一個可選引數，也是一個選擇器，用來查詢符合條件的父元素。當引數省略時，表示父元素不需要滿足任何條件；當引數沒有省略時，表示父元素需要滿足條件。

舉例：不帶引數的 parent()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <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 src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("td").hover(function () {
                $(this).parent().css("background-color", "silver");
            }, 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>

預設情況下，預覽效果如圖 1 所示。

圖 1：預設效果