软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：Javascript,链式调用

<!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>

技术文章快速查找

js 纯数字不重复排列的另类方法

JavaScript 语言的递归编程

纯JS实现根据CSS的class选择DOM

jQuery 如何先创建、再修改、后添加DOM元素

妙用Jquery的val()方法

jQuery UI的Dialog无法提交问题的解决方法

js面向对象编程之如何实现方法重载

js原生appendChild的bug解决心得分享

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建