模拟封装jquery的api

封装一个函数

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)