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

最新推荐文章于 2021-12-05 16:53:18 发布

toubidu

最新推荐文章于 2021-12-05 16:53:18 发布

阅读量325

点赞数

本文链接：https://blog.csdn.net/toubidu/article/details/50698196

版权

<!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);
//code
window.οnlοad=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>

toubidu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现简单的对dom操作封装

js 测试//duquery(function(w){//定义立即执行函数，传入全局对象window function duquery(id){//定义函数，实现去new的操作， function Duquery(id){//定义类 this.ele=document.getElementById(id);//id
复制链接

扫一扫