jQuery源码解析(DOM与核心模块)2.1.1.docx

节点遍历1-1什么是遍历在数据结构中有遍历这个概念，简单点就是将数据的所有节点都查询一遍，但不同的数据结构有不同的遍历方法，而且同一种数据结构也有不同的遍历方法。jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。来自w3school是这么解释的：jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。图示解释：?? ? div 元素是 ul 的父元素，同时是其中所有内容的祖先。? ? ul 元素是 li 元素的父元素，同时是 div 的子元素? ?左边的 li 元素是 span 的父元素，ul 的子元素，同时是 div 的后代。? ? span 元素是 li 的子元素，同时是 ul 和 div 的后代。? ?两个 li 元素是同胞（拥有相同的父元素）。? ?右边的 li 元素是 b 的父元素，ul 的子元素，同时是 div 的后代。? ? b 元素是右边的 li 的子元素，同时是 ul 和 div 的后代。提示：祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。jQuery的遍历处理不仅只是针对基本的层级关系，还扩展了大量的筛选接口，包括了用于筛选、查找和串联元素的方法。之后我们会介绍到各自的实现。1-2 jQuery的遍历结构设计遍历的接口我们可以归为几大类：1 祖先2 同胞兄弟3 后代4 过滤遍历的接口很多都是具有相似或者说是一类的处理功能，那么这种接口的设计我们不能就事论事的一个一个去实现，这样代码就会显得非常累赘也不容易维护，那么就这么几大类Query分了好几十API出来，丰富的接口可以让高层的设计更为简单。但是框架内部的却要简练。那么针对这种类似功能的接口，jQuery内部就会做更多的抽象处理了。1.针对层级关系的处理，jQuery就抽出了一个dir的方法，用于根据传递的元素与词素的位置关系，查找指定的元素。parent，parents，parentsUntil等方法如代码所示：function dir(elem, dir, until) { //参考右边代码return matched; }2.我们在上半部的第一章中就提到过迭代器，迭代器是一个框架的重要设计。我们经常需要提供一种方法顺序的用来处理聚合对象中各个元素，而又不暴露该对象的内部，这也是设计模式中的迭代器模式。迭代器除了单纯的遍历，在jQuery内部的运用最多的就是接口的抽象合并，相同功能的代码功能合并处理：jQuery.each({? parent: function(elem) {},? parents: function(elem) {},? nextAll: function(elem) {},? prevAll: function(elem) {}, }, function(name, fn) {? api[name] = function(until, selector){??? //代码右图? }; });可以看出上面代码方法，针对相同的功能，节约了大量的代码空间。1-3遍历祖先祖先是父、祖父或曾祖父等等。通过 jQuery，能够向上遍历 DOM 树，以查找元素的祖先。向上遍历 DOM 树，这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：parent() parents() parentsUntil().parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象。.parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找.parentsUntil()?方法会找遍所有这些元素的前辈元素，直到遇到了跟参数匹配的元素才会停止。返回的jQuery对象中包含了所有找到的前辈元素，除了与?.parentsUntil()?选择器匹配的那个元素。1-4遍历同胞(上)同胞就是拥有相同的父元素。通过jQuery能够在DOM树中遍历元素的同胞元素。其中nextAll、prevAll、nextUntil、prevUntil其实与遍历祖先的的查找处理是非常类似。.nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。.nextUntil() 获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。.prevAll()