《精通javascript》几个简单的函数(一)-白红宇

书没有好坏之分，正如人没有绝对的好坏之分一样。书只看对自己这个水平层次的人来说该吸收的东西多少了。当然，尽信书不如不读书。人，在特定的历史条件下做出的某些选择是有助于推动历史前进的步伐的，所以要用多变的眼光来看待回忆中的人与事将会使你的人生多彩而斑斓。
《精通js》这本书，承载了众多jqer期待的梦，结果可想而知。不多说了，列举几个简单的函数，供参考。不为过去，只为将来那些未曾实现的梦...
function
 $(){ 
return
 document.getElementById(arguments[
0
])};
/*
*
  * 得到上一个元素
  * @param {Object} elem
*/
function
 prev(elem){ 
do
{ 
         elem 
=
 elem.previousSibling;
     } 
while
(elem 
&&
 elem.nodeType 
!=
 
1
);
return
 elem;
 }
/*
*
  * 得到下一个元素
  * @param {Object} elem
*/
function
 next(elem){ 
do
{ 
         elem 
=
 elem.nextSibling;
     } 
while
(elem 
&&
 elem.nodeType 
!=
 
1
);
return
 elem;
 }
/*
*
  * 得到第一个元素
  * @param {Object} elem
*/
function
 first(elem){ 
     elem 
=
 elem.firstChild;
return
 elem 
&&
 elem.nodeType 
!=
 
1
 
?
 next(elem) : elem;
 }
/*
*
  * 得到最后一个元素
  * @param {Object} elem
*/
function
 last(elem){ 
     elem 
=
 elem.lastChild;
return
 elem 
&&
 elem.nodeType 
!=
 
1
 
?
 prev(elem) : elem;
 }
/*
*
  * 得到父元素
  * @param {Object} elem
  * @param {Number} num 需要寻找的父级级别
*/
function
 parent(elem, num){ 
     num 
=
 num 
||
 
1
;
for
(
var
 i
=
0
; i
<
num; i
++
){ 
if
(elem 
!=
 
null
) elem 
=
 elem.parentNode; 
//
原书中这块有错
    }
return
 elem;
 }
/*
*
  * 得到相关name元素
  * @param {String} name
  * @param {Object} elem
*/
function
 tag(name, elem){ 
return
 (elem 
||
 document).getElementsByTagName(name)
 }
/*
*
  * 根据tag寻找
  * @param {String} name
  * @param {String} type
*/
function
 hasClass(name, type){ 
var
 r 
=
 [];
var
 re 
=
 
new
 RegExp(
'
(^|\\s)
'
+
name
+
'
(\\s|$)
'
);
var
 e 
=
 document.getElementsByTagName(type 
||
 
'
*
'
);
for
(
var
 i
=
0
; i
<
e.length; i
++
){ 
if
(re.test(e[i].className)){ 
             r.push(e[i]);
         }
     }
return
 r;
//
http://www.cnblogs.com/rubylouvre/archive/2009/09/01/1557765.html //司徒兄有不同的看法
}
/*
*
  * 获取元素文本
  * @param {Object} e
*/
function
 text(e){ 
var
 t 
=
 
''
;
     e 
=
 e.childNodes 
||
 e;
for
(
var
 i
=
0
; i
<
e.length; i
++
){ 
//
如果不是元素，则追加其文本值
        t 
+=
 e[i].nodeType 
!=
 
1
 
?
 e[i].nodeValue : text(e[i].childNodes);
     }
return
 t;
 }
/*
*
  * 
  * @param {String} elem
  * @param {String} name
  * @param {String} value
*/
function
 attr(elem, name, value){ 
if
(
!
name 
||
 name.constructor 
!=
 String){ 
return
 
''
;
     }
//
检查name的属性是否在怪异命名情形中
    name 
=
 { 
'
for
'
: 
'
htmlFor
'
, 
'
class
'
: 
'
className
'
}[name] 
||
 name;
if
(
typeof
 value 
!=
 
'
undefined
'
){ 
         elem[name] 
=
 value;
if
(elem.setAttribute){ 
             elem.setAttribute(name, value);
         }
     }
return
 elem[name] 
||
 elem.getAttribute(name) 
||
 
''
;
 }
