问题：

  1. jQuery对象和DOM对象的区别？
  2. jQuery对象如何转成DOM对象？ DOM对象如何转为jQuery对象？
  3. jQuery选择器接口的使用？
    $(d)，d可以是：对象，function，字符串（id，HTML元素标签等），空（创建jQuery对象）；

image.png
image.png
带着以上问题去学习jQuery源码。 

  1. console.log($('#box'));  // 查询
  2. console.log($('<a>'));   // 创建
  1.  // jQuery原型上扩展属性
  2.    jQuery.fn = jQuery.prototype = {
  3.        jQuery: version,
  4.        length: 0,
  5.        selector: '',
  7.        init: function(selector, context) {
  8.           context = context || document;
  9.           var index = 0, elem, match;
  11.           if(typeof selector === 'string') {  //创建DOM节点，或者查询DOM节点
  12.             if(selector.charAt(0) === '<' && selector.charAt(selector.length-1) === '>' && selector.length >=3) {
  13.                 match = [selector];
  14.             }
  16.             if(match) { //创建DOM节点
  17.                jQuery.merge(this, jQuery.parseHTML(selector, context));
  18.             }
  19.             else { // 查询DOM节点
  20.                elem = document.querySelectorAll(selector);
  21.                var elems = Array.prototype.slice.call(elem);
  23.                this.length = elems.length;
  24.                for(; index < elems.length; index++) {
  25.                   this[index] = elems[index];
  26.                }
  28.                this.context = context;
  29.                this.selector = selector;
  30.             }
  31.           }
  32.           else if(selector.nodeType) {    // selector为对象，DOM节点,将DOM对象转为jQuery对象，设置length，数组[0],context属性
  33.              this.length = 1;
  34.              this.context = this[0] = selector;
  35.              return this;
  36.           }
  37.           else if (toString.call(selector) === '[object Function]') {
  38.              // 将传入的function加入到funtionList，待页面加载完毕，执行funtionList里function
  39.           }
  40.        },
  42.        css: function() {
  43.           console.log('style...');
  44.        }
  45.    };
  47.    jQuery.extend({
  48.         isPlainObject: function(obj) {
  49.            return toString.call(obj) === "[object Object]";
  50.         },
  52.         isArray: function(obj) {
  53.            return toString.call(obj) === "[object Array]";
  54.         },
  56.         // 合并数组
  57.         merge: function(first, second) {
  58.            var l = second.length;
  59.            var i = first.length;
  60.            var j = 0;
  62.            if(typeof l === 'number') {
  63.               for(; j<l; ) {
  64.                 first[i++] = second[j++];
  65.               }
  66.            }
  67.            else {
  68.               while(second[j] !== undefined) {
  69.                 first[i++] = second[j++];
  70.               }
  71.            }
  73.            first.length = i;
  74.            return first;
  75.         },
  77.         // 创建DOM元素，以数组形式返回
  78.         parseHTML: function(data, context) {
  79.            if(!data || typeof data !== 'string') {
  80.                return null;
  81.            }
  83.            // 过滤标签
  84.            var parse = rejectExp.exec(data);
  85.            //console.log(parse);
  86.            return [context.createElement(parse[1])];
  87.         }
  89.    });