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>