教程集 > jQuery > jquery 教程 > 正文 Javascript 链式调用实现代码(参考jquery)

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

发布时间：2013-08-15 编辑：jiaochengji.com

谓的链式调用无非是一个语法技巧而已，我就学Jquery写了一个粗浅的库。

谓的链式调用无非是一个语法技巧而已，我就学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)
JavaScript 对象链式操作小例子
 关于jQuery参考实例 1.0 jQuery的哲学
 使用JQuery和CSS模拟超链接的用户单击事件的实现代码
 JQuery入门—JQuery程序的代码风格详细介绍
 基于JQuery的Pager分页器实现代码
 模仿jQuery each函数的链式调用
 浅析jQuery的链式调用之each函数
 Jquery与CSS模拟超链接的用户单击事件的代码学习
 jQuery源码分析-01总体架构分析

上一篇：jQuery模板技术和数据绑定实现代码下一篇：jquery 轮换显示第一小个例子

[关闭]

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

最近更新

浏览排行