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


Posted in Javascript onSeptember 08, 2010

css及html方面的技巧总结,点此前往: 前端开发中一些常用技巧总结, 你还可以前往兰芝博客, 查看由淘宝UED整理的前端tips: http://www.12sui.cn/category/css/.
1. document.getElementById的简写: https://3water.com/article/24762.htm;
2. getElementsByTagName的简写方式: https://3water.com/article/24026.htm;
3. 原生JavaScript中获取元素索引的函数: https://3water.com/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 相关文章推荐
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 Javascript
js location.replace与location.reload的区别
Sep 08 #Javascript
js中匿名函数的N种写法
Sep 08 #Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 #Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 #Javascript
Javascript的一种模块模式
Sep 08 #Javascript
jQeury淡入淡出需要注意的问题
Sep 08 #Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 #Javascript
You might like
一个更简单的无限级分类菜单代码
2007/01/16 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
javascript window.opener的用法分析
2010/04/07 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
Python中使用支持向量机(SVM)算法
2017/12/26 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
汽车工程专业应届生求职信
2013/10/19 职场文书
热情服务标语
2014/10/07 职场文书
2014年科室工作总结
2014/11/20 职场文书
刑事附带民事代理词
2015/05/25 职场文书
会计主管竞聘书
2015/09/15 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
Python合并pdf文件的工具
2021/07/01 Python