/*
*
  * 在另一个元素之前插件元素
  * @param {Object} parent
  * @param {Object} before
  * @param {String} elem
*/
function
 before(parent, before, elem){ 
if
(elem 
==
 
null
){ 
         elem 
=
 before;
         before 
=
 parent;
         parent 
=
 before.parentNode;
     }
//
获取元素的新数组
    
var
 elems 
=
 checkElem(elem);
//
向后遍历
    
for
(
var
 i
=
elems.length; i
>=
0
; i
--
){ 
         parent.insertBefore(elems[i], before);
     }
 }
/*
*
  * 创建元素
  * @param {Object} elem
*/
function
 create(elem){ 
//
测试是否用命名空间来创建新的元素
    
return
 document.createElementNS 
?
 document.createElementNS(
'
http://www.w3.org/1999/xhtml
'
, elem) : document.createElement(elem);
 }
/*
*
  * before 辅助函数
  * @param {Object} elem
*/
function
 checkElem(a){ 
var
 r 
=
 [];
if
(a.constructor 
!=
 Array){ a 
=
 [a]};
for
(
var
 i
=
0
; i
<
a.length; i
++
){ 
//
如果是字符串
        
if
(a[i].constructor 
==
 String){ 
//
用一个临时元素来存放HTML
            
var
 div 
=
 document.createElement(
'
div
'
);
             div.innerHTML 
=
 a[i];
//
提取DOM结构到临时的div中
            
for
(
var
 j
=
0
; j
<
div.childNodes.length; j
++
){ 
                 r[r.length] 
=
 div.childNodes[j];
             }
         } 
else
 
if
(a[i].length){ 
//
如果它是数组
            
//
假定DOM节点数组
            
for
(
var
 j
=
0
; j
<
a[i].length; j
++
){ 
                 r[r.length] 
=
 a[i][j];
             }
         } 
else
 { 
//
否则假定是DOM节点
            r[r.length] 
=
 a[i];
         }
     }
return
 r;
 }
//
此方法我已修改与原文中有异
 /*
*
  * 添加元素 (如果只有一个参数(无elem)，则直接添加到document.body上)
  * @param {Object} elem 
  * @param {Object} parent
*/
function
 append(parent, elem){ 
if
(elem 
==
 
null
){ 
         elem 
=
 parent;
         parent 
=
 
null
;
     }
//
获取元素数组
    
var
 elems 
=
 checkElem(elem);
for
(
var
 i
=
0
; i
<
 elems.length; i
++
){ 
         (parent 
||
 document.body).appendChild(elems[i]);
     }
 }
/*
*
  * 删除独立的DOM
  * @param {Object} elem
*/
function
 remove(elem){ 
if
(elem){ elem.parentNode.removeChild(elem) };
 }
/*
*
  * 删除一个节点的所有子节点
  * @param {Object} elem
*/
function
 empty(elem){ 
while
(elem.firstChild){ 
         remove(elem.firstChild);
     }
 }
/*
*
  * 阻止事件冒泡
  * @param {Object} e
*/
function
 stopBubble(e){ 
if
(e 
&&
 e.stopPropagation){ 
         e.stopPropagation();
     } 
else
 { 
         window.event.cancelBubble 
=
 
true
;
     }
 }
function
 stopDefault(e){ 
if
(e 
&&
 e.preventDefault){ 
         e.preventDefault();
     } 
else
 { 
         window.event.returnValue 
=
 
false
;
     }
return
 
false
;
 }
