常用的js函数

  1 function $(){ return document.getElementById(arguments[0])};
  2 
  3 /**
  4  * 得到上一个元素
  5  * @param {Object} elem
  6  */
  7 function prev(elem){
  8     do{
  9         elem = elem.previousSibling;
 10     } while(elem && elem.nodeType != 1);
 11     return elem;
 12 }
 13 
 14 /**
 15  * 得到下一个元素
 16  * @param {Object} elem
 17  */
 18 function next(elem){
 19     do{
 20         elem = elem.nextSibling;
 21     } while(elem && elem.nodeType != 1);
 22     return elem;
 23 }
 24 
 25 /**
 26  * 得到第一个元素
 27  * @param {Object} elem
 28  */
 29 function first(elem){
 30     elem = elem.firstChild;
 31     return elem && elem.nodeType != 1 ? next(elem) : elem;
 32 }
 33 
 34 /**
 35  * 得到最后一个元素
 36  * @param {Object} elem
 37  */
 38 function last(elem){
 39     elem = elem.lastChild;
 40     return elem && elem.nodeType != 1 ? prev(elem) : elem;
 41 }
 42 
 43 /**
 44  * 得到父元素
 45  * @param {Object} elem
 46  * @param {Number} num 需要寻找的父级级别
 47  */
 48 function parent(elem, num){
 49     num = num || 1;
 50     for(var i=0; i<num; i++){
 51         if(elem != null) elem = elem.parentNode; //原书中这块有错
 52     }
 53     return elem;
 54 }
 55 
 56 /**
 57  * 得到相关name元素
 58  * @param {String} name
 59  * @param {Object} elem
 60  */
 61 function tag(name, elem){
 62     return (elem || document).getElementsByTagName(name)
 63 }
 64 
 65 /**
 66  * 根据tag寻找
 67  * @param {String} name
 68  * @param {String} type
 69  */
 70 function hasClass(name, type){
 71     var r = [];
 72     var re = new RegExp(‘(^|\\s)‘+name+‘(\\s|$)‘);
 73     var e = document.getElementsByTagName(type || ‘*‘);
 74     for(var i=0; i<e.length; i++){
 75         if(re.test(e[i].className)){
 76             r.push(e[i]);
 77         }
 78     }
 79     return r;
 80     //http://www.cnblogs.com/rubylouvre/archive/2009/09/01/1557765.html //司徒兄有不同的看法
 81 }
 82 
 83 /**
 84  * 获取元素文本
 85  * @param {Object} e
 86  */
 87 function text(e){
 88     var t = ‘‘;
 89     e = e.childNodes || e;
 90     for(var i=0; i<e.length; i++){
 91         //如果不是元素，则追加其文本值
 92         t += e[i].nodeType != 1 ? e[i].nodeValue : text(e[i].childNodes);
 93     }
 94     return t;
 95 }
 96 
 97 /**
 98  * 
 99  * @param {String} elem
100  * @param {String} name
101  * @param {String} value
102  */
103 function attr(elem, name, value){
104     if(!name || name.constructor != String){
105         return ‘‘;
106     }
107     
108     //检查name的属性是否在怪异命名情形中
109     name = {‘for‘: ‘htmlFor‘, ‘class‘: ‘className‘}[name] || name;
110     
111     if(typeof value != ‘undefined‘){
112         elem[name] = value;
113         
114         if(elem.setAttribute){
115             elem.setAttribute(name, value);
116         }
117     }
118     
119     return elem[name] || elem.getAttribute(name) || ‘‘;
120 }
121 
122 
123 /**
124  * 在另一个元素之前插件元素
125  * @param {Object} parent
126  * @param {Object} before
127  * @param {String} elem
128  */
129 function before(parent, before, elem){
130     if(elem == null){
131         elem = before;
132         before = parent;
133         parent = before.parentNode;
134     }
135     
136     //获取元素的新数组
137     var elems = checkElem(elem);
138     
139     //向后遍历
140     for(var i=elems.length; i>=0; i--){
141         parent.insertBefore(elems[i], before);
142     }
143 }
144 
145 /**
146  * 创建元素
147  * @param {Object} elem
148  */
149 function create(elem){
150     //测试是否用命名空间来创建新的元素
151     return document.createElementNS ? document.createElementNS(‘http://www.w3.org/1999/xhtml‘, elem) : document.createElement(elem);
152 }
153 
154 /**
155  * before 辅助函数
156  * @param {Object} elem
157  */
158 function checkElem(a){
159     var r = [];
160     if(a.constructor != Array){ a = [a]};
161     for(var i=0; i<a.length; i++){
162         //如果是字符串
163         if(a[i].constructor == String){
164             //用一个临时元素来存放HTML
165             var div = document.createElement(‘div‘);
166             div.innerHTML = a[i];
167             //提取DOM结构到临时的div中
168             for(var j=0; j<div.childNodes.length; j++){
169                 r[r.length] = div.childNodes[j];
170             }
171         } else if(a[i].length){ //如果它是数组
172             //假定DOM节点数组
173             for(var j=0; j<a[i].length; j++){
174                 r[r.length] = a[i][j];
175             }
176         } else { //否则假定是DOM节点
177             r[r.length] = a[i];
178         }
179     }
180     
181     return r;
182 }
183 
184 //此方法我已修改与原文中有异
185 /**
186  * 添加元素 (如果只有一个参数(无elem)，则直接添加到document.body上)
187  * @param {Object} elem 
188  * @param {Object} parent
189  */
190 function append(parent, elem){
191     if(elem == null){
192         elem = parent;
193         parent = null;
194     }
195     
196     //获取元素数组
197     var elems = checkElem(elem);
198     for(var i=0; i< elems.length; i++){
199         (parent || document.body).appendChild(elems[i]);
200     }
201 }
202 
203 /**
204  * 删除独立的DOM
205  * @param {Object} elem
206  */
207 function remove(elem){
208     if(elem){ elem.parentNode.removeChild(elem) };
209 }
210 
211 /**
212  * 删除一个节点的所有子节点
213  * @param {Object} elem
214  */
215 function empty(elem){
216     while(elem.firstChild){
217         remove(elem.firstChild);
218     }
219 }
220 
221 /**
222  * 阻止事件冒泡
223  * @param {Object} e
224  */
225 function stopBubble(e){
226     if(e && e.stopPropagation){
227         e.stopPropagation();
228     } else {
229         window.event.cancelBubble = true;
230     }
231 }
232 
233 function stopDefault(e){
234     if(e && e.preventDefault){
235         e.preventDefault();
236     } else {
237         window.event.returnValue = false;
238     }
239     return false;
240 }
241 
242 
243 /**
244  * 得到外链样式
245  * @param {Object} elem
246  * @param {String} name
247  */
248 function getStyle(elem, name){
249     if(elem.style[name]){
250         return elem.style[name];
251     } else if(elem.currentStyle){ //如果ie
252         return elem.currentStyle[name];
253     } else if(document.defaultView && document.defaultView.getComputedStyle){ //如果是不是w3c方法
254         name = name.replace(/([A-Z])/g, ‘-$1‘);
255         name = name.toLowerCase();
256         
257         //获取样式
258         var s = document.defaultView.getComputedStyle(elem, ‘‘);
259         return s && s.getPropertyValue(name);
260     } else {
261         return null;
262     }
263 }
264 
265 /**
266  * 获取元素的x位置
267  * @param {String} elem
268  */
269 function pageX(elem){
270     return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
271 }
272 
273 /**
274  * 获取元素的Y位置
275  * @param {String} elem
276  */
277 function pageY(elem){
278     return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
279 }
280 
281 /**
282  * 获取元素相对于父级的x位置
283  * @param {String} elem
284  */
285 function parentX(elem){
286     return elem.parentNode == elem.offsetParent ? elem.offsetLeft : pageX(elem) - pageX(elem.parentNode);
287 }
288 
289 /**
290  * 获取元素相对于父级的Y位置
291  * @param {String} elem
292  */
293 function parentY(elem){
294     return elem.parentNode == elem.offsetParent ? elem.offsetTop : pageY(elem) - pageY(elem.parentNode);
295 }
296 
297 /**
298  * 查找元素的左端位置
299  * @param {Object} elem
300  */
301 function posX(elem){
302     return parseInt(getStyle(elem, ‘left‘));
303 }
304 
305 /**
306  * 查找元素的顶端位置
307  * @param {Object} elem
308  */
309 function posY(elem){
310     return parseInt(getStyle(elem, ‘top‘));
311 }
312 
313 /**
314  * 设置元素水平位置
315  * @param {Object} elem
316  * @param {Object} pos
317  */
318 function setX(elem, pos){
319     elem.style.left = pos + ‘px‘;
320 }
321 
322 /**
323  * 设置垂直水平位置
324  * @param {Object} elem
325  * @param {Object} pos
326  */
327 function setY(elem, pos){
328     elem.style.top = pos + ‘px‘;
329 }
330 
331 /**
332  * 获取高度
333  * @param {Object} elem
334  */
335 function getHeight(elem){
336     return parseInt(getStyle(elem, ‘height‘));
337 }
338 
339 /**
340  * 获取宽度
341  * @param {Object} elem
342  */
343 function getWidth(elem){
344     return parseInt(getStyle(elem, ‘width‘));
345 }
346 
347 /**
348  * 得到完整的高度，就算对象已隐藏
349  * @param {Object} elem
350  */
351 function fullHeight(elem){
352     //如果元素显示
353     if(getStyle(elem, ‘display‘) != ‘none‘){
354         return elem.offsetHeight || getHeight(elem);
355     }
356     
357     //如果不显示，则复原css
358     var old = resetCss(ele, {
359         display: ‘‘,
360         visibility: ‘hidden‘,
361         position: ‘absolute‘
362     });
363     
364     var h = elem.clientHeight || getHeight(elem);
365     restoreCss(elem, old);
366     
367     return h;
368 }
369 
370 /**
371  * 恢复原有设置
372  * @param {String} elem
373  * @param {Object} prop
374  */
375 function resetCss(elem, prop){
376     var old = {};
377     
378     for(var i in prop){
379         old[i] = prop[i];
380         elem.style[i] = prop[i];
381     }
382     return old;
383 }
384 
385 /**
386  * 
387  * @param {String} elem
388  * @param {Object} old
389  */
390 function restoreCss(elem, old){
391     for(var i in old){
392         elem.style[i] = old[i];
393     }
394 }