Javascript 链式调用实现代码(参考jquery)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Javascript链式调用</title> <script type="text/javascript"> function ele(){ this.elements=[]; var element; if(typeof arguments[0]=="string"){ element=arguments[0]; if (element.slice(0, 1) == '#') { element = document.getElementById(element.slice(1)); this.elements.push(element); }else if(element.slice(0,1)=='.'){ element=element.slice(1); var es = document.body.getElementsByTagName('*'); for (var i = 0, j = es.length; i < j; i++) { if (element.indexOf(es[i].className) != -1) { //alert(111); this.elements.push(es[i]); } } }else{ this.elements = document.getElementsByTagName(element); //alert(elements[0].id); } }else{ element=this; this.elements.push(element); } } ele.prototype.each=function(fn){ for(var i=0,l=this.elements.length;i<l;i++){ fn.call(this,this.elements[i]); } return this; }; ele.prototype.setStyle=function(prop,value){ this.each(function(el){ el.style[prop]=value; }); return this; }; ele.prototype.show=function(){ this.setStyle("display","block"); return this; }; window.$=function(){ return new ele(arguments[0]); }; </script> </head> <body> <div id="test" class="ttt" style="width:100px; height:100px; background-color:red; display:none;"></div> <div class="ttt" style="width:100px; height:100px; background-color:black; display:none;"></div> <script type="text/javascript"> $('.ttt').setStyle('width','300px').show(); 　　　　 //$('#test').setStyle('width','300px').show(); 　　　　 //$('div').setStyle('width','300px').show(); </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

频道导航

Javascript 链式调用实现代码(参考jquery)

您可能感兴趣的文章: