海阔天空

手机扫码查看

2020javaweb教程之jQuery节点

父节点：parent()

子节点：children()

同胞节点：siblings()

<div id="div">
    <p>div_1</p>
    <p>div_2</p>
    <p id="p3">div_3</p>
    <p>div_4</p>
    <p>div_5</p>
    <div id="div2">
        <p>div2_1</p>
        <p>div2_2</p>
    </div>
</div>



<style>
    div{border:1px solid red;width:200px;}
</style>
<script>
    $(function(){
        var p3=$("#p3");
        var fa=p3.parent();//父节点
        console.log(p3.text()+"的父元素："+fa[0].nodeName);
        var s=$("#div").children();//子节点
        console.log("div的子元素有"+s.length+"个");
        $.each(s,function(i,n){
            console.log(i+"div的子元素"+n.nodeName);
        })
        var ss=p3.siblings();//同胞节点
        console.log(p3.text()+"的同胞有"+ss.length+"个");
        $.each(ss,function(i,n){
            console.log(i+"..."+p3.text()+"的同胞"+n.nodeName);
        })
    })
</script>