第二十六篇 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>
老师只演示了部分常用的：
next() 方法返回被选元素的下一个同胞元素。
prev() 方法返回被选元素的上一个同胞元素。
children() 方法返回被选元素的所有直接子元素。
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
parent() 方法返回被选元素的直接父元素。
以上引用w3c教程
这里只有五个遍历方法。还有一部分，老师认为并不是经常使用到的，有兴趣的同学可以去教程里看一下。
那么学到这里，很多同学疑问，遍历有什么好的？老师这里就说一下，比如你的导航栏，有一级和二级菜单，一级菜单点击一下，弹出相应的二级菜单，其他的二级菜单隐藏。
老师以前写呢，就是给每一个一级菜单给一个id，二级菜单一个id，然后点击一级菜单弹出相应的二级菜单，老师很肯定的说，有很多初学的同学肯定也是这么想的。那么问题来了，客户的需求，他的一级菜单有10个，20个甚至更多，难道我们就在页面上一个一个的给id吗？
像这种，我们就完全可以运用今天所学的，遍历，一级菜单找到下面的二级菜单弹出，用jQuery的元素查找，用class类来查找，然后再找到它的儿子或者兄弟，再做显示或隐藏，几行代码高效且稳定的搞定一切，还能在这个基础上再新加导航栏，js代码不管，依旧能实现二级菜单。
下一篇，我们写一个小项目，实战一下，将这26篇，html+css+js+jQuery这些，所学，再加上自己扩展，写一个简单的页面。
页面(简单点)：
可以用jQuery特效效果，这些课学习的遍历，来实现左侧导航栏。其他的就简单了，就是html+css静态布局了。
