直播:自制jQuery


(方方) #1

自制 jQuery

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