盘点JavaScript中那些进阶操作知识（下篇）

相信做网站对 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.which
if(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  variable
instance  instanceof  object
instance.constructor== object
Object.prototype.toString.call(instance)

5.下载服务器端文件

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

总结

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

人生苦短，我用Python！

标签：function,下篇,进阶,JavaScript,else,window,return,document,event
来源： https://www.cnblogs.com/dcpeng/p/15669481.html