日常开始中常用到的一些原生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,可多次调用的加载函数:
var oLoad = window . onload ;
if ( typeof window . onload != ' function ' ){
window . onload = func ;
} else {
window . onload = function (){
oLoad () ;
func () ;
}
}
}
5. 获取下一个元素节点:
if ( node . nodeType == 1 ) return node ;
if ( node . nextSibling ) return nextElem ( node . nextSibling ) ;
return null ;
}
6. 获取上一个元素节点(此函数须调用第五条中的函数):
if ( node . nodeType == 1 ){
return node ;
} else if ( node . previousSibling ){
return nextElem ( node . previousSibling ) ;
} else {
return null ;
}
}
7. 原生JavaScript中有insertBefore方法,可惜却没有insertAfter方法,怎么办?用如下函数实现:
var parElem = refChild . parentNode ;
if ( parElem . lastChild == refChild ){
refChild . appendChild ( newChild ) ;
} else {
parElem . insertBefore ( newChild , refChild . nextSibling ) ;
}
}
8. 为元素添加样式[记住是添加不是替换,相当于jQuery中的addClass(value)]:
if ( ! elem . className ){
elem . className = value ;
} else {
var oValue = elem . className ;
oValue += " " ;
oValue += value ;
elem . className = oValue ;
}
}
9. 获取元素的样式:
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. 兼容事件绑定:
if ( obj . addEventListener ) {
obj . addEventListener ( evt , fn , false ) ;
} else if ( obj . attachEvent ){
obj . attachEvent ( ' on ' + evt , fn ) ;
}
}
11. 移除事件
if ( obj . removeEventListener ){
obj . removeEventListener ( evt , fn , false ) ;
} else if ( obj . detachEvent ){
obj . detachEvent ( ' on ' + evt , fn ) ;
}
}
12. 检测样式
var reg = new RegExp ( ' ( \\ s|^) ' + className + ' ( \\ s|$) ' ) ;
return element . className . match ( reg ) ;
}
13. 删除样式
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/ 转载请注明