你的位置:首页 > Java教程

[Java教程]JS实现简单的对dom操作封装


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html //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>

js非常简单的处理,实现了最简单链式的操作,和去new的处理。