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日历插件My97DatePicker日期范围限制
这篇文章主要介绍了JQuery日历插件My97DatePicker日期范围限制的相关资料,需要的朋友可以参考下
2016-01-01
基于jQuery实现的查看全文功能【实用】
本文分享了利用jQuery实现的查看全文功能：文本内容少于四行，不显示查看全文；超过五行时才显示出来并有此功能；很实用，下面就跟小编一起来看看吧
2016-12-12
jquery实现类似淘宝星星评分功能实例
这篇文章主要介绍了jquery实现类似淘宝星星评分功能,详细介绍了相应jQuery事件的用法实例,需要的朋友可以参考下
2014-09-09
基于jQuery实现多层次的手风琴效果附源码
今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果。其主要思想是扩大手风琴片上的点击和显示更多的信息。感兴趣的朋友可以参考下本文
2015-09-09
tuzhu_req.js 实现仿百度图片首页效果
这篇文章主要介绍了tuzhu_req.js 实现仿百度图片首页效果的相关资料,需要的朋友可以参考下
2015-08-08
JQuery 获得绝对,相对位置的坐标方法
获取页面某一元素的绝对X,Y坐标，可以用offset()方法：（body属性设置margin :0;padding:0;）
2010-02-02
用图片替换checkbox原始样式并实现同样的功能
这篇文章主要介绍了用图片替换checkbox原始样式并实现同样的功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-11-11
jquery submit ie6下失效的原因分析及解决方法
jquery submit ie6下失效的原因分析及解决方法。需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
IE8下String的Trim()方法失效的解决方法
String的Trim()方法失效,在ie8下是有这样的情况的，解决方法也很简单使用$.trim(str)即可，需要的朋友可以了解下
2013-11-11
jquery获取div宽度的实现思路与代码
DIV的width宽度如何获取呢？接下来介绍使用jquery获取DIV的width宽度，感兴趣的朋友可以了解下的
2013-01-01

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具