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 }
常用的js函数
时间： 2025-01-01 04:41:59