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

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

前言

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

1.Javascript 刷新页面

history.go(0) location.reload() location=location location.assign(location) document.execCommand('Refresh') window.navigate(location) location.replace(location) document.URL=location.href

2.Js 浏览器兼容问题1).浏览器事件监听

function addEventhandler(target,type,fn,cap){            if(target.addEventListener)               /*添加监听事件*/              {                       target.addEventListener(type,fn,cap)                }            else{                 target.attachEvent('on'+type,fn)  /*IE 添加监听事件*/               }          }       function removeEventhandler(target,type,fn,cap){            if(target.removeEventListener)            /*删除监听事件*/             {                target.removeEventListener(type,fn,cap)                }            else{                 target.detachEvent('on'+type,fn)    /*IE 删除监听事件*/               }          }

2).鼠标键判断

function bu(event){var bt= window.button || event.button;if (bt==2)  {  x=event.clientX  y=event.clientY     alert("您点击了鼠标右键！坐标为:"+x+','+y)  }else if(bt==0)  {    a=event.screenX    b=event.screenY  alert("您点击了鼠标左键！坐标为:"+a+','+b)  }else if(bt==1)  {  alert("您点击了鼠标中键！");  }}

3).判断是否按下某键

function k(event){var ke=event.keyCode || event.whichif(event.shiftKey==1)  {  alert('您点击了 shift');  } alert(ke)alert(event.type)}

4).网页内容节点兼容性1)).网页可视区域宽高

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

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

window.innerHeight - 浏览器窗口的内高度（以像素计） window.innerWidth - 浏览器窗口的内宽度（以像素计）

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

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

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

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

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

  function off(o){   #元素内容距离浏览器边框的距离（含边框）var l=0,r=0;        while(o){            l+=o.offsetLeft+o.clientLeft;            r+=o.offsetTop+o.clientTop;            o=o.offsetParent;        }        return {left:l,top:r};    }

6)).获取滚动条高度

// 滚动条的高度function getScrollTop() {var scrollTop = 0;if (document.documentElement && document.documentElement.scrollTop) {        scrollTop = document.documentElement.scrollTop;    }else if (document.body) {        scrollTop = document.body.scrollTop;    }return scrollTop;}

7)).DOM 节点操作

function next(o){//获取下一个兄弟节点 if (o.nextElementSibling) {            return o.nextElementSibling;        } else{            return o.nextSibling;        };    }    function pre(o){//获取上一个兄弟节点 if (o.previousElementSibling) {            return o.previousElementSibling;        } else{            return o.previousSibling;        };    }    function first(o){//获取第一个子节点 if (o.firstElementChild) {            return o.firstElementChild;//非 IE678 支持        } else{            return o.firstChild;//IE678 支持        };    }    function last(o){//获取最后一个子节点 if (o.lastElementChild) {            return o.lastElementChild;//非 IE678 支持        } else{            return o.lastChild;//IE678 支持        };    }

8)).窗口的宽高

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

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

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

10)).坐标

window.screenLeft;//x 坐标window.screenX;//X 坐标window.screenTop;//y 坐标window.screenY;//y 坐标

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

window.screen.availHeight window.screen.availWidth

5).事件源获取

e.target || e.srcElement

6).行外样式

funtion getStyle(obj,name){   if(obj.currentStyle){      //IE    return obj.currentStyle[name];    }else{    //Chrom,FF   return getComputedStyle(obj,false)[name];      } }

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

function pre(event){           var e = event || window.event;           if(e.stopPropagation){   // 通用方式阻止冒泡行为               e.stopPropagation();           }else{    //IE 浏览器               event.cancelBubble = true;           }

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

function stop(event) {     var e = event || window.event;     if (e.preventDefault){         e.preventDefault();   // 标准浏览器     }else{         e.returnValue = false; // IE 浏览器     }}

3.严格模式

"use strict"

4.判断变量类型

typeof  variableinstance  instanceof  objectinstance.constructor== objectObject.prototype.toString.call(instance)

5.下载服务器端文件

<a href="; download="myfile.zip">Download file</a>

总结

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

人生苦短，我用Python！