1 祖先元素

用於向上遍歷 DOM 樹的方法

　　parent() 返回被選元素的直接父元素，僅僅是上一級 （找爸爸）

　　parents() 返回被選元素的所有祖先元素，它一路向上直到文件的根元素，可以選擇輩分

<p><button>測試</button></p>
<ul>
    <li>a</li>
    <li>
        <b>b</b>
    </li>
    <li>c</li>
</ul>

<script 
 
src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        //var x = $("b").parent().html(); // 找爸爸
        //var x = $("b").parents("ul").html(); // 找祖宗 ul
        //var x = $("b").parents("body").html(); // 找祖宗 body
        alert( x );
    });
</script>

2 同輩元素

　　next() 獲取緊鄰匹配元素之後的元素

　　prev() 獲取緊鄰匹配元素之前的元素

　　siblings( [selector] ) 獲取位於匹配元素前面和後面的所有同輩元素

<button>測試</button>
<p>p1</p>
<ul>
    <li>a</li>
    <li>
        <b>b</b>
    </li>
    <li>c</li>
</ul>
<p>p2</p>
<
 
p id="x">p3</p>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
    //var x = $("ul").next().text(); // 緊鄰的下一個元素
    //var x = $("ul").prev().text(); // 緊鄰的上一個元素
    //var x = $("ul").siblings("#x").text(); // 所有的兄弟中，id=x的

    var arr = $("ul").siblings(); // ul的所有兄弟,1個button，3個p，2個script
    for(var i = 0 ;i< arr.length ;i++){
        alert(arr[i]);
    }
    });
</script>

3 後代元素

後代是子、孫、曾孫等等

　　children( [selector] ) 方法返回被選元素的所有直接子元素，“孩子”

<button>測試</button>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
    //var x = $("ul").children().text(); //所有子節點：abc
    var x = $("ul").children("li:first").text(); //ul中的第一個子節點
    alert(x);
});
</script>

find( 選擇器 ) 方法返回被選元素的後代元素，一路向下直到最後一個後代。

<button>測試</button>
<ul>
    <li>盤古</li>
    <li>蚩尤</li>
    <li>刑天
        <p>龔工</p>
    </li>
    <h3>祝融</h3>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        //var x = $("ul").find("p").text(); //在ul中查詢p元素，忽略層級
        //var x = $("ul").find("h3").text(); //在ul中查詢h3元素，忽略層級
        var x = $("ul").find().text(); // 找什麼？不知道！
        alert(x);
});
</script>

4 元素的過濾

　　first()：過濾第一個元素

　　last()：過濾最後一個元素

　　eq(index)：過濾到下標為index的元素

　　not()：除了什麼之外的元素

　　is()：返回布林，判斷是不是這種元素

<button>測試</button>
<ul>
    <li>盤古</li>
    <li>蚩尤</li>
    <li>刑天</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        //var x = $("li").first().text(); // 第一個li
        //var x = $("li").last().text(); // 最後一個li
        //var x = $("li").eq(1).text(); // 下標為1的li
        //var x = $("li").not("li:eq(1)").text(); // 除了下標為1的其餘所有li
        var x = $("li").parent().is("ul"); // 返回布林型，li的父節點是不是ul
      
　　　　 alert(x);
    });
</script>