B\S备忘录24——Jquery原理简单作死向分析

来源：互联网发布：绘画知乎编辑：程序博客网时间：2024/05/16 15:20

最近是在学习JQuery，要是我早点学习了就不会一个一个的写document.getElementByID了，在学习JS的视频的时候就有一个例子，是封装了一个JS，也是实现了一个$符就能直接获取到元素，所以也是很好奇，查了一下JQuery实现的原理。

进入JQuery的源码中发现了一句话

var jQuery = window.jQuery = window.$ = function (selector, context) {        // The jQuery object is actually just the init constructor 'enhanced'        return new jQuery.fn.init(selector, context);    };

每次申明一个jQuery对象的时候，返回的是jQuery.prototype.init对象，很多人就会不明白，init明明是jQuery.fn的方法啊，实际上这里不是方法，而是init的构造函数，因为js的prototype对象可以实现继承，加上js的对象只是引用不会是拷贝，new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的，只是有没有执行到init的不同。当我们使用选择器的时候$(selector,content)，就会执行init(selectot,content)。

jQuery.fn = jQuery.prototype = {        init: function (selector, context) {            // 确认选择器已经提供            selector = selector || document;            // 处理DOM元素            if (selector.nodeType) {                this[0] = selector;                this.length = 1;                return this;            }            // 处理HTML字符串            if (typeof selector == "string") {                // 判断处理的是HTML字符串还是ID                var match = quickExpr.exec(selector);                // 做匹配，如果是ID                if (match && (match[1] || !context)) {                    // HANDLE: $(html) -> $(array)                    if (match[1])                        selector = jQuery.clean([match[1]], context);                        // HANDLE: $("#id")                    else {                        var elem = document.getElementById(match[3]);                        // 确认元素已经加载                        if (elem) {                            // Handle the case where IE and Opera return items                            // 如果是根据Name选择                            if (elem.id != match[3])                                return jQuery().find(selector);                            // 否则直接将元素注入到JQuery对象中                            return jQuery(elem);                        }                        selector = [];                    }                    // <span style="color: rgb(0, 130, 0); font-family: 'Courier New', Courier, monospace; line-height: 13.1999998092651px;">非id的形式.在context中或者是全文查找</span>                    // (which is just equivalent to: $(content).find(expr)                } else                    return jQuery(context).find(selector);                // HANDLE: $(function)                // Shortcut for document ready            } else if (jQuery.isFunction(selector))                return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector);            return this.setArray(jQuery.makeArray(selector));        }

这里是init这个方法的具体代码，反正我是没怎么看懂，查了查资料发现，大概就是根据$（）中输入的ID进行分类型的查询，查询完成之后返回一个JQuery对象，然后我们就可以开心的连缀了~

0 0