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

更新时间：2010年05月18日 21:53:32 作者：

谓的链式调用无非是一个语法技巧而已，我就学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需再刷新一下页面才能执行]

您可能感兴趣的文章:

JQUERY设置IFRAME的SRC值的代码
有时候需要设置iframe的src属性，下面是基于jquery的实现代码。
2010-11-11
jQuery中实现动画效果的基本操作介绍
本篇文章小编将为大家介绍，在jQuery中实现动画效果的基本操作介绍，需要的朋友可以参考一下
2013-04-04
jQuery实现Select左右复制移动内容
这篇文章主要介绍了基于jQuery实现Select左右复制移动内容的实现方法，代码非常简单，具有参考借鉴价值，需要的朋友参考下
2016-08-08
jquery中用jsonp实现搜索框功能
这篇文章主要为大家详细介绍了jquery中用jsonp实现搜索框功能的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
jQuery实现百度登录框的动态切换效果
这篇文章主要介绍了jQuery实现百度登录框的动态切换效果,需要的朋友可以参考下
2017-04-04
使用jquery实现的循环连续可停顿滚动实例
下面小编就为大家带来一篇使用jquery实现的循环连续可停顿滚动实例。
2016-11-11
DIV+CSS+jQ实现省市联动可扩展
这篇文章主要介绍了DIV+CSS+jQ实现省市联动可扩展方法的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
jQuery实现平滑滚动的标签分栏切换效果
这篇文章主要介绍了jQuery实现平滑滚动的标签分栏切换效果,涉及jquery鼠标事件及页面元素样式的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件FusionWidgets实现的Bulb图效果,结合完整实例形式分析了jQuery使用FusionWidgets插件结合swf文件载入xml数据实现Bulb图效果的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
2017-03-03
jQuery实现渐变下拉菜单的简单方法
这篇文章主要介绍了jQuery实现渐变下拉菜单的简单方法,涉及jQuery链式操作及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03