第二章 jQuery技术解密 (五)

2.3.5 引用 DOM 元素

jQuery() 函数能够直接接受 HTML 字符串，并把它们转换为 DOM 结构，这是上一节中所讲解的利用 jQuery() 函数生成 DOM 元素。当然，我们也可以看到 jQuery() 函数还可以接收 DOM 元素、DOM元素集合、HTML标签或者 ID 值。下面我们就来分析 jQuery.fn.init() 构造器是如何把这些类型的参数转换为 DOM 元素的。

对于 HTML 标签来说，它使用 document.getElementsByTagName() 方法获取 DOM 元素集合。对于 ID 参数来说，它使用 document.getElementById() 方法获取特定的 DOM 元素。另外，还可以使用 DOM 元素的 childNodes、firstChild、lastChild、nextSibling、parentNode 和 previousSibling 的属性引用 DOM 节点。

既然说 DOM 元素能够通过 lastChild、parentNode 等属性引用节点，jQuery 对象又是 DOM 元素的集合，因此，jQuery 就可以考虑通过整合 DOM 元素的这些属性来获得其集合中所有元素各自引用的节点。把这些间接引用的节点组合起来又构成了新的 DOM 元素集合。下面我们就来分析 jQuery 是如何引用节点的。

[html]view
plaincopy

1. //通过each()方法为jQuery对象映射一组引用DOM节点的方法
2. jQuery.each({
3. parent:function(elem){returnelem.parentNode;},//引用父节点
4. parents:function(elem){returnjQuery.dir(elem,"parentNode");},//引用所有父节点
5. next:function(elem){returnjQuery.nth(elem,2,"nextSibling");},//引用相邻的下一个DOM元素
6. prev:function(elem){returnjQuery.nth(elem,2,"previousSibling");},//引用相邻的上一个DOM元素
7. nextAll:function(elem){returnjQuery.dir(elem,"nextSibling");},//引用所有后继DOM元素
8. prevAll:function(elem){returnjQuery.dir(elem,"previousSibling");},//引用所有前继DOM元素
9. sibling:function(elem){returnjQuery.sibling(elem.parentNode.firstChild,elem);},//引用相邻DOM元素
10. children:function(elem){returnjQuery.sibling(elem.firstChild);},//引用所有子元素
11. //如果存在iframe，则就是文档，或者所有子节点
12. //elem.contentDocument||elem.contentWindow.documentiframe的属性
13. //http://devoloper.mozilla.org/on/docs/XUL:iframe
14. contents:function(elem){returnjQuery.nodeName(elem,"iframe")?elem.contentDocument||
15. elem.contentWindow.document:jQuery.makeArray(elem.childNodes);}
16. },function(name,fn){
17. //为jQuery对象注册同名方法
18. jQuery.fn[name]=function(selector){
19. //每个元素都执行同名方法
20. varret=jQuery.map(this,fn);
21. //过滤元素集
22. if(selector&&typeofselector=="string")
23. ret=jQuery.multiFilter(selector,ret);
24. //返回构建的jQuery对象
25. returnthis.pushStack(jQuery.unique(ret),name,selector);
26. };
27. });

在上面的代码中，为 jQuery 对象绑定了一组方法，这些方法能够引用不同位置的节点，主要包括父节点、子节点和兄弟节点三类。

• 对于父节点引用来说，可以引用当前 DOM 元素的父亲节点，也可以获得所有父级节点，包括祖先节点。
• 对于子节点引用来说，就是可以引用所有直接的子节点，但不包括不相邻的后代节点。
• 对于兄弟节点引用来说，可以引用包括当前 DOM 元素的前或后相邻节点，也包括前后相近的所有元素。

jQuery 通过 jQuery.each() 公共函数把这个节点引用的方法注册到 jQuery.fn 原型对象中，即 jQuery 对象的同名方法中。因为 jQuery 对象的 DOM 元素是一个集合，所以就必须对集合中每个 DOM 元素执行相同的操作，也就是说为每个 DOM 元素调用属性包含的函数，如 parent: function(elem){return elem.parentNode;}; 中的 function(elem){return elem.parentNode;} 。

当然，在引用的节点中，还包括很多重复的 DOM 元素，或者用户需要过滤的其他节点，这些操作都需要利用过滤函数进行过滤，关于这个话题将在 CSS 选择器一节中进行详细的讲解。

在上面定义的 jQuery 对象方法中，jQuery 也提供了几个公共函数： jQuery.dir()、jQuery.nth() 和 jQuery.sibling() 来辅助完成引用 DOM 节点。下面我们来分析这几个公共函数的用法。

[html]view
plaincopy

1. //从一个元素出发，检索某个方向上的所有元素
2. //如可以把元素的parentNode、nextSibling、previousSibling、lastChild、firstChild属性作为方向
3. //参数说明：
4. //elem参数表示起点元素
5. //dir参数表示元素的方向属性，如parentNode、nextSibling、previousSibling、lastChild、firstChild
6. jQuery.dir=function(elem,dir){
7. varmatched=[],cur=elem[dir];
8. //逐级迭代访问，直到访问到document节点
9. while(cur&&cur!=document){
10. if(cur.nodeType==1)//Element类型
11. matched.push(cur);
12. cur=cur[dir];//向上一级传递节点
13. }
14. returnmatched;
15. };

dir 是 direction(方向) 一词的缩写，表示朝一个方向一直迭代到尽头。例如，parentNode 能够把父节点作为当前节点，再取其父节点，通过这种方式可以迭代到 document 对象为止。另外，对于 nextSibling、previousSibling、lastChild 和 firstChild 元素属性都具有方向性，因此只要获取元素具有
dir (方向) 特性的属性，就可以反复迭代读取。每循环一次都会把取到的元素保存起来。

所以说，dir() 函数对于检索 DOM 文档树中呈放射线性排列的元素来说，是非常有用的。但是如果要检索在某个方向上的第几个元素，如检索偶数序号位置的元素，就需要使用 nth() 函数。该函数的源代码如下所示。

[html]view
plaincopy

1. //从一个元素出发，检索某个方向上的第几个元素。参数Result是第几个
2. //参数说明：
3. //cur参数表示起点元素
4. //dir参数表示元素的方向属性，如parentNode、nextSibling、previousSibling、lastChild和firstChild
5. //result参数表示级数，默认值为1
6. //elem参数是一个无用参数
7. jQuery.nth=function(cur,result,dir,elem){
8. result=result||1;
9. varnum=0;
10. for(;cur;cur=cur[dir])
11. if(cur.nodeType==1&&++num==result)
12. break;
13. returncur;
14. };

jQuery.nth() 函数与 jQuery.dir() 函数在设计思路上是完全相同的，但是 jQuery.dir() 函数不包含自身，而 jQuery.nth() 函数可以包含自身，如果 jQuery.nth() 函数的参数 result 等于 1，则返回自身元素。如果没有找到元素则返回空，如 undifined 或 null 。

jQuery.sibling() 函数就比较简单，但是没有上面两个方法有用。它实现了从一个元素(包括自身)检索所有后续相邻元素，然后再从这个后续的相邻元素排除一个指定元素。例如：

[html]view
plaincopy

1. //从包含参数n的元素开始检索所有后续相邻元素，但不包含参数elem指定的元素
2. //参数说明：
3. //n参数表示起点元素
4. //elem参数排除元素
5. jQuery.sibling=function(n,elem){
6. varr=[];
7. for(;n;n=n.nextSibling){
8. if(n.nodeType==1&&n!=elem)
9. r.push(n);
10. }
11. returnr;
12. };