?

日常開始中常用到的一些原生JavaScript函數,比較實用, 今天特地整理一下,分享給大家,希望對大家有用,會常更新,同時也歡迎大家補充.
css及html方面的技巧總結,點此前往: 前端開發中一些常用技巧總結, 你還可以前往蘭芝博客, 查看由淘寶UED整理的前端tips: http://www.12sui.cn/category/css/.
1. document.getElementById的簡寫: http://mrthink.net/javascript-getbyid-simplewrite/;
2. getElementsByTagName的簡寫方式: http://mrthink.net/javascrip-simple-getelementsbytagname/;
3. 原生JavaScript中獲取元素索引的函數: http://mrthink.net/javascript-index-functio/;
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/

轉載于:https://www.cnblogs.com/guangrou/archive/2010/09/08/1821474.html

總結

以上是生活随笔為你收集整理的一些常用且实用的原生 JavaScript函数[转]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。