Jquery遍历

HTML文件： 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../JQuery/jquery-1.8.0.min.js"></script>
    <script src="TraversingDown.js"></script>
    <link type="text/css" href="Style.css" rel="stylesheet" />
    <style>
        .bd *{
            display:block;
            border:3px solid gray;
            color:gray;
            padding:5px;/*内边距*/
            margin:15px;/*外边距*/
        }
    </style>
</head>
<body>
    <!--遍历之之向上向下遍历-->
    <div id="div1">div1
        <div id="div2">div2
            <p>
                <a>
                    Hello
                </a>
            </p>
        </div>
    </div>
    <!--遍历之同级遍历-->
    <div class="bd">
        <p>P</p>
        <h2>H2</h2>
        <h3>H3</h3>
        <h4>H4</h4>
        <h5>H5</h5>
        <h6>H6</h6>
    </div>

    <!--遍历之过滤-->
    <div>
        <p>div1</p>
    </div>
    <div>
        <p class="pclass">div2</p>
    </div>
    <div>
        <p class="pclass">div3</p>
    </div>
    <div>
        <a>div4</a>
    </div>
</body>
</html>

CSS文件：

#div1{
    width:500px;
    height:200px;
    border:3px solid chocolate;
}
#div2{
    width:400px;
    height:150px;
    margin-top:10px;
    margin-left:10px;
    border:3px solid chocolate;
}
p{
    margin-left:10px;
    margin-top:10px;
    width:150px;
    height:80px;
    border:3px solid chocolate;
}

JS文件：

$(document).ready(function () {
    //Jquery遍历之向下遍历
    //$("#div1").children("#div2").css({ border: "3px solid #FF0000" });//children传递参数，可选项"#div2",只针对儿子辈

    //$("#div1").find("p").css({ border: "3px solid #FF0000" });//find 只要指定谁，就修改谁，参数为必选项

    //Jquery遍历之向上遍历parent() parents() parentUntil()
    //$("p").parent().css({ border: "3px solid #FF0000" });//只能遍历一层，直接父类
    //$("p").parents().css({ border: "3px solid #FF0000" });//全部向上遍历
    //$("p").parentUntil("#div1").css({ border: "3px solid #FF0000" });//区间遍历，两个元素之间

    //同级遍历 sibings() next() nextAll() nextUntil() prev() preAll() preUntil()
    //$("h4").siblings().css({ border: "3px solid #FF0000" }); //除了H4,其他的H都改变，同级元素全部修改
    //$("h4").next().css({ border: "3px solid #FF0000" });//h4的下一个改变
    //$("h4").nextAll().css({ border: "3px solid #FF0000" });//下面所有元素修改
    //$("h4").nextUntil("h6").css({ border: "3px solid #FF0000" });//区间元素修改
    //$("h4").prev("h6").css({ border: "3px solid #FF0000" });

    //遍历之过滤 first() last() eq() filter() not()
    $("div p").first().css("background-color", "red");
    $("div p").last().css("background-color", "red");
    $("div p").eq(2).css("background-color", "red");//从0开始，指定元素
    $("div p").filter(".pclass").css("background-color", "red");//div P元素均改变
    $("div p").not(".pclass").css("background-color", "red");//与filter相反效果
});

本次学习完成。

posted @ 2023-05-30 14:15  它的眼角开过光  阅读(6)  评论(0)  编辑  收藏  举报