jQuery源码分析（一）

- 日理万妓 2022-12-29 14:15 203阅读 0赞

## jQuery源码分析（一） ##

> 我们知道在jQuery中在使用选择器或者给元素绑定事件的时候都是通过$来操作的。那么基于JavaScript面向对象的思想，我们可以把jQuery看做一个函数或者对象，它里边存储了大量的方法，是一个类库。  
> $代表的就是jQuery  
> $.ajax() --------- jQuery.ajax() 当做对象来看就是jQuery调用它静态私有的属性和方法，同样我们可以再控制台输出一下dir(jQuery)看到jQuery对象中存储属性和方法：  
> ![dir(jQuery)][dir_jQuery]  
> jQuery.prototype 原型上存储的就是供jQuery实例对象调用的方法。同样输出一下jQuery.prototype  
> ![jQuery.prototype][]

> $(’.box’).addClass()就是找的jQuery.prototype中的addClass方法那么我们就可以把  
> $(’.box’)看作是jQuery的一个实例对象，原型上的属性和方法只能被其所属类或所属类的实例调用。上源码

var
        version = "3.5.1",
        //这是在$也就是jQuery执行的时候做的操作 
        jQuery = function jQuery(selector, context) { 
            // selector:选择器类型 「字符串（选择器/HTML字符串）、函数、DOM元素对象...」
            // context:上下文，限制其获取的范围
            return new jQuery.fn.init(selector, context);
        };

// 原型方法：供实例调用 原型重定向
    jQuery.fn = jQuery.prototype = { 
        jquery: version,
        constructor: jQuery,
        // ...
    };
    //这两段代码意思是一样的
    var jQuery.fn = jQuery.prototype;
    	jQuery.prototype={ 
    		jquery: version,
        	constructor: jQuery
        };

> 上边这段代码表示：原型重定向以后会丢失之前的属性和方法，所以jQuery中自己给新原型加上了jquery和constructor属性。那么在jQuery执行的时候new jQuery.fn.init(selector, context)就是调用的new jQuery.prototype.init(selector, context))也就是原型上的init方法

var rootjQuery = jQuery(document),
       rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/,
       init = jQuery.fn.init = function (selector, context, root) { 
           var match, elem;
    
           // HANDLE: $(""), $(null), $(undefined), $(false)
           if (!selector) { 
               return this;
           }
    
           // Method init() accepts an alternate rootjQuery
           // so migrate can support jQuery.sub (gh-2101)
           root = root || rootjQuery;
    
           // Handle HTML strings
           if (typeof selector === "string") { 
               if (selector[0] === "<" &&
                   selector[selector.length - 1] === ">" &&
                   selector.length >= 3) { 
    
                   // Assume that strings that start and end with <> are HTML and skip the regex check
                   match = [null, selector, null];
    
               } else { 
                   match = rquickExpr.exec(selector);
               }
    
               // Match html or make sure no context is specified for #id
               if (match && (match[1] || !context)) { 
    
                   // HANDLE: $(html) -> $(array)
                   if (match[1]) { 
                       context = context instanceof jQuery ? context[0] : context;
    
                       // Option to run scripts is true for back-compat
                       // Intentionally let the error be thrown if parseHTML is not present
                       jQuery.merge(this, jQuery.parseHTML(
                           match[1],
                           context && context.nodeType ? context.ownerDocument || context : document,
                           true
                       ));
    
                       // HANDLE: $(html, props)
                       if (rsingleTag.test(match[1]) && jQuery.isPlainObject(context)) { 
                           for (match in context) { 
    
                               // Properties of context are called as methods if possible
                               if (isFunction(this[match])) { 
                                   this[match](context[match]);
    
                                   // ...and otherwise set as attributes
                               } else { 
                                   this.attr(match, context[match]);
                               }
                           }
                       }
    
                       return this;
    
                       // HANDLE: $(#id)
                   } else { 
                       elem = document.getElementById(match[2]);
    
                       if (elem) { 
    
                           // Inject the element directly into the jQuery object
                           this[0] = elem;
                           this.length = 1;
                       }
                       return this;
                   }
    
                   // HANDLE: $(expr, $(...))
               } else if (!context || context.jquery) { 
                   return (context || root).find(selector);
    
                   // HANDLE: $(expr, context)
                   // (which is just equivalent to: $(context).find(expr)
               } else { 
                   return this.constructor(context).find(selector);
               }
    
               // HANDLE: $(DOMElement)
           } else if (selector.nodeType) { 
               this[0] = selector;
               this.length = 1;
               return this;
    
               // HANDLE: $(function)
               // Shortcut for document ready
           } else if (isFunction(selector)) { 
               return root.ready !== undefined ?
                   root.ready(selector) :
    
                   // Execute immediately if ready is not present
                   selector(jQuery);
           }
    
           return jQuery.makeArray(selector, this);
       };
       //init的原型指向重定向以后的原型
    init.prototype = jQuery.fn;

