美文网首页
模仿一个 jQuery

模仿一个 jQuery

作者: 月光下的微笑 | 来源:发表于2017-12-18 13:51 被阅读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:

    • 接受一个对象结构如下{className:true, className: false}

      className 为你需要添加或删除的 class 名;

      true or false 为选择添加或者删除的操作;

    text:

    • 当输入为数组时候:
      • 把获取元素的文本内容设置为对应数组的值;
    • 当不输入的时候:
      • 获取元素的文本内容;
    • 当输入为字符串的时候:
      • 所有的元素都设置为输入的值;

    相关文章

      网友评论

          本文标题:模仿一个 jQuery

          本文链接:https://www.haomeiwen.com/subject/tqqmwxtx.html