Jquery

vjQuery源码分析(一)
我们知道在jQuery中在使用选择器或者给元素绑定事件的时候都是通过$来操作的。那么基于JavaScript面向对象的思想,我们可以把jQuery看做一个函数或者对象,它里边存储了大量的方法,是一个类库。
$代表的就是jQuery
$.ajax() --------- jQuery.ajax() 当做对象来看就是jQuery调用它静态私有的属性和方法,同样我们可以再控制台输出一下dir(jQuery)看到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;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值