> 基于原型和原型链的图：  
> ![调用时创建实例对象][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbGVfX18_size_16_color_FFFFFF_t_70]

[dir_jQuery]: /images/20221120/ff096cb8a2554880ad43b93a9377007b.png
[jQuery.prototype]: /images/20221120/f66cfc67c2ef457da74c30736d0c425e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbGVfX18_size_16_color_FFFFFF_t_70]: /images/20221120/03eae871cc05421598204f0facfa6758.png

发表评论取消回复

表情：

评论列表（有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery源码分析（一）

jQuery源码分析（一） > 我们知道在jQuery中在使用选择器或者给元素绑定事件的时候都是通过$来操作的。那么基于JavaScript面向对象的思想，我们可以把jQ

- 日理万妓/ 2022年12月29日 14:15/ 0 赞/ 204 阅读

相关 JQuery 源码分析 -1

jQuery的整体代码都是放在一个匿名函数里面的. (function(window, undefined) \{ //declare the reference of $/

清疚/ 2022年09月30日 14:54/ 0 赞/ 211 阅读

相关 [netty源码分析]--ChannelPipeline源码分析(一)

在前面我们已经分析过了netty的线程模型，了解了当线程池启动之后就会处于一种事件循环的状态，不断调用select() 函数，查询已注册的channel中的就绪事件。下面我

Love The Way You Lie/ 2022年09月29日 06:33/ 0 赞/ 343 阅读

相关 jQuery源码分析

一、jQuery如何做到不污染变量名并暴露出 $ 供用户使用 jQuery将变量和代码写进立即执行函数，通过函数来包裹所有的变量和方法，再在这个立即执行函数上将 jQuery

淩亂°似流年/ 2022年05月19日 05:56/ 0 赞/ 265 阅读

相关 jQuery源码分析系列：Callback深入

[jQuery源码分析系列：Callback深入][jQuery_Callback] 关于Callbacks [http://www.cnblogs.com/aaronj

àì夳堔傛蜴生んèń/ 2022年05月10日 23:20/ 0 赞/ 254 阅读

相关 jQuery源码学习一

学习前端也有一段时间了，闲暇之余决定进一步学习，从jquery源码学习开始。嗯，打开jquery.js，嗯，太多了，一脸懵！一步一步来吧！刚开始看了[艾伦 Aaro

桃扇骨/ 2022年03月25日 07:05/ 0 赞/ 348 阅读

相关 jQuery EasyUI源码结构分析

memo 两个`jQuery`的静态成员(插件) `$.messager` `$.parser` 其调用方法的格式：`$.plu

淡淡的烟草味﹌/ 2022年02月19日 17:57/ 0 赞/ 657 阅读

相关 jQuery源码结构分析

sum 官网介绍 jQuery is a fast, small, and feature-rich JavaScript library. I

╰+哭是因爲堅強的太久メ/ 2022年02月19日 17:53/ 0 赞/ 366 阅读

相关浅析jQuery源码特性的分析

`jQuery`的总体架构可以分为：入口模块、底层模块和功能模块。这里，我们以`jquery-1.7`为例进行分析。一.jquery的总体架构 ![watermark

清疚/ 2021年09月18日 01:36/ 0 赞/ 405 阅读

相关 jQuery源码阅读（一）---jQuery源码整体架构

之前用`jQuery`库写了两个小例子（结合Apache、PHP实现的简易聊天室以及音乐播放器），详见我的上两篇博客`jQuery aJax`技术以及PHP实现简单聊天室、利

淡淡的烟草味﹌/ 2021年06月26日 16:06/ 0 赞/ 662 阅读