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

2019年9月4日 16:42:58js教程评论783 views阅读模式

<!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需刷新才能执行]