函数$的扩展，返回带有常用方法的HTML元素对象

最新推荐文章于 2024-05-23 20:09:14 发布

我家有奥特曼

最新推荐文章于 2024-05-23 20:09:14 发布

阅读量365

点赞数

分类专栏： js/css 文章标签： html 扩展 function object fun string

js/css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

//**************
// for IE 6.0+
// v 0.6
// dommy529
//**************

// HTML元素扩展类封装常用方法
function ELM(){ // 基类
this.setClassName = function(cls){this.className = cls;}
this.setStyle = function(style){
   if(typeof style != "object"){return false;}
   for(var i in style){
    this.style[i] = style[i];
   }
}
this.show = function(){this.setStyle({'display':''});}
this.hide = function(){this.setStyle({'display':'none'});}
this.hideorshow = function(){
   if(this.style.display == 'none'){
    this.show();
   }else{
    this.hide();
   }
}
this.moveTo = function(l,t){
   if(this.style.position!='absolute' || typeof l == "undefined" || typeof t == "undefined"){return false;}
   var arg = {};
   if(l==""){
    if(t!=""){arg['top']=t;}
   }else{
    if(t==""){
     arg['left'] = l;
    }else{
     arg['top'] = t;
     arg['left'] = l;
    }
   }
   this.setStyle(arg);
}
this.getPOS = function(){
   var p = {};
   p['left'] = this.offsetLeft;
   p['top'] = this.offsetTop;
   var f = this.offsetParent;
   while(f){
    p['left'] += f.offsetLeft;
    p['top'] += f.offsetTop;
    f = f.offsetParent;
   }
   return p;
}
this.setEvent = function(evt,fun){this.attachEvent("on"+evt,fun);}
this.delEvent = function(evt,fun){this.detachEvent("on"+evt,fun);}
this.popup = function(o,p){
   if(this.tagName.toUpperCase()!='IMG'){
    if(typeof o == 'object'){
     this.onmouseover = function(){this.setStyle(p)};
     this.onmouseout = function(){this.setStyle(o)};
    }else if(typeof o == 'string'){
     this.onmouseover = function(){this.setClassName(p)};
     this.onmouseout = function(){this.setClassName(o)};
    }
   }else{
    this.onmouseover = function(){this.setSrc(p)};
    this.onmouseout = function(){this.setSrc(o)};
   }
}
this.unpop = function(){
   this.onmouseover = function(){return false};
   this.onmouseout = function(){return false};
}
}
//区块类型元素
function LBL(){
ELM.call(this);
this.setInnr = function(str,tp){
   tp = typeof tp == "undefined" ? 0 : tp;
   switch(tp){
    case 0 : this.innerHTML = str; break;
    case 1 : this.innerHTML += str; break;
    case 2 : this.innerHTML = str+this.innerHTML; break;
   }
}
this.getChilds = function(){
   var c = this.childNodes;
   var o = [];
   for(var i=0;i<c.length;i++){
    o[i] = $(c[i]);
   }
   return o;
}
}
//input元素
function INP(){
ELM.call(this);
this.setValue = function(str,tp){
   tp = typeof tp == "undefined" ? 0 : tp;
   switch(tp){
    case 0 : this.value = str; break;
    case 1 : this.value += str; break;
    case 2 : this.value= str+this.value; break;
   }
}
this.enable = function(){this.disabled = false;}
this.disable = function(){this.disabled = true;}
this.lock = function(){this.readonly = true;}
}
//image元素
function IMG(){
ELM.call(this);
this.setSrc = function(src){this.src = src;}
}

封装一下以后可以简单的操作DOM，例如

改style $('id').setStyle({'width':'250px','height':'100px'}); $('id').hide();

设置鼠标翻转 $('id').popup({'color':'#000'},{'color':'#FF0000'});

绑定动作等 $('id').setEvent('click',Function);

附一个简单例程：

<html>
<head>
<script type="text/javascript" src="$.js"></script>
</head>
<body>
<div id="kk">
<span>11</span>
<span>11</span>
<span>11</span>
<span>11</span>
</div>
<input id="btn" type="button" value="dianwo">
<script>
function doit(){
var o = $('kk');
o.setStyle({'backgroundColor':'#FF0000',
     'width':'350px',
     'height':'100px',
     'color':'#FFF'});
o.setInnr('Hello World!',1);
var oc = o.childs();
oc[0].setStyle({'color':'#000'});
}
</script>
<img id="img" src="images/nav_bg.png">
<script>
var img = $('img');
img.setStyle({'border':'#0000FF solid 1px'});
img.popup('images/nav_bg.png','images/nav_bg_p.png');
var btn = $('btn');
btn.popup({'color':'#000'},{'color':'#ff0000'});
btn.setEvent("click",doit);
</script>
</body>
</html>

我家有奥特曼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
函数$的扩展，返回带有常用方法的HTML元素对象

//**************// for IE 6.0+// v 0.6// dommy529//**************function $(o){var e = null;if(o == ""){ e = document.body;}else{ switch(typeof o){ case undefined :
复制链接

扫一扫