模仿一个 jQuery

2017-12-18  本文已影响0人  月光下的微笑
window.jQuery = function(nodeOrSelector) {
      let nodes = {}
      if (typeof nodeOrSelector === "string") {
        nodes = document.querySelectorAll(nodeOrSelector)
      } else {
        nodes = nodeOrSelector
      }
      nodes.setClass = function(setClass) {
        for (let key in setClass) {
          let method = setClass[key] ? "add": "remove"
            for (let i = 0; i < this.length; i++) {
              this[i].classList[method](key)
            }
        }
        return nodes
      }
      nodes.text = function(text){
        let texts = []
        if(text === undefined) {
          for (let i = 0; i < this.length; i++) {
            texts.push(this[i].textContent)
          }
          return texts
        }else if(text instanceof Array){
          for (let i = 0; i < this.length; i++) {
            this[i].textContent = text[i]
          }
          return nodes
        }else if(typeof text=== "string"){
          for (let i = 0; i < this.length; i++) {
            this[i].textContent = text
          }
          return nodes
        }
      }
      
      return nodes
    }
    window.$ = jQuery
    var $li = $('li')
    $li.setClass({pink:true, red: false})
    console.log($li.text())
    $li.text(["hehe","haha"])
    $li.text("haha")

分析:jquery 返回的是一个伪数组对象,这个伪数组会有一堆自己属性,那么可以按需写个 setClass,text

setClass:

text:

上一篇 下一篇

猜你喜欢

热点阅读