原生js模拟jQuery选择器功能及方法

模拟jQuery选择器功能及方法

查看jQuery源码可以发现，jQuery中没有使用new操作符来创建新对象，而是采用调用jQuery原型中init()函数的方式返回一个新对象。
熟悉jQuery的人应该知道，几乎jQuery所有操作，都是从$符号开始，当作为元素选择器的时候，操作结果返回的是一个jQuery对象。以下是个人模拟的写法：

//模拟jQuery选择器功能
    (function () {
      function jQuery(selector) {
        return new jQuery.prototype.init(selector);
      }
      //init是存在jQuery原型上的一个方法
      jQuery.prototype.init = function (selector) {
        //选取dom原生的js
        this.length = 0;
        if (selector == null) {
          return this;
        }
        if (typeof selector == 'string' && selector.indexOf('.') != -1) {
          var dom = document.getElementsByClassName(selector.slice(1));
        } else if (typeof selector == 'string' && selector.indexOf("#") != -1) {
          var dom = document.getElementById(selector.slice(1));
        }
        if (selector instanceof HTMLElement || dom.length == undefined) {
          this[0] = dom || selector;
          this.length++;
        } else {
          for (var i = 0; i < dom.length; i++) {
            this[i] = dom[i];
            this.length++;
          }
        }
      }
      jQuery.prototype.css = function (propertyname, value) {
        for (var i = 0; i < this.length; i++) {
          //判断传入的值如果为对象
          if (Object.prototype.toString.call(propertyname) == '[object Object]') {
            //新数组存储对象的键和值
            var arr = []
            //遍历对象键和值存入新数组
            for (key in propertyname) {
              // console.log(i);
              arr.push(key)
              arr.push(propertyname[key])
            }
            //遍历数组给目标改变样式
            for (var j = 0; j < arr.length; j++) {
              this[i].style[arr[j]] = arr[j + 1];
            }
          }
          //判断传入的值是两个值，设置css属性
          if (arguments.length == 2) {
            this[i].style[arguments[0]] = arguments[1]
          }
          //判断传入的值是一个值表示返回 CSS 属性
          if (arguments.length == 1) {
            return window.getComputedStyle(this[i]).getPropertyValue(arguments[0])
            // return window.getComputedStyle(this[i]).arguments[ 0];
          }
        }
        return this;
      }
      //get实现
      jQuery.prototype.get = function (num) {
        //参数为空
        if (num == null) {
          //返回一个真数组
          return [].slice.call(this, 0)
        } else {
          if (num >= 0) {
            return this[num];
          } else {
            return this[this.length + num]
          }
        }
      }
      //eq实现
      jQuery.prototype.eq = function (num) {
        var dom = num != null ? (num >= 0 ? this[num] : this[num + this.length]) : null
        return jQuery(dom)
      }
      //add实现
      jQuery.prototype.add = function (adddom) {
        if (adddom instanceof HTMLElement) {
          this[this.length] = adddom;
          this.length++;
          return this;
        }
        if (typeof adddom == 'string') {
          var arr = adddom.split(',')
          for (var j = 0; j < arr.length; j++) {
            this[this.length] = jQuery(arr[j])[0];
            this.length++;
          }
          return this;
        }
        if (adddom.__proto__.constructor instanceof Object) {
          this[this.length] = adddom[0];
          this.length++;
          return this;
        }
      }
      //end实现
      jQuery.prototype.end = function () {
        this[this.length] = this[0].parentNode
        this.length++;
        return jQuery(this[this.length - 1]);
      }
      //init对象的原型指向jQuery原型
      jQuery.prototype.init.prototype = jQuery.prototype
      window.$ = window.jQuery = jQuery;
    })()