返回列表 回复 发帖

[JavaScript] 常用的js函数

  1. function $(){ return document.getElementById(arguments[0])};

  2. /**
  3. * 得到上一个元素
  4. * @param {Object} elem
  5. */
  6. function prev(elem){
  7.     do{
  8.         elem = elem.previousSibling;
  9.     } while(elem && elem.nodeType != 1);
  10.     return elem;
  11. }

  12. /**
  13. * 得到下一个元素
  14. * @param {Object} elem
  15. */
  16. function next(elem){
  17.     do{
  18.         elem = elem.nextSibling;
  19.     } while(elem && elem.nodeType != 1);
  20.     return elem;
  21. }

  22. /**
  23. * 得到第一个元素
  24. * @param {Object} elem
  25. */
  26. function first(elem){
  27.     elem = elem.firstChild;
  28.     return elem && elem.nodeType != 1 ? next(elem) : elem;
  29. }

  30. /**
  31. * 得到最后一个元素
  32. * @param {Object} elem
  33. */
  34. function last(elem){
  35.     elem = elem.lastChild;
  36.     return elem && elem.nodeType != 1 ? prev(elem) : elem;
  37. }

  38. /**
  39. * 得到父元素
  40. * @param {Object} elem
  41. * @param {Number} num 需要寻找的父级级别
  42. */
  43. function parent(elem, num){
  44.     num = num || 1;
  45.     for(var i=0; i<num; i++){
  46.         if(elem != null) elem = elem.parentNode; //原书中这块有错
  47.     }
  48.     return elem;
  49. }

  50. /**
  51. * 得到相关name元素
  52. * @param {String} name
  53. * @param {Object} elem
  54. */
  55. function tag(name, elem){
  56.     return (elem || document).getElementsByTagName(name)
  57. }

  58. /**
  59. * 根据tag寻找
  60. * @param {String} name
  61. * @param {String} type
  62. */
  63. function hasClass(name, type){
  64.     var r = [];
  65.     var re = new RegExp('(^|\\s)'+name+'(\\s|$)');
  66.     var e = document.getElementsByTagName(type || '*');
  67.     for(var i=0; i<e.length; i++){
  68.         if(re.test(e[i].className)){
  69.             r.push(e[i]);
  70.         }
  71.     }
  72.     return r;
  73.     //http://www.cnblogs.com/rubylouvre/archive/2009/09/01/1557765.html //司徒兄有不同的看法
  74. }

  75. /**
  76. * 获取元素文本
  77. * @param {Object} e
  78. */
  79. function text(e){
  80.     var t = '';
  81.     e = e.childNodes || e;
  82.     for(var i=0; i<e.length; i++){
  83.         //如果不是元素,则追加其文本值
  84.         t += e[i].nodeType != 1 ? e[i].nodeValue : text(e[i].childNodes);
  85.     }
  86.     return t;
  87. }

  88. /**
  89. *
  90. * @param {String} elem
  91. * @param {String} name
  92. * @param {String} value
  93. */
  94. function attr(elem, name, value){
  95.     if(!name || name.constructor != String){
  96.         return '';
  97.     }
  98.    
  99.     //检查name的属性是否在怪异命名情形中
  100.     name = {'for': 'htmlFor', 'class': 'className'}[name] || name;
  101.    
  102.     if(typeof value != 'undefined'){
  103.         elem[name] = value;
  104.         
  105.         if(elem.setAttribute){
  106.             elem.setAttribute(name, value);
  107.         }
  108.     }
  109.    
  110.     return elem[name] || elem.getAttribute(name) || '';
  111. }


  112. /**
  113. * 在另一个元素之前插件元素
  114. * @param {Object} parent
  115. * @param {Object} before
  116. * @param {String} elem
  117. */
  118. function before(parent, before, elem){
  119.     if(elem == null){
  120.         elem = before;
  121.         before = parent;
  122.         parent = before.parentNode;
  123.     }
  124.    
  125.     //获取元素的新数组
  126.     var elems = checkElem(elem);
  127.    
  128.     //向后遍历
  129.     for(var i=elems.length; i>=0; i--){
  130.         parent.insertBefore(elems[i], before);
  131.     }
  132. }

  133. /**
  134. * 创建元素
  135. * @param {Object} elem
  136. */
  137. function create(elem){
  138.     //测试是否用命名空间来创建新的元素
  139.     return document.createElementNS ? document.createElementNS('http://www.w3.org/1999/xhtml', elem) : document.createElement(elem);
  140. }

  141. /**
  142. * before 辅助函数
  143. * @param {Object} elem
  144. */
  145. function checkElem(a){
  146.     var r = [];
  147.     if(a.constructor != Array){ a = [a]};
  148.     for(var i=0; i<a.length; i++){
  149.         //如果是字符串
  150.         if(a[i].constructor == String){
  151.             //用一个临时元素来存放HTML
  152.             var div = document.createElement('div');
  153.             div.innerHTML = a[i];
  154.             //提取DOM结构到临时的div中
  155.             for(var j=0; j<div.childNodes.length; j++){
  156.                 r[r.length] = div.childNodes[j];
  157.             }
  158.         } else if(a[i].length){ //如果它是数组
  159.             //假定DOM节点数组
  160.             for(var j=0; j<a[i].length; j++){
  161.                 r[r.length] = a[i][j];
  162.             }
  163.         } else { //否则假定是DOM节点
  164.             r[r.length] = a[i];
  165.         }
  166.     }
  167.    
  168.     return r;
  169. }

  170. //此方法我已修改与原文中有异
  171. /**
  172. * 添加元素 (如果只有一个参数(无elem),则直接添加到document.body上)
  173. * @param {Object} elem
  174. * @param {Object} parent
  175. */
  176. function append(parent, elem){
  177.     if(elem == null){
  178.         elem = parent;
  179.         parent = null;
  180.     }
  181.    
  182.     //获取元素数组
  183.     var elems = checkElem(elem);
  184.     for(var i=0; i< elems.length; i++){
  185.         (parent || document.body).appendChild(elems[i]);
  186.     }
  187. }

  188. /**
  189. * 删除独立的DOM
  190. * @param {Object} elem
  191. */
  192. function remove(elem){
  193.     if(elem){ elem.parentNode.removeChild(elem) };
  194. }

  195. /**
  196. * 删除一个节点的所有子节点
  197. * @param {Object} elem
  198. */
  199. function empty(elem){
  200.     while(elem.firstChild){
  201.         remove(elem.firstChild);
  202.     }
  203. }

  204. /**
  205. * 阻止事件冒泡
  206. * @param {Object} e
  207. */
  208. function stopBubble(e){
  209.     if(e && e.stopPropagation){
  210.         e.stopPropagation();
  211.     } else {
  212.         window.event.cancelBubble = true;
  213.     }
  214. }

  215. function stopDefault(e){
  216.     if(e && e.preventDefault){
  217.         e.preventDefault();
  218.     } else {
  219.         window.event.returnValue = false;
  220.     }
  221.     return false;
  222. }


  223. /**
  224. * 得到外链样式
  225. * @param {Object} elem
  226. * @param {String} name
  227. */
  228. function getStyle(elem, name){
  229.     if(elem.style[name]){
  230.         return elem.style[name];
  231.     } else if(elem.currentStyle){ //如果ie
  232.         return elem.currentStyle[name];
  233.     } else if(document.defaultView && document.defaultView.getComputedStyle){ //如果是不是w3c方法
  234.         name = name.replace(/([A-Z])/g, '-$1');
  235.         name = name.toLowerCase();
  236.         
  237.         //获取样式
  238.         var s = document.defaultView.getComputedStyle(elem, '');
  239.         return s && s.getPropertyValue(name);
  240.     } else {
  241.         return null;
  242.     }
  243. }

  244. /**
  245. * 获取元素的x位置
  246. * @param {String} elem
  247. */
  248. function pageX(elem){
  249.     return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
  250. }

  251. /**
  252. * 获取元素的Y位置
  253. * @param {String} elem
  254. */
  255. function pageY(elem){
  256.     return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
  257. }

  258. /**
  259. * 获取元素相对于父级的x位置
  260. * @param {String} elem
  261. */
  262. function parentX(elem){
  263.     return elem.parentNode == elem.offsetParent ? elem.offsetLeft : pageX(elem) - pageX(elem.parentNode);
  264. }

  265. /**
  266. * 获取元素相对于父级的Y位置
  267. * @param {String} elem
  268. */
  269. function parentY(elem){
  270.     return elem.parentNode == elem.offsetParent ? elem.offsetTop : pageY(elem) - pageY(elem.parentNode);
  271. }

  272. /**
  273. * 查找元素的左端位置
  274. * @param {Object} elem
  275. */
  276. function posX(elem){
  277.     return parseInt(getStyle(elem, 'left'));
  278. }

  279. /**
  280. * 查找元素的顶端位置
  281. * @param {Object} elem
  282. */
  283. function posY(elem){
  284.     return parseInt(getStyle(elem, 'top'));
  285. }

  286. /**
  287. * 设置元素水平位置
  288. * @param {Object} elem
  289. * @param {Object} pos
  290. */
  291. function setX(elem, pos){
  292.     elem.style.left = pos + 'px';
  293. }

  294. /**
  295. * 设置垂直水平位置
  296. * @param {Object} elem
  297. * @param {Object} pos
  298. */
  299. function setY(elem, pos){
  300.     elem.style.top = pos + 'px';
  301. }

  302. /**
  303. * 获取高度
  304. * @param {Object} elem
  305. */
  306. function getHeight(elem){
  307.     return parseInt(getStyle(elem, 'height'));
  308. }

  309. /**
  310. * 获取宽度
  311. * @param {Object} elem
  312. */
  313. function getWidth(elem){
  314.     return parseInt(getStyle(elem, 'width'));
  315. }

  316. /**
  317. * 得到完整的高度,就算对象已隐藏
  318. * @param {Object} elem
  319. */
  320. function fullHeight(elem){
  321.     //如果元素显示
  322.     if(getStyle(elem, 'display') != 'none'){
  323.         return elem.offsetHeight || getHeight(elem);
  324.     }
  325.    
  326.     //如果不显示,则复原css
  327.     var old = resetCss(ele, {
  328.         display: '',
  329.         visibility: 'hidden',
  330.         position: 'absolute'
  331.     });
  332.    
  333.     var h = elem.clientHeight || getHeight(elem);
  334.     restoreCss(elem, old);
  335.    
  336.     return h;
  337. }

  338. /**
  339. * 恢复原有设置
  340. * @param {String} elem
  341. * @param {Object} prop
  342. */
  343. function resetCss(elem, prop){
  344.     var old = {};
  345.    
  346.     for(var i in prop){
  347.         old[i] = prop[i];
  348.         elem.style[i] = prop[i];
  349.     }
  350.     return old;
  351. }

  352. /**
  353. *
  354. * @param {String} elem
  355. * @param {Object} old
  356. */
  357. function restoreCss(elem, old){
  358.     for(var i in old){
  359.         elem.style[i] = old[i];
  360.     }
  361. }
