作家
登录

一些常用且实用的原生JavaScript函数

作者: 来源:www.28hudong.com 2013-03-30 01:18:29 阅读 我要评论

css及html方面的技巧总结,点此前往: 前端开发中一些常用技巧总结, 你还可以前往兰芝博客, 查看由淘宝UED整理的前端tips: http://www.12sui.cn/category/css/. 1. document.getElementById的简写: http://www.jb51.net/article/24762.htm; 2. getElementsByTagName的简写方式: http://www.jb51.net/article/24026.htm; 3. 原生JavaScript中获取元素索引的函数: http://www.jb51.net/article/24763.htm; 4. 替代window.onload,可多次调用的加载函数: 复制代码 代码如下: function iLoad(func) { var oLoad=window.onload; if(typeof window.onload!='function'){ window.onload=func; }else{ window.onload=function(){ oLoad(); func(); } } } 5. 获取下一个元素节点: 复制代码 代码如下: function nextElem(node){ if(node.nodeType==1) return node; if(node.nextSibling) return nextElem(node.nextSibling); return null; } 6. 获取上一个元素节点(此函数须调用第五条中的函数): 复制代码 代码如下: function prevElem(node){ if(node.nodeType==1){ return node; }else if(node.previousSibling){ return nextElem(node.previousSibling); }else{ return null; } } 7. 原生JavaScript中有insertBefore方法,可惜却没有insertAfter方法,怎么办?用如下函数实现: 复制代码 代码如下: function insertAfter(newChild,refChild){ var parElem=refChild.parentNode; if(parElem.lastChild==refChild){ refChild.appendChild(newChild); }else{ parElem.insertBefore(newChild,refChild.nextSibling); } } 8. 为元素添加样式[记住是添加不是替换,相当于jQuery中的addClass(value)]: 复制代码 代码如下: function addClass(elem,value){ if(!elem.className){ elem.className=value; }else{ var oValue=elem.className; oValue+=" "; oValue+=value; elem.className=oValue; } } 9. 获取元素的样式: 复制代码 代码如下: function getStyle(id,stylename){ var elem=$(id); var realStyle=null; if(elem.currentStyle){ realStyle=elem.currentStyle[stylename]; }else if(window.getComputedStyle){ realStyle=window.getComputedStyle(elem,null)[stylename]; } return realStyle; } 10. 兼容事件绑定: 复制代码 代码如下: function addEventSamp(obj,evt,fn){ if (obj.addEventListener) { obj.addEventListener(evt, fn, false); }else if(obj.attachEvent){ obj.attachEvent('on'+evt,fn); } } 11. 移除事件 复制代码 代码如下: function removeEventSamp(obj,evt,fn){ if(obj.removeEventListener){ obj.removeEventListener(evt,fn,false); }else if(obj.detachEvent){ obj.detachEvent('on'+evt,fn); } } 12. 检测样式 复制代码 代码如下: function hasClass(element, className){ var reg = new RegExp('(\s|^)' + className + '(\s|$)'); return element.className.match(reg); } 13. 删除样式 复制代码 代码如下: function removeClass(element, className){ if (hasClass(element, className)) { var reg = new RegExp('(\s|^)' + className + '(\s|$)'); element.className = element.className.replace(reg, ' '); } } 原文发布于Mr.Think的博客: http://mrthink.net/javascript-common-function-tip/ $() 复制代码 代码如下: function $() { var elements = []; for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; if (typeof element == 'string') element = document.getElementById(element); if (arguments.length == 1) return element; elements.push(element); } return elements; } toggle() 用来显示或隐藏一个DOM元素。 复制代码 代码如下: function toggle(obj) { var el = document.getElementById(obj); el.style.display=(el.style.display !="none"?"none":"") }

  推荐阅读

  让JavaScript拥有类似Lambda表达式编程能力的方法

但是我后来也跟人说,因为接受的参数太多,所以如果不把智能提示写得很清楚的话,连我自己都常常搞不清楚该怎么用。 不过,接受参数多,除了容易弄错用法以外,还会产生另一个问题,这也是我编写出今天发布的这个东>>>详细阅读


本文标题:一些常用且实用的原生JavaScript函数

地址:http://www.17bianji.com/kaifa2/JS/25717.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)