首页 > 代码库 > 《精通javascript》几个简单的函数
《精通javascript》几个简单的函数
精通JavaScript(图灵计算机科学丛书) ,让你大开眼界的 JavaScript 力作,跟随 jQuery 之父到达前所未有的深度,Amazon 五星盛誉图书。
本书是目前最深入的JavaScript图书,讲述了现代JavaScript的所有知识,展现了这门技术将能给网站建设带来如何丰富的体验。本书言简意赅,扩展了读者视野,并关注于基础且重要的主题–现代JavaScript是什么和不是什么,浏览器支持的当前状态,以及需要注意的陷阱等。
书中所有概念都来自于现实案例的分析。前端UI分享
书没有好坏之分,正如人没有绝对的好坏之分一样。书只看对自己这个水平层次的人来说该吸收的东西多少了,能吸收一、两点就够了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 | 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 =http://www.mamicode.com/ 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]; } } |
《精通javascript》几个简单的函数
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。