摘要：源碼中接受個(gè)參數(shù)，空參數(shù)，這個(gè)會(huì)直接返回一個(gè)空的對(duì)象，。，這是一個(gè)標(biāo)準(zhǔn)且常用法，表示一個(gè)選擇器，這個(gè)選擇器通常是一個(gè)字符串，或者等，表示選擇范圍，即限定作用，可為，對(duì)象。，會(huì)把普通的對(duì)象或?qū)ο蟀b在對(duì)象中。介紹完入口，就開始來看源碼。

歡迎來我的專欄查看系列文章。

前面一講總體架構(gòu)已經(jīng)介紹了 jQuery 的基本情況，這一章主要來介紹 jQuery 的入口函數(shù) jQuery.fn.init。

由于這個(gè)函數(shù)直接和 jQuery() 的參數(shù)有關(guān)，先來說下能接受什么樣的參數(shù)。源碼中接受 3 個(gè)參數(shù)：

init: function (selector, context, root) {
  ...
}

jQuery()，空參數(shù)，這個(gè)會(huì)直接返回一個(gè)空的 jQuery 對(duì)象，return this。

jQuery( selector [, context ] )，這是一個(gè)標(biāo)準(zhǔn)且常用法，selector 表示一個(gè) css 選擇器，這個(gè)選擇器通常是一個(gè)字符串，#id 或者 .class 等，context 表示選擇范圍，即限定作用，可為 DOM，jQuery 對(duì)象。

jQuery( element|elements )，用于將一個(gè) DOM 對(duì)象或 DOM 數(shù)組封裝成 jQuery 對(duì)象。

jQuery( jQuery object|object )，會(huì)把普通的對(duì)象或 jQuery 對(duì)象包裝在 jQuery 對(duì)象中。

jQuery( html [, ownerDocument ] )，這個(gè)方法用于將 html 字符串先轉(zhuǎn)成 DOM 對(duì)象后在生成 jQuery 對(duì)象。

jQuery( html, attributes )，和上一個(gè)方法一樣，不過會(huì)將 attributes 中的方法和屬性綁定到生成的 html DOM 中，比如 class 等。

jQuery( callback )，此方法接受一個(gè)回掉函數(shù)，相當(dāng)于 window.onload 方法，只是相對(duì)于。

介紹完入口，就開始來看源碼。

init: function (selector, context, root) {
  var match, elem;

  // 處理: $(""), $(null), $(undefined), $(false)
  if (!selector) {
    return this;
  }
  // rootjQuery = jQuery( document );
  root = root || rootjQuery;

  // 處理 HTML 字符串情況，包括 $("
")、$("#id")、$(".class")
  if (typeof selector === "string") {

  //此部分拆分，留在后面講

  // HANDLE: $(DOMElement)
  } else if (selector.nodeType) {
    this[0] = selector;
    this.length = 1;
    return this;

  // HANDLE: $(function)
  } else if (jQuery.isFunction(selector)) {
    return root.ready !== undefined ? root.ready(selector) :

    // Execute immediately if ready is not present
    selector(jQuery);
  }

  return jQuery.makeArray(selector, this);
}

上面有幾點(diǎn)需要注意，root = root || rootjQuery;，這個(gè)參數(shù)在前面介紹用法的時(shí)候，就沒有提及，這個(gè)表示 document，默認(rèn)的話是 rootjQuery，而 rootjQuery = jQuery( document )。

可以看出，對(duì)于處理 $(DOMElement)，直接是把 jQuery 當(dāng)作一個(gè)數(shù)組，this[0] = DOMElement。其實(shí)，這要從 jQuery 的基本構(gòu)造講起，我們完成一個(gè) $("div.span") 之后，然后一個(gè) jQuery 對(duì)象（this），其中會(huì)得到一組（一個(gè)）DOM 對(duì)象，jQuery 會(huì)把這組 DOM 對(duì)象當(dāng)作數(shù)組元素添加過來，并給一個(gè) length。后面就像一些鏈?zhǔn)胶瘮?shù)操作的時(shí)候，若只能對(duì)一個(gè) DOM 操作，比如 width、height，就只對(duì)第一個(gè)元素操作，若可以對(duì)多個(gè) DOM 操作，則會(huì)對(duì)所有 DOM 進(jìn)行操作，比如 css()。

jQuery 大題思路如下，這是一個(gè)非常簡單點(diǎn)實(shí)現(xiàn)：

jQuery.prototype = {
  // 簡單點(diǎn)，假設(shè)此時(shí) selector 用 querySelectorAll
  init: function(selector){
    var ele = document.querySelectorAll(selector);
    // 把 this 當(dāng)作數(shù)組，每一項(xiàng)都是 DOM 對(duì)象
    for(var i = 0; i < ele.length; i++){
      this[i] = ele[i];
    }
    this.length = ele.length;
    return this;
  },
  //css 若只有一個(gè)對(duì)象，則取其第一個(gè) DOM 對(duì)象
  //若 css 有兩個(gè)參數(shù)，則對(duì)每一個(gè) DOM 對(duì)象都設(shè)置 css
  css : function(attr,val){
    for(var i = 0; i < this.length; i++){
      if(val == undefined){
        if(typeof attr === "object"){
          for(var key in attr){
            this.css(key, attr[key]);
          }
        }else if(typeof attr === "string"){
          return getComputedStyle(this[i])[attr];
        }
      }else{
        this[i].style[attr] = val;
      }
    }
  },
}

所以對(duì)于 DOMElement 的處理，直接將 DOM 賦值給數(shù)組后，return this。

jQuery.makeArray 是一個(gè)綁定 數(shù)組的函數(shù)，和上面的原理一樣，后面會(huì)談到。

在介紹下面的內(nèi)容之前，先來介紹一個(gè) jQuery 中一個(gè)識(shí)別 Html 字符串的正則表達(dá)式，

var rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]+))$/;
rquickExpr.exec("
") //["
", "
", undefined]
rquickExpr.exec("
") //["
", "
", undefined]
rquickExpr.exec("#id") //["#id", undefined, "id"]
rquickExpr.exec(".class") //null

上面這一系列的正則表達(dá)式 exec，只是為了說明 rquickExpr 這個(gè)正則表達(dá)式執(zhí)行后的結(jié)果，首先，如果匹配到，結(jié)果數(shù)組的長度是 3，如果匹配到

var rsingleTag = ( /^<([a-z][^/