一些常用且实用的原生JavaScript函数_javascript技巧-js教程-PHP中文网

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

WBOY

发布： 2016-05-16 18:20:00

原创

1263 人浏览过

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 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":"") 
} 