jQuery基本实现思路

转载来至方应杭github

1 JS 基本知识

1.1 数组属于对象吗？
1.2. 函数属于对象吗？
1.3. 给数组加一个属性行吗？

  var array = []
  array.xxx = 2

2 DOM API 基本知识

2.1. 如果通过 ID 获取一个元素

  document.getElementById(id)
  document.querySelector(id)
  document.querySelectorAll(id)

2.2. 如何改变一个元素的属性（name、id、class、style）

  div.name ='xxx'
  div.id = 'yyy'
  div.classList.add
  div.style.border = '1px solid red'

API（结果）
// 我们的代码

  window.jQuery = ...
  window.$ = window.jQuery

// 别人的代码

  window.jQuery === window.$ 

  var $xxx = $('#xxx') // 得到对应的元素的封装

  var div = $xxx[0]

  $xxx.on('click', function(){})
  $xxx.addClass('c1')
  $xxx.removeClass('c2')
  $xxx.toggleClass('c3')
  $xxx.text()  // innerText
  $xxx.text('hi') // 就会将 xxx 元素的内容设置为 hi
  $xxx.html() // innerHTML
  $xxx.html('<b>bold</b>') // 插入 html 到元素中

  $xxx.addClass('c4').text('hi').on('click', function(){})

  $xxx.on('click', function(){})

  $xxx.find('p').end() === $xxx

// 我的代码

  window.jQuery = function(selectorOrElements){
    var array = []

    if(typeof selectorOrElements === 'string'){
      var elements = document.querySelectorAll(selectorOrElements)

      for(var i=0; i<elements.length; i++){
        array.push(elements[i])
      }
    }else if(selectorOrElements instanceof Array){
      for(var i=0; i<selectorOrElements.length; i++){
        array.push(selectorOrElements[i])
      }
      array.previousSelection = selectorOrElements.previousSelection
    }

    array.on = function(eventType, fn){
      for(var i=0; i<array.length; i++){
        array[i].addEventListener('click', fn)
      }
      return array
    }
    array.addClass = function(className){
      for(var i=0; i<array.length; i++){
        array[i].classList.add(className)
      }
      return array
    }
    array.removeClass = function(className){
      for(var i=0; i<array.length; i++){
        array[i].classList.remove(className)
      }
      return array
    }
    array.toggleClass = function(className){
      for(var i=0; i<array.length; i++){
        array[i].classList.toggle(className)
      }
      return array
    }
    array.text = function(value){
      if(value === undefined){
        var result = []
        for(var i=0; i<array.length; i++){
          result.push(array[i].textContent)
        }
        return result
      }else{
        for(var i=0; i<array.length; i++){
          array[i].textContent = value
        }
        return array
      }

    }
    array.html = function(htmlString){
      if(htmlString === undefined){
        var result = []
        for(var i=0; i<array.length; i++){
          result.push(array[i].innerHTML)
        }
        return result
      }else{
        for(var i=0; i<array.length; i++){
          array[i].innerHTML = htmlString
        }
        return array
      }
    }

    array.find = function(selector){
      var array2 = []
      for(var i=0; i<array.length; i++){
        var elements = array[i].querySelectorAll(selector)
        for(var j=0; j<elements.length; j++){
          array2.push(elements[j])
        }
      }
      array2.previousSelection = array
      var _array = jQuery(array2)
      return _array
    }

    array.end = function(){
      return array.previousSelection
    }

    return array
  }
  window.$ = window.jQuery