美文网首页
简单实现jQuery API

简单实现jQuery API

作者: wfcsm | 来源:发表于2019-03-29 20:16 被阅读0次

具体的思路:
1.封装一个函数,传入节点或者选择器字符串,可以返回伪数组,伪数组中包含获取到的dom元素
==> 对函数的参数进行判断,并构造一个临时对象,将节点或者遍历选择器得到的节点存入临时对象并返回
2.在这个返回的对象上,可以添加上一下方法操作dom

 window.jQuery = function (selectOrNode) {
        let nodes = {}      //创建一个空对象,最后返回这个对象
        if (typeof selectOrNode === 'string') {   //判断传入的是选择器还是Node节点
            let items = document.querySelectorAll(selectOrNode)
            for (let i = 0; i < items.length; i++) {
                nodes[i] = items[i]
            }
            nodes.length = items.length  //添加长度标记,方便后边使用
        } else if (selectOrNode instanceof Node) {
            nodes.length = 1
            nodes[0] = selectOrNode
        }

        nodes.addClass = function (classes) {
            for (let i in classes) {
                let name = classes[i] ? "add" : "remove"
                for (let l = 0; l < nodes.length; l++) {
                    nodes[l].classList[name](i)
                }
            }
        }
        nodes.text=function(text){
            if(text === undefined){
                var texts=[]
                for(let i=0;i<nodes.length;i++){
                    console.log(nodes[i])
                    texts.push(nodes[i].textContent)
                }
                console.log(texts)
                return text
            }else {
                for(let i=0;i<nodes.length;i++){
                    nodes[i].textContent = text
                }
            }
        }
        return nodes
    }

  let classes = {
        blue: true,
        a: false,
        c: true
    }

    let node2 = window.jQuery("ul>li")

    node2.addClass.call(node2, classes)
    node2.text.call(node2,"11")





相关文章

网友评论

      本文标题:简单实现jQuery API

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