盘点JavaScript中那些进阶操作知识(下篇)

时间:2022-05-20 14:25:42

盘点JavaScript中那些进阶操作知识(下篇)

大家好,我是IT共享者,人称皮皮。上篇文章给大家分享了盘点JavaScript中那些进阶操作知识(上篇),这篇文章继续来看看趴!

前言

相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。

1.Javascript刷新页面

  1. history.go(0)  
  2. location.reload()  
  3. location=location  
  4. location.assign(location)  
  5. document.execCommand('Refresh')  
  6. window.navigate(location)  
  7. location.replace(location)  
  8. document.URL=location.href 

2.Js浏览器兼容问题

1).浏览器事件监听

  1. function addEventhandler(target,type,fn,cap){ 
  2.             if(target.addEventListener)               /*添加监听事件*/ 
  3.               {        
  4.                 target.addEventListener(type,fn,cap) 
  5.                 } 
  6.             else
  7.                  target.attachEvent('on'+type,fn)  /*IE添加监听事件*/ 
  8.                } 
  9.           } 
  10.        function removeEventhandler(target,type,fn,cap){ 
  11.             if(target.removeEventListener)            /*删除监听事件*/ 
  12.              { 
  13.                 target.removeEventListener(type,fn,cap) 
  14.                 } 
  15.             else
  16.                  target.detachEvent('on'+type,fn)    /*IE删除监听事件*/ 
  17.                } 
  18.           } 

2).鼠标键判断

  1. function bu(event) 
  2. var bt= window.button || event.button; 
  3. if (bt==2) 
  4.   { 
  5.   x=event.clientX 
  6.   y=event.clientY    
  7.   alert("您点击了鼠标右键!坐标为:"+x+','+y) 
  8.   } 
  9. else if(bt==0) 
  10.   { 
  11.     a=event.screenX 
  12.     b=event.screenY 
  13.   alert("您点击了鼠标左键!坐标为:"+a+','+b) 
  14.   } 
  15. else if(bt==1) 
  16.   { 
  17.   alert("您点击了鼠标中键!"); 
  18.   } 

3).判断是否按下某键

  1. function k(event) 
  2. var ke=event.keyCode || event.which 
  3. if(event.shiftKey==1) 
  4.   { 
  5.   alert('您点击了shift'); 
  6.   } 
  7.  alert(ke) 
  8.  alert(event.type) 

4).网页内容节点兼容性

1)).网页可视区域宽高

  1. var w=document.body.offsetWidth|| document.documentElement.clientWidth|| document.body.clientWidth; 
  2. var h=document.body.offsetHeight|| document.documentElement.clientHeight || document.body.clientHeight; 

2)).窗体宽度高度 比可视区域要大

  1. window.innerHeight - 浏览器窗口的内高度(以像素计)  
  2. window.innerWidth - 浏览器窗口的内宽度(以像素计) 

3)).页面滚动条距离顶部的距离

  1. var t=document.documentElement.scrollTop || document.body.scrollTop 

4)).页面滚动条距离左边的距离

  1. var s=document.documentElement.scrollLeft || document.body.scrollLeft 

5)).元素到浏览器边缘的距离

  1. function off(o){   #元素内容距离浏览器边框的距离(含边框) 
  2.        var l=0,r=0; 
  3.        while(o){ 
  4.            l+=o.offsetLeft+o.clientLeft; 
  5.            r+=o.offsetTop+o.clientTop; 
  6.            o=o.offsetParent; 
  7.        } 
  8.        return {left:l,top:r}; 
  9.    } 

6)).获取滚动条高度

  1. // 滚动条的高度 
  2. function getScrollTop() { 
  3. var scrollTop = 0; 
  4. if (document.documentElement && document.documentElement.scrollTop) { 
  5.         scrollTop = document.documentElement.scrollTop; 
  6.     } 
  7. else if (document.body) { 
  8.         scrollTop = document.body.scrollTop; 
  9.     } 
  10. return scrollTop; 

7)).DOM节点操作

  1. function next(o){//获取下一个兄弟节点 
  2.         if (o.nextElementSibling) { 
  3.             return o.nextElementSibling; 
  4.         } else
  5.             return o.nextSibling; 
  6.         }; 
  7.     } 
  8.     function pre(o){//获取上一个兄弟节点 
  9.         if (o.previousElementSibling) { 
  10.             return o.previousElementSibling; 
  11.         } else
  12.             return o.previousSibling; 
  13.         }; 
  14.     } 
  15.     function first(o){//获取第一个子节点 
  16.         if (o.firstElementChild) { 
  17.             return o.firstElementChild;//非IE678支持 
  18.         } else
  19.             return o.firstChild;//IE678支持 
  20.         }; 
  21.     } 
  22.     function last(o){//获取最后一个子节点 
  23.         if (o.lastElementChild) { 
  24.             return o.lastElementChild;//非IE678支持 
  25.         } else
  26.             return o.lastChild;//IE678支持 
  27.         }; 
  28.     } 

8)).窗口的宽高

  1. document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽 
  2. document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高 

9)).屏幕分辨率的宽高

  1. window.screen.height;//屏幕分辨率的高 
  2. window.screen.width;//屏幕分辨率的宽 

10)).坐标

  1. window.screenLeft;//x坐标 
  2. window.screenX;//X坐标 
  3. window.screenTop;//y坐标 
  4. window.screenY;//y坐标 

11)).屏幕可用工作区宽高

  1. window.screen.availHeight  
  2. window.screen.availWidth 

5).事件源获取

  1. e.target || e.srcElement 

6).行外样式

  1. funtion getStyle(obj,name){ 
  2.    if(obj.currentStyle){ 
  3.       //IE 
  4.     return obj.currentStyle[name]; 
  5.     }else
  6.     //Chrom,FF 
  7.    return getComputedStyle(obj,false)[name]; 
  8.       } 
  9.  } 

7).阻止事件冒泡函数封装

  1. function pre(event){ 
  2.  
  3.            var e = event || window.event; 
  4.  
  5.            if(e.stopPropagation){   // 通用方式阻止冒泡行为 
  6.  
  7.                e.stopPropagation(); 
  8.  
  9.            }else{    //IE浏览器 
  10.  
  11.                event.cancelBubble = true
  12.  
  13.            } 

8).阻止浏览器默认行为(例如点击右键出来菜单栏)

  1. function stop(event) { 
  2.  
  3.      var e = event || window.event; 
  4.  
  5.      if (e.preventDefault){ 
  6.  
  7.          e.preventDefault();   // 标准浏览器 
  8.  
  9.      }else
  10.  
  11.          e.returnValue = false; // IE浏览器 
  12.  
  13.      } 
  14.  

3.严格模式

  1. "use strict" 

4.判断变量类型

  1. typeof  variable 
  2. instance  instanceof  object 
  3. instance.constructor== object 
  4. Object.prototype.toString.call(instance) 

5.下载服务器端文件

  1. <a href="http://somehost/somefile.zip" download="myfile.zip">Download file</a> 

总结

这篇文章主要介绍了JavaScript的进阶操作命令!希望对大家的学习有所帮助。

原文链接:https://mp.weixin.qq.com/s/J3Xh9MLj9uaZYrcgolFk3g