实现一个 jQuery 的 API

1.需求分析

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

2.思路分析

思路：

• 参数判断函数，找到节点，判断参数形式

• addClass函数编写，实现查找节点并添加样式

• setText 函数编写，实现查找节点并设置内容

• 将以上函数封装

3.具体方法

3.1 findNodesOrSelector 函数，寻找节点

如果typeof nodeOrSelector是string,那么 作为选择器,我们就用document.querySelectorAll来获取所有的元素,返回一个伪数组,然后遍历这个数组把每个value放到nodes里.

如果nodeOrSelector instanceof 是node 那么将nodeOrSelector放到nodes里作为nodes[0]

function findNodesOrSelector(nodeOrSelector){
  let nodes ={}
  //判断传进来的参数是否为  节点还是字符串
  if(typeof nodeOrSelector ==='string' ){  //当传入得到参数为字符串
  let temp = document.querySelectorAll(nodeOrSelector)  //伪数组
  for(let i=0;i<temp.length;i++){
   nodes[i] = temp[i]
  }
 nodes.length = temp.length
 } else if(nodeOrSelector instanceof Node){ //当传入得到参数为节点时
  nodes = {
   0:nodeOrSelector,
   length:1
   }
 }
 return nodes
}

3.2 addClass 函数编写，实现查找节点并添加样式

因为给找到的节点添加样式，所以要传入一个参数；

同时，对已经找到的节点一般情况下不是只有一个，那么我们添加样式的时候也是不止给一个节点添加样式，因此，需要对每个节点分别添加，就要依次对节点进行遍历。

 function addClass(classes){  
    classes.forEach((value)=>{   //使用箭头函数，第一个参数是this即classes
    for(let i=0;i<nodes.length;i++){     
        nodes[i].addClassList.add(value) 
       }
   })  
}

3.3 setText 函数编写，实现查找节点并设置内容

和上面的方法一样，先找到需要改变的节点，对它依次遍历后再设置其内容

同时，传入一个参数，即需要改变之后的参数

function setText(text){
  for(let i=0;i<nodes.length;i++){
     nodes[i].textContext = text
 }
}

4.封装

window.jQuery = function(nodeOrSelector){
    let nodes={}
    //判断传进来的参数是否为  节点还是字符串
 if(typeof nodeOrSelector ==='string' ){
  let temp = document.querySelectorAll(nodeOrSelector) //伪数组
  for(let 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.addClass = function (classes){
  classes.forEach((value)=>{
   for(let i=0;i < nodes.length;i++){    
    nodes[i].classList.add(value)
   }
  })
 }
​
 nodes.setText = function(text){
  for(let i =0;i<nodes.length;i++){
   nodes[i].textContent = text
  }
 }
​
 return nodes
}

以上，就完成了任务需求。