制作一个微型jQuery

制作一个微型jQuery来管中规豹一下真正的jQuery

addClass() 可将所有节点的 class 添加一个 属性

setText() 可将所有节点的及其后代的文本内容信息

getText() 可获取所有节点的及其后代的文本内容

window.jQuery = function(nodeOrSelector){
  //初始化nodes数组
  let nodes = {}
  /////////
  //创建一个伪数组，得到一个纯净的原型链指向 Object
  if(typeof nodeOrSelector === 'string'){
    temp = document.querySelectorAll(nodeOrSelector)
    for (var i = 0; i < temp.length; i++) {
      nodes[i] = temp[i]
    }
    nodes.length = temp.length
  }else if (nodeOrSelector instanceof Node){
    //为了保存一致，所以如果是一个节点也返回一个伪数组
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }
  //遍历nodes，获取并设置指定元素的class属性的值。
  nodes.addClass = function(node){
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].className = node
    }
  }
  //遍历nodes，设置所有节点的及其后代的文本内容
  nodes.setText = function(node){
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].textContent = node
    }
  }
  
  //遍历nodes，获取所有节点的及其后代的文本内容，push到texts数组里
  nodes.getText = function(){
    var texts = []
    for (let i = 0; i < nodes.length; i++) {
      texts.push(nodes[i].textContent)
    }
    return texts
  }

  return nodes
}
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

优化合并setText() 和 getText() 为 Text()

setText() 可将所有节点的及其后代的文本内容信息

getText() 可获取所有节点的及其后代的文本内容

window.jQuery = function(nodeOrSelector){
  //初始化nodes数组
  let nodes = {}
  /////////
  //创建一个伪数组，得到一个纯净的原型链指向 Object
  if(typeof nodeOrSelector === 'string'){
    temp = document.querySelectorAll(nodeOrSelector)
    for (var i = 0; i < temp.length; i++) {
      nodes[i] = temp[i]
    }
    nodes.length = temp.length
  }else if (nodeOrSelector instanceof Node){
    //为了保存一致，所以如果是一个节点也返回一个伪数组
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }
  //遍历nodes，获取并设置指定元素的class属性的值。
  nodes.addClass = function(node){
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].className = node
    }
  }
  
  //判断是否为undefined，遍历nodes，获取所有节点的及其后代的文本内容，push到texts数组里
  //否则，遍历nodes，设置所有节点的及其后代的文本内容
  nodes.Text = function(text){
     if(text === undefined){
       var texts = []
       for (let i = 0; i < nodes.length; i++) {
       texts.push(nodes[i].textContent)
      }
      return texts
    } else {
      for (let i = 0; i < nodes.length; i++) {
       nodes[i].textContent = text
      }
    }
  }
 

  return nodes
}
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

jQuery本质就是向函数传入一个dom对象，使用dom api组合拳返回更好用方法的新对象。