简单实现JQuery

    // jquery构造函数
    function Jquery(selector, context) {
      return new Jquery.fn.init(selector, context)
    }
    // 简化书写, 方便访问原型
    Jquery.fn = Jquery.prototype = {
      constructor: Jquery,
      length: 0,
      push: Array.prototype.push,
      slice: Array.prototype.slice,
    }

    // 实现获取dom元素类, init是一个构造函数，用来生成jquery的dom对象的
    Jquery.fn.init = function(selector, context) {
      if (!selector) return
      this.context = context || document
      this.elements = this.context.querySelectorAll(selector)
      this.length = 0
      // 遍历elements
      for (let i = 0; i < this.elements.length; i++) {
        this[i] = this.elements[i]
        this.length++
      } 
    }

    // init类的原型指向Jquery的原型，使实例化对象能访问Jquery原型上的方法
    Jquery.fn.init.prototype = Jquery.prototype
    
    // 为jquery添加静态方法或原型方法。
    Jquery.extends = Jquery.fn.extends = function(obj) {
      for (let key in obj) {
        this[key] = obj[key]
      }
    }

    // 将这些方法拓展到Jquery原型上， 那么init的实例化对象就能访问这些方法
    Jquery.fn.extends({
      html: function(text){
        for (let i = 0; i < this.length; i++) {
          this[i].innerHTML = text
        }
      // 返回this，打点调用
        return this
      },
      css: function(key, val) {
        if (typeof key === 'string') {
          for (let i = 0; i < this.length; i++) {
            this[i].style[key] = val
          }
        } else {
          for(let i = 0; i < this.length; i++) {
            for (let k in key) {
              this[i].style[k] = key[k]
            }
          }
        
        }
        return this
      }
    })
    // 简化Jquery书写
    const $ = Jquery
    // console.log($('p'))
    $('p')
    .css('color', 'red')
    .html('嘻嘻哈哈')