/*
*
  * 得到外链样式
  * @param {Object} elem
  * @param {String} name
*/
function
 getStyle(elem, name){ 
if
(elem.style[name]){ 
return
 elem.style[name];
     } 
else
 
if
(elem.currentStyle){ 
//
如果ie
        
return
 elem.currentStyle[name];
     } 
else
 
if
(document.defaultView 
&&
 document.defaultView.getComputedStyle){ 
//
如果是不是w3c方法
        name 
=
 name.replace(
/
([A-Z])
/
g, 
'
-$1
'
);
         name 
=
 name.toLowerCase();
//
获取样式
        
var
 s 
=
 document.defaultView.getComputedStyle(elem, 
''
);
return
 s 
&&
 s.getPropertyValue(name);
     } 
else
 { 
return
 
null
;
     }
 }
/*
*
  * 获取元素的x位置
  * @param {String} elem
*/
function
 pageX(elem){ 
return
 elem.offsetParent 
?
 elem.offsetLeft 
+
 pageX(elem.offsetParent) : elem.offsetLeft;
 }
/*
*
  * 获取元素的Y位置
  * @param {String} elem
*/
function
 pageY(elem){ 
return
 elem.offsetParent 
?
 elem.offsetTop 
+
 pageY(elem.offsetParent) : elem.offsetTop;
 }
/*
*
  * 获取元素相对于父级的x位置
  * @param {String} elem
*/
function
 parentX(elem){ 
return
 elem.parentNode 
==
 elem.offsetParent 
?
 elem.offsetLeft : pageX(elem) 
-
 pageX(elem.parentNode);
 }
/*
*
  * 获取元素相对于父级的Y位置
  * @param {String} elem
*/
function
 parentY(elem){ 
return
 elem.parentNode 
==
 elem.offsetParent 
?
 elem.offsetTop : pageY(elem) 
-
 pageY(elem.parentNode);
 }
/*
*
  * 查找元素的左端位置
  * @param {Object} elem
*/
function
 posX(elem){ 
return
 parseInt(getStyle(elem, 
'
left
'
));
 }
/*
*
  * 查找元素的顶端位置
  * @param {Object} elem
*/
function
 posY(elem){ 
return
 parseInt(getStyle(elem, 
'
top
'
));
 }
/*
*
  * 设置元素水平位置
  * @param {Object} elem
  * @param {Object} pos
*/
function
 setX(elem, pos){ 
     elem.style.left 
=
 pos 
+
 
'
px
'
;
 }
/*
*
  * 设置垂直水平位置
  * @param {Object} elem
  * @param {Object} pos
*/
function
 setY(elem, pos){ 
     elem.style.top 
=
 pos 
+
 
'
px
'
;
 }
/*
*
  * 获取高度
  * @param {Object} elem
*/
function
 getHeight(elem){ 
return
 parseInt(getStyle(elem, 
'
height
'
));
 }
/*
*
  * 获取宽度
  * @param {Object} elem
*/
function
 getWidth(elem){ 
return
 parseInt(getStyle(elem, 
'
width
'
));
 }
/*
*
  * 得到完整的高度，就算对象已隐藏
  * @param {Object} elem
*/
function
 fullHeight(elem){ 
//
如果元素显示
    
if
(getStyle(elem, 
'
display
'
) 
!=
 
'
none
'
){ 
return
 elem.offsetHeight 
||
 getHeight(elem);
     }
//
如果不显示，则复原css
    
var
 old 
=
 resetCss(ele, { 
         display: 
''
,
         visibility: 
'
hidden
'
,
         position: 
'
absolute
'
     });
var
 h 
=
 elem.clientHeight 
||
 getHeight(elem);
     restoreCss(elem, old);
return
 h;
 }
/*
*
  * 恢复原有设置
  * @param {String} elem
  * @param {Object} prop
*/
function
 resetCss(elem, prop){ 
var
 old 
=
 {};
for
(
var
 i 
in
 prop){ 
         old[i] 
=
 prop[i];
         elem.style[i] 
=
 prop[i];
     }
return
 old;
 }
/*
*
  * 
  * @param {String} elem
  * @param {Object} old
*/
function
 restoreCss(elem, old){ 
for
(
var
 i 
in
 old){ 
         elem.style[i] 
=
 old[i];
     }
 }
本文转自豪情博客园博客，原文链接：http://www.cnblogs.com/jikey/archive/2011/07/21/2112470.html，如需转载请自行联系原作者