JS实现简单的对dom操作封装

来源：互联网发布：数据库自学书籍编辑：程序博客网时间：2024/06/05 04:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js</title></head><body>    <div id="aa">测试</div></body><script type="text/javascript">//duquery(function(w){//定义立即执行函数，传入全局对象window        function duquery(id){//定义函数，实现去new的操作，            function Duquery(id){//定义类            this.ele=document.getElementById(id);//id查找                    return this;//返回对象        };        Duquery.prototype.html=function(val){//利用原型添加设置html的方法            this.ele.innerHTML=val;            return this;//返回对象，执行后可链式操作        };        Duquery.prototype.attr=function(key,val){//添加设置属性的方法            this.ele.setAttribute(key,val);            return this;        };        Duquery.prototype.css=function(key,val){//添加设置样式的方法            this.ele.style[key]=val;            return this;        };        Duquery.prototype.on=function(event,fun){            this.ele.addEventListener(event,fun,false);            return this;        };            return new Duquery(id);//去new处理，返回实例对象    };        duquery.wait=function(time,fun){//添加延时静态方法，可通过函数名直接使用        setTimeout(fun,time);    };        duquery.each=function(arr,callback){//添加遍历迭代静态方法        for(var key in arr){            callback(key,arr[key]);        };    };        w.$$=w.duquery=duquery;//类追加到全局对象自定义属性上，可直接调用    })(window);//codewindow.onload=function(){    //类的使用和操作    $$("aa").attr("bb","456").css("height","200px");    $$.wait(5000,function(){$$("aa").html("好的")});    $$("aa").on("click",function(){        $$("aa").html("事件").css("color","#ffa");    });    $$.each([1,2,3,4,5,6],function(index,val){        if(val==3){            alert(val);        }else{        };    });};</script></html>
0 0