常用的JavaScript自定义函数.doc

常用的JavaScript自定义函数JavaScript自定义函数在平时的开发过程中比较实用，这里介绍的是个最常用的十个JavaScript自定义函数主要涉及添加事件与移除事件等等。 (10)addEvent网上最流行的版本是Scott Andrew的，据说javascript界曾举行一场比赛（此事件我们可以在Pro Javascript Techniques第100页看到）或浏览PPK的网站，征求添加事件与移除事件的函数，他就是其获奖者。下面就是他的实现：1. functionaddEvent(elm,evType,fn,useCapture) 2. if(elm.addEventListener) 3. elm.addEventListener(evType,fn,useCapture);/DOM2.0 4. returntrue; 5. 6. elseif(elm.attachEvent) 7. varr=elm.attachEvent(on+evType,fn);/IE5+ 8. returnr; 9. 10. else 11. elmon+evType=fn;/DOM0 12. 13. 下面是Dean Edwards 的版本14. /addEvent/removeEventwrittenbyDeanEdwards,2005 15. /withinputfromTinoZijdel 16. //weblog/2005/10/add-event/ 17. functionaddEvent(element,type,handler) 18. /为每一个事件处理函数分派一个唯一的ID 19. if(!handler.$guid)handler.$guid=addEvent.guid+; 20. /为元素的事件类型创建一个哈希表 21. if(!element.events)element.events=; 22. /为每一个元素/事件对创建一个事件处理程序的哈希表 23. varhandlers=element.eventstype; 24. if(!handlers) 25. handlers=element.eventstype=; 26. /存储存在的事件处理函数(如果有) 27. if(elementon+type) 28. handlers0=elementon+type; 29. 30. 31. /将事件处理函数存入哈希表 32. handlershandler.$guid=handler; 33. /指派一个全局的事件处理函数来做所有的工作 34. elementon+type=handleEvent; 35. ; 36. /用来创建唯一的ID的计数器 37. addEvent.guid=1; 38. functionremoveEvent(element,type,handler) 39. /从哈希表中删除事件处理函数 40. if(element.events&element.eventstype) 41. deleteelement.eventstypehandler.$guid; 42. 43. ; 44. functionhandleEvent(event) 45. varreturnValue=true; 46. /抓获事件对象(IE使用全局事件对象) 47. event=event|fixEvent(window.event); 48. /取得事件处理函数的哈希表的引用 49. varhandlers=this.eventsevent.type; 50. /执行每一个处理函数 51. for(variinhandlers) 52. this.$handleEvent=handlersi; 53. if(this.$handleEvent(event)=false) 54. returnValue=false; 55. 56. returnreturnValue; 57. ; 58. /为IE的事件对象添加一些“缺失的”函数 59. functionfixEvent(event) 60. /添加标准的W3C方法 61. event.preventDefault=fixEvent.preventDefault; 62. event.stopPropagation=fixEvent.stopPropagation; 63. returnevent; 64. ; 65. fixEvent.preventDefault=function() 66. this.returnValue=false; 67. ; 68. fixEvent.stopPropagation=function() 69. this.cancelBubble=true; 70. ;功能非常强悍，解决IE的this指向问题，event总是作为第一个参数传入，跨浏览器就更不在话下。另，我还珍藏了一个HTML5工作组的版本：71. varaddEvent=(function() 72. if(document.addEventListener) 73. returnfunction(el,type,fn) 74. if(el.length) 75. for(vari=0;i 76. addEvent(eli,type,fn); 77. 78. else 79. el.addEventListener(type,fn,false); 80. 81. ; 82. else 83. returnfunction(el,type,fn) 84. if(el.length) 85. for(vari=0;i 86. addEvent(eli,type,fn); 87. 88. else 89. el.attachEvent(on+type,function() 90. returnfn.call(el,window.event); 91. ); 92. 93. ; 94. 95. )();（9）addLoadEvent()我以前讨论过这函数，不细说，就是慢了一点，各大类库基本无视它，自行实现domReady版本。下面是Simon Willison 的实现：96. varaddLoadEvent=function(fn) 97. varoldonload=window.onload; 98. if(typeofwindow.onload!=function) 99. window.onload=fn; 100. else 101. window.onload=function() 102. oldonload(); 103. fn(); 104. 105. 106. （8） getElementsByClass()我有收集癖，手头上拥有许多版本，最后集思广益自己实现了一个。下面是我的实现：107. vargetElementsByClassName=function(searchClass,node,tag) 108. if(document.getElementsByClassName) 109. returndocument.getElementsByClassName(searchClass) 110. else 111. node=node|document; 112. tag=tag|*; 113. varclasses=searchClass.split(), 114. elements=(tag=*&node.all)?node.all:node.getElementsByTagName(tag), 115. patterns=, 116. returnElements=, 117. current, 118. match; 119. vari=classes.length; 120. while(-i=0) 121. patterns.push(newRegExp(|s)+classesi+(s|$); 122. 123. varj=elements.length; 124. while(-j=0) 125. current=elementsj; 126. match=false; 127. for(vark=0,kl=patterns.length;k 128. match=patternsk.test(current.className); 129. if(!match)break; 130. 131. if(match)returnElements.push(current); 132. 133. returnreturnElements; 134. 135. （7）cssQuery()别名为getElementsBySeletor，由Dean Edwards最先实现，Prototype.js，JQuery等类库都有相应实现，其中JQuery把它整合到$()选择器中，名声盖过其前辈。不过IE8等新锐浏览器已经实现querySelector与querySelectorAll方法，待到IE6与IE7报废之日，它就无用了。无忧里有它的实现原理讲解。由于太长，就不粘出来了，具体可到原作者网站看看。（6）toggle()用来显示或隐藏一个DOM元素。136. functiontoggle(obj) 137. varel=document.getElementById(obj); 138. if(el.style.display!=none) 139. el.style.display=none; 140. 141. else 142. el.style.display=; 143. 144. （5）insertAfter()DOM只提供了insertBefore，我们很有必要自己实现insertAfter。不过我认为 insertAdjacentElement是更好的选择，现在除了火狐其他浏览器都实现这个方法。下面是Jeremy Keith的版本：145. functioninsertAfter(parent,node,referenceNode) 146. parent.insertBefore(node,referenceNode.nextSibling); 147. （4）inArray()用于判断检查数组中是否存在某个值，下面方法取自Prototype类库。148. Atotype.inArray=function(value) 149. for(vari=0,l=this.length;i 150. if(thisi=value) 151. returntrue; 152. 153. 154. returnfalse; 155. ;(3) getCookie(), setCookie(), deleteCookie()做BBS与商业网站的应该经常用到，无理由每次都要让用户输入密码登录吧。我们需要借助cookie实现自动登录功能。156. functiongetCookie(name) 157. varstart=document.cookie.indexOf(name+=); 158. varlen=start+name.length+1; 159. if(!start)&(name!=document.cookie.substring(0,name.length) 160. returnnull; 161. 162. if(start=-1)returnnull; 163. varend=document.cookie.indexOf(;,len); 164. if(end=-1)end=document.cookie.length; 165. returnunescape(document.cookie.substring(len,end); 166. 167. functionsetCookie(name,value,expires,path,domain,secure) 168. vartoday=newDate(); 169. today.setTime(today.getTime(); 170. if(expires) 171. expires=expires*1000*60*60*24; 172. 173. varexpires_date=newDate(today.getTime()+(expires); 174. document.cookie=name+=+escape(value)+ 175. (expires)?;expires=+expires_date.toGMTString():)+/expires.toGMTString() 176. (path)?;path=+path:)+ 177. (domain)?;domain=+domain:)+ 178. (secure)?;secure:); 179. 180. functiondeleteCookie(name,path,domain) 181. if(getCookie(name)document.cookie=name+=+ 182. (path)?;path=+path:)+ 183. (domain)?;domain=+domain:)+ 184. ;expires=Thu,01-Jan-197000:00:01GMT; 185. （2）getStyle()与setStyle()所有UI控件都应该存在的函数，动态设置样式与获取样式。这个可以写得很短，也可以写得很长，但要精确取得样式，一个字：难！但我发现许多问题都是发端于IE，微软的开发人员好像从来不打算给出getComputedStyle这样的函数，与之相近的currentStyle会返回auto，inhert， 等让你哭笑不得的值，这还没有算上IE怪癖模式带来的难度呢！各类库的实现是非常长与难分离出来的，下面是我实现的版本：186. functionsetStyle(el,prop,value) 187. if(prop=opacity&!+v1) 188. /IE7bug:filter滤镜要求hasLayout=true方可执行（否则没有效果） 189. if(!el.currentStyle|!el.currentStyle.hasLayout)el.style.zoom=1; 190. prop=filter; 191. if(!window.XDomainRequest) 192. value=progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=+value*100+); 193. else 194. value=alpha(opacity=+value*100+)195. 196. 197. el.style.cssText+=;+(pro