第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素

Posted 2020-10-08 幸享龙枫

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素相关的知识，希望对你有一定的参考价值。

jQuery 学习8 遍历-父亲兄弟子孙元素

jQuery遍历，可以理解为“移动”，使用“移动”还获取其他的元素。

什么意思呢？老师举一个例子：

班上30位同学，我是新来负责教这个班学生的老师，但我不认识所有学生，只认识上学期教过的几位同学、比如小明。我们再用一小串代码来作解释：

<body>

<span id="ming">我是小明</span>
<span>我坐在小明后面，我叫李四</span>

</body>

以上看的很清楚吧。他们是同级元素，两位同学是平级的，只是小明坐在第一排，而李四则坐在第二排，意思很简单。我(老师)上课提问题，但我不清楚小明后面的同学叫什么名字，而又要抽他起来回答问题，在jQuery里，我们知道他和小明的关系的时候，我们就可以用到next()方法(找到下一位同级元素)，这样的话，我就知道小明后面坐着的同学了。我们在script里测试一下代码：

<script>
    alert($("#ming").next().html());
</script>

找到小明的id，然后next()方法找到下一个兄弟元素，html()打印内容，alert()弹出提示。我们可以很清楚的看到，弹出的则是小明后面的李四。

来看一个完整的代码演示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery 学习8 遍历-父亲兄弟子孙元素</title>
    <!--使用jQuery一定不要忘记引用jQuery文件-->
    <script src="../js/jquery-1.12.2.min.js"></script>
</head>
<body>
<div id="boss">
    我是最大的，爷爷
    <div id="div1">
        我是老二呗
        <p id="x">兄长</p>
        <p id="d">弟弟</p>
    </div>
</div>
<!--以上就给出最简单的关系结构，爷爷、父亲、俩兄弟-->
<br/><br/>
<button onclick="boss1()">获取id为"boss"的儿子</button>
<button onclick="boss2()">获取id为"boss"的孙子并且id为"d"</button><br/><br/>
<button onclick="div1()">获取id为"div1"的父亲</button>
<button onclick="div2()">修改样式id为"div1"的儿子</button>
<button onclick="div3()">获取id为"div1"的儿子且id为"x"</button><br/><br/>
<button onclick="x1()">获取id为"x"的下一个兄弟</button>
<button onclick="x2()">获取id为"x"的父亲</button>
<button onclick="x3()">获取id为"x"的父亲的父亲，即为爷爷</button><br/><br/>
<button onclick="d1()">获取id为"d"的上一个兄弟</button>
<!--以上是给出按钮、给出事件，演示效果给同学们看-->
<br/><br/>
<!--给一个p元素，来看出效果-->
<p id="zhi" style="color:red;"></p>
<script>
    //以下就全是 点击事件调用的函数
    function boss1(){
        //获取id为"boss"的儿子
        $("#zhi").html($("#boss").children().html());
        //children()方法，返回被选元素的所有直接子元素
        //因为boss的儿子下面还有孩子，所以它的孩子也会跟着。但不管怎么样，我们获取了boss的儿子了
    }
    function boss2(){
        $("#zhi").html($("#boss").find("#d").html());
        //find()方法必须带参数，才能找到指定的孙子，可以用id、class、元素来指定，这里用的是id
        //find()方法 返回被选元素的后代元素，一路向下直到最后一个后代。
    }
    function div1(){
        $("#zhi").html($("#div1").parent().html());
        //parent()方法是找到当前元素的父亲，父亲只有一个，所以parent()方法不需要参数
    }
    function div2(){
        $("#div1").children().css("color","blue");
        //获取儿子只能获取一个，即为最近的一个，所以老师这里用修改样式给大家看出，能修改所以直接儿子的样式
    }
    function div3(){
        $("#zhi").html($("#div1").children("#x").html());
        //父亲可以有多个孩子，children()方法可以带参数，就是过滤一些儿子，找到指定的儿子
    }
    function x1(){
        $("#zhi").html($("#x").next().html());
        //next() 返回被选元素的下一个同胞元素 所以是不需要参数的哟
    }
    function x2(){
        $("#zhi").html($("#x").parent().html());
        //获取它的父亲，父亲的内容也会打印出儿子的内容，因为儿子是跟着父亲的
    }
    function x3(){
        $("#zhi").html($("#x").parent().parent().html());
        //这里老师用了两个parent()方法，就是找到，当前元素的父亲的父亲，即为爷爷。
        //所以说，咱们自己扩展，其他的方法，也是可以这样，两个甚至多个使用来 找到其他元素
    }
    function d1(){
        $("#zhi").html($("#d").prev().html());
        //prev() 即为返回上一个兄弟元素，和next()方法正好相反
    }
</script>
</body>
</html>