JQ 遍历Dom 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .father *{
                display: block;
                border: 1px solid greenyellow;
                padding: 5px;
                margin: 15px;
                
            }
            
        </style>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="JQ_Dom.js"></script>
    </head>
    <body class="father">body
        <div> div
            <ul> ul
                <li> li
                    <span id="span1">span</span>
                </li>
            </ul>
        </div>
        
        <div id="div1"> div
            <ul> ul
                <li> li
                    <span id="span1">span</span>
                </li>
            </ul>
        </div>
        
        <div> div
            <h1 id="h1">h1</h1>
            <span>span</span>
            <span>span2</span>
            <h1 id="h2">h1</h1>
            <p>p</p>
            <p>p1</p>
                
            
        </div>
    </body>
    
    
    
</html>
$(document).ready(function(){
    /**
     * 遍历祖先
     */
    //直接父节点
    // $("#span1").parent().css({
    //     "border":" 1px solid red"
    // });
    
    //所有父节点 一直到html
    // $("#span1").parents().css({
    //     "border":" 1px solid red"
    // });
    
    //选择父节点
    // $("#span1").parents("body").css({
    //     "border":" 1px solid red"
    // });
    //俩节点间所有 不含括号内
    // $("#span1").parentsUntil("div").css({
    //     "border":" 1px solid red"
    // });
    
    /**
     * 遍历子节点
     */
        //直接子节点 参数"p.className" 为类名为className的p直接子节点
        // $("#div1").children().css({
        //     "border":" 1px solid red"
        // });
        //寻找子节点 参数"*"返回所有
        // $("#div1").find("span").css({
        //     "border":" 1px solid red"
        // });
    /**
     * 遍历同胞
     */
        //所有同胞
        // $("#h1").siblings().css({
        //     "border":" 1px solid red"
        // });
        // //下一个同胞
        // $("#h1").next().css({
        //     "border":" 1px solid red"
        // });
        //之后所有
        // $("#h2").nextAll().css({
        //     "border":" 1px solid red"
        // });
        //之间
        $("#h1").nextUntil("#h2").css({
            "border":" 1px solid red"
        });
        // prev(), prevAll() & prevUntil() 方法 方向为同胞向前
});

 

posted @ 2022-04-05 18:05  lwx_R  阅读(34)  评论(0)  编辑  收藏  举报