JQuery学习笔记之遍历

最新推荐文章于 2024-04-19 15:19:10 发布

秋忆夏伤

最新推荐文章于 2024-04-19 15:19:10 发布

阅读量184

点赞数

本文链接：https://blog.csdn.net/qq_29331365/article/details/52527841

版权

html代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="jquery-3.1.0.js"></script>
    <script type="text/javascript" src="JavaScript.js"></script>
    <style type="text/css">
        div{
            width:400px;
            height:400px;
            background-color:green;
        }
        p{
            border:3px;
            width:200px;
            height:50px;
            background-color:red;
        }
        span{
            border:3px;
            background-color:yellow;
        }
    </style>
</head>
<body>
    <button id="b1">向上遍历</button><br />
    <button id="b2">向下遍历</button><br />
    <button id="b3">同代遍历</button><br />
    <div>
        我是div。
        <ul>
            <li>
                <p>我是p标签</p>
            </li>
            <li>
                <span>我是span标签</span>
            </li>
            <li>
                <a href="#">超链接</a>
            </li>
        </ul>
        <h1>我是标题1</h1>
        <h2>我是标题2</h2>
        <h3>我是标题3</h3>
        <h4>我是标题4</h4>
    </div>
</body>
</html>

JQuery代码：

/*
 向上遍历：
 parent()：获取指定元素的直接父元素；
 parents()：获取指定元素的所有祖先元素；
 parentsUntil()：获取给定两个元素之间的所有祖先元素；

 向下遍历：
 children()：获取指定元素的所有直接子元素；可以通过参数过滤对同胞元素的搜索；
 find()：获取被选元素的后代元素；

 同代遍历：
 siblings()：获取指定元素的所有同胞元素；可以通过参数过滤对同胞元素的搜索；
 next()：获取指定元素的下一个同胞元素；
 nextAll()：获取指定元素后面的所有同胞元素；
 nextUntil()：获取指定两个元素之间的所有同胞元素；
 prev()；preAll()；preUntil()：用法和next一样，只是方向相反，获取的是指定元素前面的同胞元素；
*/

$(document).ready(function () {
    $("#b1").click(function () {
        $("p").parent().css("border", "2px solid blue");    // 获取p元素的直接父元素(li元素)；

        $("li").parents().css("border", "3px solid black"); // 获取li元素的所有父元素；

        $("span").parentsUntil("div").css("font-size", "xx-large"); // 获取span和div之间的所有元素；
    });

    $("#b2").click(function () {
        $("div").children().css("border", "2px solid BlueViolet");   // 获取指定元素的所有直接子元素；

        $("ul").find("span").css("font-size", "xx-large");  // 获取指定元素中指定的后代元素；

        $("ul").find("*").css("border", "3px solid black"); // 获取指定元素的所有后代元素；
    });

    $("#b3").click(function () {
        $("h2").siblings().css("border", "2px solid BlueViolet");   // 获取指定元素的所有同胞元素；

        $("h2").next().css("background-color", "white");    // 获取指定元素的下一个同胞元素；
            
        $("h2").nextAll().css("background-color", "white"); // 获取指定元素的后面所有的同胞元素；

        $("ul").nextUntil("h4").css("font-size", "xx-large");// 获取ul元素和h4元素之间所有的同胞元素；
    });
});