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

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

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

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

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

我是小明
我坐在小明后面，我叫李四

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

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

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

    
    
    
    



    我是最大的，爷爷
    

        我是老二呗
        
兄长
        
弟弟
    





获取id为"boss"的儿子
获取id为"boss"的孙子并且id为"d"


获取id为"div1"的父亲
修改样式id为"div1"的儿子
获取id为"div1"的儿子且id为"x"


获取id为"x"的下一个兄弟
获取id为"x"的父亲
获取id为"x"的父亲的父亲，即为爷爷


获取id为"d"的上一个兄弟

老师只演示了部分常用的：

next() 方法返回被选元素的下一个同胞元素。

prev() 方法返回被选元素的上一个同胞元素。

children() 方法返回被选元素的所有直接子元素。

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

parent() 方法返回被选元素的直接父元素。

以上引用w3c教程

这里只有五个遍历方法。还有一部分，老师认为并不是经常使用到的，有兴趣的同学可以去教程里看一下。

那么学到这里，很多同学疑问，遍历有什么好的？老师这里就说一下，比如你的导航栏，有一级和二级菜单，一级菜单点击一下，弹出相应的二级菜单，其他的二级菜单隐藏。

老师以前写呢，就是给每一个一级菜单给一个id，二级菜单一个id，然后点击一级菜单弹出相应的二级菜单，老师很肯定的说，有很多初学的同学肯定也是这么想的。那么问题来了，客户的需求，他的一级菜单有10个，20个甚至更多，难道我们就在页面上一个一个的给id吗？

像这种，我们就完全可以运用今天所学的，遍历，一级菜单找到下面的二级菜单弹出，用jQuery的元素查找，用class类来查找，然后再找到它的儿子或者兄弟，再做显示或隐藏，几行代码高效且稳定的搞定一切，还能在这个基础上再新加导航栏，js代码不管，依旧能实现二级菜单。

下一篇，我们写一个小项目，实战一下，将这26篇，html+css+js+jQuery这些，所学，再加上自己扩展，写一个简单的页面。

页面(简单点)：

可以用jQuery特效效果，这些课学习的遍历，来实现左侧导航栏。其他的就简单了，就是html+css静态布局了。