jq对象原生对象,自制简易JQ

152 阅读1分钟

jq对象转原生对象

    let h1=document.querySelector('h1') 

    jq对象转原生的方法 

        第一种 $(h1)[0]

        第二种 使用$(h1).get(0)方法,可以把单个的jq元素转成原生DOM元素. 

自制简易JQ

   (function(){
        function $(element){
            let a=document.querySelector(element)
            a.css=function(sx,value){
                this.style[sx]=value
            }
            a.show=function(){
                this.style.display='block'
            }
            a.hide=function(){
                this.style.display='none'
            }
            a.addClass=function(qqq){
                /* 原生的className会覆盖之前的类名 */
                this.className=this.className+' '+qqq
            }
            a.removeclass=function(qqq){
                this.className= this.className.replace(qqq,'')
            }

            a.click=function(callback){
                this.onclick=callback
            }
            return a
        }
        window.$ = $;
    })()
    
    
    

$extend用法

          <script>
                /* var car1={
                    color:{name:'白色',price:'100w'}
                } */
                var car2={
                    carname:'Porsche',
                    color:{name:'蓝色'}
                }
                /* console.log($.extend(true,car1,car2));
                 */
                function carcar(obj){
                    var car1={
                    color:{name:'白色',price:'100w'}
                    }
                    $.extend(true,car1,obj)
                    document.write(`颜色:${car1.color.name}`);
                    document.write(`价格:${car1.color.price}`);
                }
                carcar(car2)
          </script>