在Javascript前端编程中,使用过Prototype.js的人,会知道,只要使用一个简单的语句:
$("msg").hide();
就可以把id为msg的元素隐藏;同样的,$("msg").show()则可以把隐藏的元素显示出来。像这种对元素的扩展,是怎样做出来的呢?
在说明这个问题之前,先问一个问题:为什么要这样做?
为什么要对DOM element进行扩展?
如果你在Javascript编辑中,不使用任何库,即祼编去实现一些说大不大说小不小应用时,相信你一定会事先$一下:
var $=function (s){
return typeof(s)=="string" ? document.getElementById(s) : s;
};
或者更简单的
function $(){return document.getElementById(s);}
这样一来可以加快你写代码的速度,二来可以为页面节省不少字节。
但如果我们还需要很多对DOM的操作,而且这些操作具有一定的复杂性重用,需要分离出来,如对属性className的操作:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | rmCls=function(el,_c){// the full name is removeClassName el=$(el);if(!el) return null; var c=el.className.split(" "),str=""; for(var i in c){if(c[i]!=_c) str+=" "+c[i];} el.className=str; return el; }, adCls=function(el,c){// the full name is addClassName el=$(el);if(!el) return null; this.rmCls(el,c).className+=" "+c; return el; }, hasCls=function(el,_c){// the full name is hasClassName var el=$(el),c=(el.className || "").split(" "), l=c.length; while(l--){if(c[l]==_c) return true;}; return false; }; |
当然,我们也可以直接使用$(”msg”).className=”on”来操作,但这对存在多个类名的元素来说就不那么便利了。但现在也不太便利,因为我们要把元素也写到参数中:
adCls($("msg"),"on");
如果可以这样似乎会更清爽些:
$("msg").adCls("on"); 阅读全文(Read the rest of this entry) »
Popularity: 63% [?]
文章字体大小:

tags: