JS实现简单的对dom操作封装
2016-02-19 15:13
816 查看
<!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.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>
相关文章推荐
- 5个典型的JavaScript面试题
- 最流行的前端框架、库、JavaScript模板引擎
- js中判断 NaN,undefined,null和转数字,正则去除千分号等
- 点击操作实现表格多选的js
- 关于java和javascript交互中的日期处理问题汇总
- javascript Array.map 源码解读
- 从零开始写一款javascript插件(一)——tab选项卡
- js性能-DOM编程之重绘和重排
- 双击锁定,单击排序的js实现
- 史上最全javascript parseInt函数详解
- jsp文件中charset和pageEncoding的区别
- js刷新当前页面
- 归纳下js面向对象的几种常见写法
- js动画(4)——多物体运动
- Javascript中的循环变量声明,到底应该放在哪儿?
- json
- JS Window
- JSTL EL 详解
- 关于URL编码/javascript/js url 编码/url的三个js编码函数
- javascript实现选项卡切换效果