初探jQuery

实现一个jQuery的API

• 传一个选择器或节点

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添加类，并且遍历nodes

  nodes.addClass = function(classes) {
     var classes = [classes] 
      classes.forEach((value) => {
        for (let i = 0; i < nodes.length; i++) { 
          nodes[i].classList.add(value)
        }
      })
    }

• 遍历nodes，并且改变类的文本

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

• 调用API操作nodes

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

完整代码

  
  



  
red
  
red
  
red
  
red
  
red