08-模拟jQuery实现两个需求

一、需求如下

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

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

题目中要求将所有 div 的 class 添加一个 red，以及将所有 div 的 textContent 变为 hi。

二、解决思路

• jQuery本质就是一个构造函数然后接受一个参数（这个参数可能是节点）并返回一个nodes对象。
• 首先我们要能用var $div = $('div')获取到所有 div 。

window.jQuery = function (nodeOrSelector){
  let nodes = {}
  if(typeof nodeOrSelector === 'string'){
  var 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 = {o: nodeOrSelector,length = 1}
    }
  return nodes
  }
window.$ = jQuery

• 此时，var $div = $('div')中的$div 就是上述代码中的 nodes，是一个 value 为所有 div 的伪数组。而且，nodes 需要 return 出去，才能被外面的代码调用。
  $div.addClass('red')可将所有 div 的 class 添加一个 red，$div.setText('hi')可将所有 div 的 textContent 变为 hi，我们给 nodes 添加两个 hash ，即，名为 addClass 和 setText 的函数

nodes.addClass = function(){
 
}
nodes.setText = function(){
 
}

三、完整代码

window.jQuery = function (nodeOrSelector){
  var nodes = {}
  if(typeof nodeOrSelector === 'string'){
  var 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 = {o: nodeOrSelector,length: 1}
  }
  nodes.addClass = function(classes){
    for(let i = 0; i < nodes.length; i++){
      nodes[i].classList.add(classes)
    }
  }
  nodes.setText = function(text){
    for(let i = 0; i < nodes.length; i++){
    nodes[i].textContent  = text
    }
  }
  return nodes
}
window.$ = jQuery
var $div = $('div')
$div.addClass('red') 
$div.setText('hi')

四、总结

• 在我看来jQuery就是将一个DOM对象重新包装成jQuery对象，这个jQuery对象中包含了许多DOM中不能轻松实现的方法（函数），可以省去很多复杂的代码。
• jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。
• 使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。
• 首先，声明一个全局函数jQuery，函数通过传参数，通过判断参数的类型及参数是否为节点元素来获取对应的nodes，函数里写有addClass方法和setText方法。
• .addClass方法通过传参数（样式的className），遍历所有nodes并加上提供的class类
• .setText方法，把文本内容当作参数传递到函数中，遍历所有的nodes并通过textContent属性改变标签的文本内容