• 常用的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 }
  • 相关阅读:
    ES6的reduce( )方法 可以数组求和、数组去重、二维数组转一维数组、计算数组中每个元素出现的次数
    防止/禁止页面后退
    CSS预处理器SASS将迁移到Dart Sass
    FormData 对象的使用
    javascript中编码与解码的decodeURI()、decodeURIComponent()区别
    Chrome谷歌浏览器调试技巧小结
    javaweb:tomcat&servlet
    java:Druil连接池
    java:c3p0连接池的使用
    java:JDBC的使用方式
  • 原文地址:https://www.cnblogs.com/shimily/p/3749665.html
Copyright © 2020-2023  润新知