一些常用且實用的原生JavaScript函數

作者: Mr.Think  來源: 博客園  發布時間: 2010-09-09 21:18  閱讀: 943 次  推薦: 0   原文鏈接   [收藏]  
摘要:日常開始中常用到的一些原生JavaScript函數,比較實用,今天特地整理一下分享給大家,希望對大家有用,會常更新,同時也歡迎大家補充。

  csshtml方面的技巧總結,點此前往: 前端開發中一些常用技巧總結, 你還可以前往蘭芝博客, 查看由淘寶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/ 轉載請注明
0
0
 
標簽:JavaScript
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()