jQuery 2.1.4版本的源码分析

Posted 2020-08-20 叫我大头

jQuery 2.1.4版本的源码分析

jquery中获取元素的源码分析

jQuery.each({
// 获取当前元素的父级元素
        parent: function(elem) {
            var parent = elem.parentNode;
//nodeType为11的节点类型是DocumentFragment
            return parent && parent.nodeType !== 11 ? parent : null;
        },
//获取所有的 父节点    这涉及到 dir 方法  
        parents: function(elem) {
            return jQuery.dir(elem, "parentNode");
        },
        parentsUntil: function(elem, i, until) {
            return jQuery.dir(elem, "parentNode", until);
        },
        next: function(elem) {
            return sibling(elem, "nextSibling");
        },
        prev: function(elem) {
            return sibling(elem, "previousSibling");
        },
        nextAll: function(elem) {
            return jQuery.dir(elem, "nextSibling");
        },
        prevAll: function(elem) {
            return jQuery.dir(elem, "previousSibling");
        },
        nextUntil: function(elem, i, until) {
            return jQuery.dir(elem, "nextSibling", until);
        },
        prevUntil: function(elem, i, until) {
            return jQuery.dir(elem, "previousSibling", until);
        },
　　　　　//返回所有的兄弟节点
        siblings: function(elem) {
            return jQuery.sibling((elem.parentNode || {}).firstChild, elem);
        },
        children: function(elem) {
            return jQuery.sibling(elem.firstChild);
        },
　　　　//返回框架里面的所有内容 或者 元素的所有子节点
        contents: function(elem) {
            return elem.contentDocument || jQuery.merge([], elem.childNodes);
        }
    }, function(name, fn) {
        jQuery.fn[name] = function(until, selector) {
            var matched = jQuery.map(this, fn, until);

            if(name.slice(-5) !== "Until") {
                selector = until;
            }

            if(selector && typeof selector === "string") {
                matched = jQuery.filter(selector, matched);
            }

            if(this.length > 1) {
                // Remove duplicates
                if(!guaranteedUnique[name]) {
                    jQuery.unique(matched);
                }

                // Reverse order for parents* and prev-derivatives
                if(rparentsprev.test(name)) {
                    matched.reverse();
                }
            }

            return this.pushStack(matched);
        };
    });

 

jQuery.extend({
// 寻找父级  直到 找到until结束  根据parents 方法可知 dir = parentNode
        dir: function(elem, dir, until) {
            var matched = [],
                truncate = until !== undefined;
　　　　　　　　//进入循环的条件 不是根节点 且   且吧父节点复制给elem
            while((elem = elem[dir]) && elem.nodeType !== 9) {
                if(elem.nodeType === 1) {
　　　　　　　　　　　　//跳出循环
                    if(truncate && jQuery(elem).is(until)) {
                        break;
                    }
                    matched.push(elem);
                }
            }
            return matched;
        },
　　　　　　　　　//通过上面的源码next方法可知  elem = nextSiblilng
        sibling: function(n, elem) {
            var matched = [];

            for(; n; n = n.nextSibling) {
                if(n.nodeType === 1 && n !== elem) {
                    matched.push(n);
                }
            }

            return matched;
        }
    });

这里说一下 nextSibling 与 nextElementSibling的区别

nextSibling ：返回元素之后的兄弟节点 （包含 注释 文本）

nextElementSibling：返回元素之后的兄弟节点 不包括注释 跟文本 且他的属性只为读

jQuery.noConflict源码分析

var
    // 将JQuery挂载到Windows对象下
        _jQuery = window.jQuery,

        // 将$挂载到Windows对象下
        _$ = window.$;
   // 当调用 Jquery.noConfict  deep ==false  那么  $ 别名失效  如果   deep==true 那么 JQuery 的别名失效
    jQuery.noConflict = function(deep) {
        if(window.$ === jQuery) {
            window.$ = _$;
        }

        if(deep && window.jQuery === jQuery) {
            window.jQuery = _jQuery;
        }

        return jQuery;
    };

    // Expose jQuery and $ identifiers, even in AMD
    // (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
    // and CommonJS for browser emulators (#13566)
    if(typeof noGlobal === strundefined) {
        window.jQuery = window.$ = jQuery;

2016-11-22   21:14:38