美文网首页
模拟封装jquery的api

模拟封装jquery的api

作者: 土土y | 来源:发表于2018-11-15 23:03 被阅读0次

    封装一个函数

    function addClass(div,name){

        if(typeof div==='string'){

            var node=document.querySelectorAll(div)

             node.forEach((v,k){ node[k].classList.add(name) }) }

        }else if(div instanceof Node) {

            var node=document.querySelectorAll(div)

        } 

    命名空间

    window.ss={addClass:addClass}

     ss.addClass('div',"red")

     扩展Node

    Node.prototype.addClass=function(name){

        this.classList.add(name)

    }

    div.addClass("red")

    新的接口

    window.jquery=function(node){

        return{

            addClass:function(name){

                if(typeof node==='string'){

                    var node1=document.querySelectorAll(node)                 node1.forEach((v,k)=>{ node1[k].classList.add(name) })

                }else if(node instanceof Node){ node.classList.add(name) }

            },

            setText:function(name){

                if(typeof node==='string'){

                    var node1=document.querySelectorAll(node)

                    node1.forEach((v,k)=>{ node1[k].innerText=name })

                }else if(node instanceof Node){

                    console.log(node) node.innerText=name

                }

             }

        }

    }

    window.$=jquery;

    $('div').addClass('red')

    $('div').setText("Hi")

    选择器是字符串,另一种是node、dom对象

    相关文章

      网友评论

          本文标题:模拟封装jquery的api

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