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需再刷新一下页面才能执行]

您可能感兴趣的文章:

asp.net 30分钟掌握无刷新 Repeater
经过数个版本的迭代后, JQueryElement 3.3.0 版本中的 Repeater 基本上已经完善, 这里将分功能的总结讲解一下 Repeater 的使用方法.
2011-09-09
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果,结合实例形式分析了jQuery使用HighCharts插件同时绘制折线图、柱状图、饼状图组合图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
2017-03-03
JQuery Tips(2) 关于$()包装集你不知道的
包装集总是面向集合的，需要的朋友可以参考下。
2009-12-12
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
这篇文章主要介绍了基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件的相关资料，非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧
2016-07-07
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法，需要的朋友可以参考一下
2013-05-05
jQuery Validate格式验证功能实例代码（包括重名验证）
本文通过实例代码给大家介绍了jQuery Validate格式验证功能，代码中包括重名验证的方法，需要的的朋友参考下吧
2017-07-07
jQuery.form.js的使用详解
本文使用jquery.form.js解决提交之后，页面发生跳转，在一个空白页面上显示了后端返回的json数据问题，需要的朋友参考下
2017-06-06
快速掌握jQuery插件WebUploader文件上传
这篇文章主要为大家详细介绍了如何快速掌握jQuery插件WebUploader文件上传和图片上传操作,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
jQuery 性能优化指南（2）
对直接的DOM操作进行限制
2009-05-05
jQuery命名空间与闭包用法示例
这篇文章主要介绍了jQuery命名空间与闭包用法,结合实例形式演示了jQuery中命名空间及闭包的具体使用技巧,需要的朋友可以参考下
2017-01-01