一些常用且实用的原生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 相关文章推荐
javascript数组组合成字符串的脚本
Jan 06 Javascript
js parentElement和offsetParent之间的区别
Mar 23 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
js中文逗号转英文实现
Feb 11 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
详解vue-cli3开发Chrome插件实践
May 29 Javascript
原生js实现无缝轮播图效果
Jan 28 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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
PHP Mysql编程之高级技巧
2008/08/27 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
javascript实现微信分享
2014/12/23 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
理解Python中的类与实例
2015/04/27 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python协程的用法和例子详解
2017/09/09 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
在python里面运用多继承方法详解
2019/07/01 Python
基于python监控程序是否关闭
2020/01/14 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
软件测试面试题
2014/01/05 面试题
会议欢迎词
2015/01/23 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL