WEB开发网
开发学院网页设计JavaScript Jquery源码分析---构建Jquery的Dom元素 阅读

Jquery源码分析---构建Jquery的Dom元素

 2010-09-14 13:36:44 来源:WEB开发网   
核心提示: 第一、因为jQuery.fn.init的参数可以有四个类型,我们完全可以通过String类型来先构建Jquery对象(html生成Dom对象,Jquery源码分析---构建Jquery的Dom元素(3),#id的getElementById直接引用,CSS Selector),如父,子,然

第一、因为jQuery.fn.init的参数可以有四个类型,我们完全可以通过String类型来先构建Jquery对象(html生成Dom对象,#id的getElementById直接引用,CSS Selector)。然后就可以把这个对象的间接引用到的元素节点作为参数传给下一个要构建的jquery对象。很多调用pushStack函数的用法就是这样的。

第二、如果硬是要不脱离jQuery来进行间接引用的话,jQuery提供几个静态方法:jQuery.dir、jQuery.nth、jQuery.sibling来完成间接引用。既然是间接引用,当然得先有一个dom元素的主体。直接引用也有主体,但是我们可以采用document来做为默认的。因为直接引用是查找的方式。

jQuery.each( {// 一组对元素的相关节点的操作,如父,子,兄节点等
    parent : function(elem) {// 父亲节点
      return elem.parentNode;
    },
    parents : function(elem) {// elem的所有parentNode
      return jQuery.dir(elem, "parentNode");
    },
    next : function(elem) {// 元素的下一个兄弟
      return jQuery.nth(elem, 2, "nextSibling");
    },
    prev : function(elem) {// 前一个兄弟
      return jQuery.nth(elem, 2, "previousSibling");
    },
    nextAll : function(elem) {// 所有后继兄弟
      return jQuery.dir(elem, "nextSibling");
    },
    prevAll : function(elem) {// 所有前继兄弟
      return jQuery.dir(elem, "previousSibling");
    },
    siblings : function(elem) {// 所有兄弟
      return jQuery.sibling(elem.parentNode.firstChild, elem);
    },
    children : function(elem) {// 所有孩子
      return jQuery.sibling(elem.firstChild);
    },.. .. .. },
function(name, fn) {// 注册到jQuery对象中去,可以调用同名方法
      jQuery.fn[name] = function(selector) {
       var ret = jQuery.map(this, fn);// 每个元素都执行同名方法
       if (selector && typeof selector == "string")
         ret = jQuery.multiFilter(selector, ret);// 过滤元素集
      return this.pushStack(jQuery.unique(ret));// 构建jQuery对象
      };
    });

上一页  1 2 3 4 5 6 7 8  下一页

Tags:Jquery 源码 分析

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接