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 }