复制代码
  1. /**
  2. * 隐藏元素
  3. * @param {String} elem
  4. */
  5. function hide(elem){
  6.     var curDisplay = getStyle(elem, 'display');
  7.    
  8.     if(curDisplay != 'none'){
  9.         elem.oldDisplay = curDisplay;
  10.     }
  11.     elem.style.display = 'none';
  12. }

  13. /**
  14. * 显示元素
  15. * @param {String} elem
  16. */
  17. function show(elem){
  18.     elem.style.display = elem.oldDisply || 'block';
  19. }

  20. /**
  21. * 设置透明度
  22. * @param {Object} elem
  23. * @param {Object} level (0-100)
  24. */
  25. function setOpacity(elem, level){
  26.     if(elem.filters){ //如果是IE
  27.         elem.style.filter = 'alpha(opacity=' + level + ')';
  28.         //必须设置zoom,要不然透明度在IE下不生效  From:http://blog.csdn.net/dxx1988/article/details/6581430
  29.         elem.style.zoom = 1;
  30.     } else { //否则是W3C
  31.         elem.style.opacity = level / 100;
  32.     }
  33. }

  34. /**
  35. * 滑动
  36. * @param {Object} elem
  37. */
  38. function slideDown(elem){
  39.     //elem.style.height = '0px';
  40.    
  41.     show(elem);
  42.     var h = fullHeight(elem);
  43.    
  44.     for(var i=0; i<=100; i+=5){
  45.         (function(){
  46.             var pos = i;
  47.             
  48.             setTimeout(function(){
  49.                 elem.style.height = (pos/100) * h + 'px';
  50.             }, (pos + 1) * 5);
  51.         })();
  52.     }
  53. }
  54. //slideDown($('pText'));
  55. //alert(fullHeight($('pText')));

  56. /**
  57. * 透明度渐显 From: http://mrthink.net/js-fadein-fadeout-fadeto/
  58. * @param {Object} elem
  59. * @param {Number} speed 淡入速度,正整数(可选)
  60. * @param {Number} opacity 淡入到指定的透明度,0~100(可选)
  61. */
  62. function fadeInThink(elem, speed, opacity){
  63.     speed = speed || 20;
  64.     opacity = opacity || 100;
  65.    
  66.     show(elem);
  67.     setOpacity(elem, 0);
  68.     //初始化透明度变化值为0
  69.     var val = 0;
  70.     //循环将透明值以5递增,即淡入效果
  71.     (function(){
  72.         setOpacity(elem, val);
  73.         val += 5;
  74.         if (val <= opacity) {
  75.             setTimeout(arguments.callee, speed)
  76.         }
  77.     })();

  78. }


  79. /**
  80. * 透明度渐显
  81. * @param {Object} elem
  82. */
  83. function fadeIn(elem){
  84.     //setOpacity(emel, 0);
  85.    
  86.     show(elem);
  87.     for(var i=0; i<=100; i+=10){
  88.         (function(){
  89.             var pos = i;
  90.             setTimeout(function(){
  91.                 setOpacity(elem, pos);
  92.             }, (pos + 1) * 10);
  93.         })();
  94.     }
  95. }

  96. /**
  97. * 透明度渐隐 From: http://mrthink.net/js-fadein-fadeout-fadeto/
  98. * @param {Object} elem
  99. */
  100. function fadeOut(elem){
  101.     var val = 100;
  102.    
  103.     (function(){
  104.         setOpacity(elem, val);
  105.         val -= 5;
  106.         if(val >= 0){
  107.             setTimeout(arguments.callee, 50);
  108.         } else if(val < 0){
  109.             hide(elem);
  110.         }
  111.     })();
  112. }

  113. //fadeInThink($('pText'));

  114. /**
  115. * 光标的水平位置
  116. * @param {Object} e
  117. */
  118. function getX(e){
  119.     e = e || window.event;
  120.    
  121.     return e.pageX || e.clientX + document.body.scrollLeft;
  122. }

  123. /**
  124. * 光标的垂直位置
  125. * @param {Object} e
  126. */
  127. function getY(e){
  128.     e = e || window.event;
  129.    
  130.     return e.pageY || e.clientY + document.body.scrollTop;
  131. }

  132. /**
  133. * 获得鼠标相对于当前元素的X位置
  134. * @param {Object} e
  135. */
  136. function getElementX(e){
  137.     return (e && e.layerX) || window.event.offsetX;
  138. }

  139. /**
  140. * 获得鼠标相对于当前元素的Y位置
  141. * @param {Object} e
  142. */
  143. function getElementY(e){
  144.     return (e && e.layerY) || window.event.offsetY;
  145. }

  146. /**
  147. * 当前页面的高度
  148. */
  149. function pageHeight(){
  150.     return document.body.scrollHeight;
  151. }

  152. /**
  153. * 当前页面的宽度
  154. */
  155. function pageWidth(){
  156.     return document.body.scrollWidth;
  157. }

  158. //alert(pageHeight());

  159. /**
  160. * 视口的高度
  161. */
  162. function windowHeight(){
  163.     var de = document.documentElement;
  164.    
  165.     return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
  166. }

  167. /**
  168. * 视口的高度
  169. */
  170. function windowWidth(){
  171.     var de = document.documentElement;
  172.    
  173.     return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
  174. }

  175. /**
  176. * 浏览器水平滚动位置
  177. */
  178. function scrollX(){
  179.     var de = document.documentElement;
  180.    
  181.     return self.pageOffsetset ||  (de && de.scrollLeft) || document.body.scrollLeft;
  182. }

  183. /**
  184. * 浏览器垂直滚动位置
  185. */
  186. function scrollY(){
  187.     var de = document.documentElement;
  188.    
  189.     return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
  190. }
复制代码
不明觉厉
返回列表