初见jquery

addClass()

function addClass(nodes,klass) {
if(typeof (nodes) === 'string'){
 nodes = document.querySelectorAll(nodes);
}
      for(let i =0;i<nodes.length;i++){
        nodes[i].classList.add(klass);
}
}

接收一个字符串或者节点，将字符串添加到每个nodes的class中。

setText（）

function setText(nodes,text) {
if(typeof (nodes) === 'string'){
 nodes = document.querySelectorAll(nodes);
}
      for(let i =0;i<nodes.length;i++){
        nodes[i].textContent = text;
      }
    }

接收一个字符串或者节点，将每个nodes中的文本改为传入的字符串。

将这两个函数放入一个对象里

var dom = {}
dom. addClass(node,klass)
dom.setText(node,text) 

这就是一个命名空间。
可以不覆盖其他人的变量（addClass、setText），也方便称统一呼多个api。

每次调用都需要dom开头还需要传入一个nodes不方便于是可以改写成下面这样。

window.jQuery = function(nodes){
if(typeof (nodes) === 'string'){
 nodes = document.querySelectorAll(nodes);
}
  return {
element:nodes;
    addClass:function(klass) {
      for(let i =0;i<nodes.length;i++){
        nodes[i].classList.add(klass);
      }
    },
    setText:function(text) {
      for(let i =0;i<nodes.length;i++){
        nodes[i].textContent = text;
      }
    }
  };
}

nodes从开始就传入之后可以不用再写了。
element返回的是经过dom api处理的节点。
传入的字符串经过处理传出的节点会带上addClass、setText方法。
addClass与 setText本身并没有nodes参数而是调用的自身外部的nodes参数，这就形成了一个闭包。

使用方法

let div = window.jQuery('div')

每次调用window.jQuery太长于是可以将此缩写

window.$ = window.jQuery;
//于是可以写成
let div = $('div')

最后变成如下

window.jQuery = function(nodes){
  if(typeof (nodes) === 'string'){
   nodes = document.querySelectorAll(nodes);
  }
  return {
    element:nodes;
    addClass:function(klass) {
      for(let i =0;i<nodes.length;i++){
        nodes[i].classList.add(klass);
        }
    },
    setText:function(text) {
      for(let i =0;i<nodes.length;i++){
        nodes[i].textContent = text;
      }
    }
  };
}
window.$ = jQuery

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

这些代码将旧的api(难用，需要大量反复使用的)进行组合变为一个新的api(简洁，好用)。

使window.jQuery成为一个构造函数，返回一个新的对象 在新的对象里有两个函数addClass，setText和一个 element属性，使$div使用addClass，setText两个函数。