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

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

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

前言

1.Javascript 刷新页面

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

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

1function 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).鼠标键判断

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

3).判断是否按下某键

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

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

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

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

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

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

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

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

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

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

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

6)).获取滚动条高度

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

7)).DOM 节点操作

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

8)).窗口的宽高

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

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

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

10)).坐标

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

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

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

5).事件源获取

e.target || e.srcElement

6).行外样式

1funtion 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).阻止事件冒泡函数封装

1function 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).阻止浏览器默认行为(例如点击右键出来菜单栏)

1function 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
15}

3.严格模式

"use strict"

4.判断变量类型

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

5.下载服务器端文件

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

总结

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

人生苦短，我用Python！

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

前言

1.Javascript 刷新页面

总结

评论区

相关推荐