李东的技术博客

文章内容Content

jQuery后代遍历总结

2016/09/10 84 ℃ 抢个沙发

by LiDong from https://www.lidongtech.com/jquery-descendant-traversal-summary.html
本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处。如果只是引流,请随意~

四世同堂的喜事可不是每一个人都能遇得到的。每个家族中都会有家长也会有后代,后代的包含的对象除了子代还包含孙代以及后续说有的代。我国传统文化中就包含有“尊老爱幼”的美德,根据相对论来讲,我们每个人都会成为先辈,也都是其他先辈的后代。

高级形态的智慧生物人为什么会从哺乳动物这一支进化而来,不是没有任何道理的。长期的哺乳活动能促进母亲和后代之间的交流,家庭的基础就是建立在这个之上。很难想象如果人一出生就想羚羊一样撒开腿就能跑,估计人和自己的母亲就不会有那么深的感情。家庭也会变得很不稳定,人类社会的基石就会动摇。巴拉巴拉说了这么多就为了引出后代这个概念。

母猪在给小猪喂奶

母猪在给小猪喂奶

虽然在生物界后代的概念无比重要,代表了基因的顺利传递。在jQuery中后代的意义只不过是DOM模型的层级的差异,虽然没有生物学中的意义重要,但是如果我们想要像操作自己手臂一样的操作DOM,后代遍历的方法我们还是要掌握理解的。

以前的文章《jQuery祖先遍历总结》中介绍了在jQuery中祖先遍历的三种方法,我们使用这些方法能在DOM中任意的向上层的节点“移动”查找上级元素。这篇文章就总结下如何在DOM向下层的节点“移动”查找下级元素,即后代遍历。

jQuery后代遍历的方法有两个比祖先遍历少了一个。它们分别是children()find()。我们先来说下children()方法。

children()方法的作用是返回所选元素的所有直接子元素。这里面的直接子元素就意味着,我们children()方法只能向下移动一级遍历。

举例说明问题:

结果如下:

jquery children()方法demo

jquery children()方法demo

children()方法还可以选择“指定”的子元素。例如下面的代码就是在<div>的子元素中并选择出其中是<p class="active">的元素。如果只是子元素中的<p>没有添加任何类或者不含active类的<p>及子元素中非<p>的元素则不会被选中。

介绍完了children()方法之后,就剩下一个find()方法了。足够聪明的你一定猜到了jQuery这么优秀的库,如果只能遍历下一级子元素,不然也太不灵活了,那么这个find()方法应该就是遍历所有后代元素的方法了。哈哈~太对了。children()方法就是返回被选元素所有后代元素,它威风凛凛一插到底,一直到被选元素分支中最后一个的后代元素。

结果如下:

jquery find()方法demo

jquery find()方法demo

find()方法同样能灵活的选择“指定”的后代元素,使用方式和上文中的children()是一样的。

简单的积木也能搭建雄伟的大桥,这些简单的方法就是组成实现复杂功能程序的基础零件。能灵活运用并理解它们的知识,绝对是我们提升自我过程中不小助力。目前我们已经盘点了祖先遍历和后代遍历,这两种方法已经可以让我们在DOM树中自由的上下“移动”选择我们想要操作的元素了。嘿嘿~是不是有点小兴奋啊?

(报告完毕!)
本文标签:标签:, , ,