首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >盘点JavaScript中那些进阶操作知识(下篇)

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

作者头像
前端皮皮
发布2021-09-14 16:14:08
发布2021-09-14 16:14:08
5780
举报

前言

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

1.Javascript刷新页面

代码语言: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).浏览器事件监听
代码语言:javascript
复制
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).鼠标键判断
代码语言:javascript
复制
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).判断是否按下某键
代码语言:javascript
复制
function k(event)
{
var ke=event.keyCode || event.which
if(event.shiftKey==1)
  {
  alert('您点击了shift');
  }
 alert(ke)
 alert(event.type)
}
4).网页内容节点兼容性
1)).网页可视区域宽高
代码语言:javascript
复制
var w=document.body.offsetWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
var h=document.body.offsetHeight|| document.documentElement.clientHeight || document.body.clientHeight;
2)).窗体宽度高度 比可视区域要大
代码语言:javascript
复制
window.innerHeight - 浏览器窗口的内高度(以像素计) 
window.innerWidth - 浏览器窗口的内宽度(以像素计)
3)).页面滚动条距离顶部的距离
代码语言:javascript
复制
var t=document.documentElement.scrollTop || document.body.scrollTop
4)).页面滚动条距离左边的距离
代码语言:javascript
复制
var s=document.documentElement.scrollLeft || document.body.scrollLeft
5)).元素到浏览器边缘的距离
代码语言:javascript
复制
  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)).获取滚动条高度
代码语言:javascript
复制
// 滚动条的高度
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节点操作
代码语言:javascript
复制
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)).窗口的宽高
代码语言:javascript
复制
document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽
document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高
9)).屏幕分辨率的宽高
代码语言:javascript
复制
window.screen.height;//屏幕分辨率的高
window.screen.width;//屏幕分辨率的宽
10)).坐标
代码语言:javascript
复制
window.screenLeft;//x坐标
window.screenX;//X坐标
window.screenTop;//y坐标
window.screenY;//y坐标
11)).屏幕可用工作区宽高
代码语言:javascript
复制
window.screen.availHeight 
window.screen.availWidth
5).事件源获取
代码语言:javascript
复制
e.target || e.srcElement
6).行外样式
代码语言:javascript
复制
funtion getStyle(obj,name){
   if(obj.currentStyle){
      //IE
    return obj.currentStyle[name];
    }else{
    //Chrom,FF
   return getComputedStyle(obj,false)[name];
      }
 }
7).阻止事件冒泡函数封装
代码语言:javascript
复制
function pre(event){

           var e = event || window.event;

           if(e.stopPropagation){   // 通用方式阻止冒泡行为

               e.stopPropagation();

           }else{    //IE浏览器

               event.cancelBubble = true;

           }
8).阻止浏览器默认行为(例如点击右键出来菜单栏)
代码语言:javascript
复制
function stop(event) {

     var e = event || window.event;

     if (e.preventDefault){

         e.preventDefault();   // 标准浏览器

     }else{

         e.returnValue = false; // IE浏览器

     }

}

3.严格模式

代码语言:javascript
复制
"use strict"

4.判断变量类型

代码语言:javascript
复制
typeof  variable
instance  instanceof  object
instance.constructor== object
Object.prototype.toString.call(instance)

5.下载服务器端文件

代码语言:javascript
复制
<a href="http://somehost/somefile.zip" download="myfile.zip">Download file</a>

总结

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

看完本文有收获?请转发分享给更多的人

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-08-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 IT共享之家 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
    • 1.Javascript刷新页面
    • 2.Js浏览器兼容问题
      • 1).浏览器事件监听
      • 2).鼠标键判断
      • 3).判断是否按下某键
      • 4).网页内容节点兼容性
      • 5).事件源获取
      • 6).行外样式
      • 7).阻止事件冒泡函数封装
      • 8).阻止浏览器默认行为(例如点击右键出来菜单栏)
    • 3.严格模式
  • 4.判断变量类型
  • 5.下载服务器端文件
    • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档