JavaScript初识(三)

来源：cnblogs　　作者：七寸丶　　时间：2018/9/28 16:51:48　　对本文有异议

十三丶JS中的面向对象

　　创建对象的几种常用方式:

　　　　1.使用Object或对象字面量创建对象

　　　　2.工厂模式创建对象

　　　　3.构造函数模式创建对象

　　　　4.原型模式创建对象

　　下面我们详细看一下如何创建对象

　　1.使用Object或对象字面量创建对象

　　JS中最基本创建对象的方式:

        <script type="text/javascript">
            var student = new Object();
            student.name = "alex";
            student.age = "20"
            
        </script>

　　字面量方式创建对象:

            var student = {
                name:"alex",
                age:18
            };

　　2.工厂模式创建对象

　　以上的方式看似简便,但是我们要是创建很多个同类的呢?我们是不是得把以上代码重复n次呢,是否可以像工厂车间那样,不断生产呢?那就让我们看看工厂车间那样,如何"产出"对象

            function createStudent(name,age){
                var obj = new Object();
                obj.name = name;
                obj.age = age;
                return obj;
            }
            
            var student1 = createStudent('easy',20);
            var student2 = createStudent('easy2',20)
            ...
            var studentn = createStudent('easyn',20)

　　3.构造函数模式创建对象

　　　　在上面创建Object这样的原生对象的时候,我们就使用过其构造函数:

var obj = new Object();

　　　　在创建原生数组Array类型对象时也使用过其构造函数:

var arr = new Array(10);  //构造一个初始长度为10的数组对象

　　在进行自定义构造函数创建对象之前,我们先了解一下构造函数和普通函数有什么区别.

　　1丶实际上并不存在创建构造函数的特殊语法,其与普通函数唯一的区别在于调用方法.对于任意函数,使用new操作符调用,那么它就是构造函数;不使用new操作符调用,那么它就是普通函数.

　　2丶按照惯例,我们约定构造函数名以大写字母开头,普通函数以小写字母开头,这样有利于显性区分二者,例如上面的new Array(),new Object().

　　3.使用new操作符调用构造函数时,会经历(1)创建一个新对象(2)将构造函数作用域赋给新对象(指this指向该新对象)(3)执行构造函数代码(4)返回新对象;4个阶段

　　我们使用构造函数将工厂模式的函数重写,并添加一个方法属性

            function Student(name,age){
                this.name = name;
                this.age = age;
                this.alertName = function(){
                    alert(this.name)
                };
            }
            function Fruit(name,color){
                this.name = name;
                this.color = color;
                this.alertName = function(){
                    alert(this.name)
                };
            }

　　4.原型的模式创建对象

　　　　原型链甚至原型继承,是整个JS中最难的一部分,也是最不好理解的一部分.

            //原型模式创建对象
            function Student(){
                this.name = "easy";
                this.age = 20;
            }
            Student.prototype.alertName = function(){
                alert(this.name);
            };
            
            var stu1 = new Student();
            var stu2 = new Student();
            
            stu1.alertName();    //easy
            stu2.alertName();    //easy
            
            alert(stu1.alertName == stu2.alertName);  //true 二者共享同一函数

十四丶定时器

　　(1)一次性定时器

　　　　可以做异步

　　(2)循环周期定时器

　　　　可以做动画

　　JS跟python一样都有垃圾回收机制,但是定时器对象垃圾回收是回收不了的

　　1.setTimeOut()一次性定时器,只在指定时间后执行一次

        <script type="text/javascript">
        <!--一次性定时器-->
        function hello(){
            alert("hello");
        }
        <!--使用方法名字执行方法-->
        var t1 = window.setTimeout('hello',1000);
        var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
        window.cleatTimeout(t1);//去掉定时器
        </script>

　　2.setInterval()

        //循环周期定时器
        setInterval('refreshQuery()',8000);
        function refreshQuery(){
            console.log("每8秒调一次")
        }

　　练习:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <button id = "start">开启定时器</button>
        <button id = "clear">清除定时器</button>
        
        <div id="box"></div>
        <script type="text/javascript">
        var count = 0;
        var timer = null;
        document.getElementById("start").onclick = function(){
            var oDiv = document.getElementById("box");
            clearInterval(timer);
            
            timer = setInterval(function(){
                count += 10;
                oDiv.style.marginLeft = count + "px";
                oDiv.style.marginTop = count/2 +"px"
            },50)
        }
        </script>
    </body>
</html>

View Code

十五丶BOM的介绍

　　　　BOM; Browser Object Model,浏览器对象模型.

　　window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以成为window对象的子对象,DOM是BOM的一部分.

　　1丶弹出系统对话框

　　比如说,alert(1)是window.alert(1)的简写,以为它是window的子方法.

　　系统对话框有三种:

    alert();    //不同浏览器中的外观是不一样的
    confirm();  //兼容不好
    prompt();   //不推荐使用

　　2.打开窗口丶关闭窗口

　　　　(1)打开窗口:

window.open(url,target)

　　url:要打开的地址

　　target:新窗口的位置.可以是:_blank丶_self丶_parent父框架

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <!--行间的js中的open() window不能省略-->
        <button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>
        
        <button>打开百度</button>
        <button onclick="window.close()">关闭</button>
        <button>关闭</button>
        
    </body>
    <script type="text/javascript">
        
        var oBtn = document.getElementsByTagName('button')[1];
        var closeBtn = document.getElementsByTagName('button')[3];
        
        oBtn.onclick = function(){
            open('https://www.baidu.com')
            
            //打开空白页面
//          open('about:blank',"_self")
        }
        closeBtn.onclick = function(){
            if(confirm("是否关闭？")){
                close();
            }
        }
        
    </script>
</html>

　　location对象

　　　　window.location可以简写成location.location 相当于浏览器地址栏,可以将url解析成独立的片段.

　　location对象的属性

　　　　href:跳转

　　　　hash 返回url中#后面的内容,包括#

　　　　host 主机名,包括端口

　　　　hostname 主机名

　　　　pathname url中的路径部分

　　　　protocol 协议一般是http丶https

　　　　search 查询字符串

　　location.href属性举例:

　　　　点击盒子时，进行跳转。

<body>
<div>smyhvae</div>
<script>
 
    var div = document.getElementsByTagName("div")[0];
    div.onclick = function () {
        location.href = "http://www.baidu.com";   //点击div时，跳转到指定链接
 //     window.open("http://www.baidu.com","_blank");  //方式二
    }
</script>
</body>

　　　　5秒后自动跳转到百度。

<script>
    setTimeout(function () {
        location.href = "http://www.baidu.com";
    }, 5000);
</script>

　　location.reload()：重新加载

setTimeout(function(){
         //3秒之后让网页整个刷新
    window.location.reload();
            
            
},3000)

　　navigator对象

　　window.navigator 的一些属性可以获取客户端的一些信息。

　　　　userAgent:系统丶浏览器

　　　　platform;浏览器支持的系统,win/mac/linux

    console.log(navigator.userAgent);
    console.log(navigator.platform);

　　history对象

　　1、后退：

- - 　history.back()
  - 　history.go(-1)：0是刷新

　　2、前进：

- - 　history.forward()
  - 　history.go(1)

　　　　用的不多。因为浏览器中已经自带了这些功能的按钮：

十六丶client丶offset丶scroll系列

　　先来了解一下自执行函数:

(function(window) {
    var a = 5;
    // import
    window.$ = a;
})(window);

1.js

(function(window) {
    var a = 6;
    window.$1 = a;
})(window);

2.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="1.js"></script>
    <script src="2.js"></script>
    <script>
        console.log(window.$);
        console.log(window.$1);
    </script>
    
</body>
</html>

自执行函数

　　1.client系列

　　　　clientTop 内容区域到边框顶部的距离,说白了,就是边框高度

　　　　clietLeft 内容区域到边框左部的距离,说白了就是边框的宽度

　　　　clientWidth 内容区域+左右padding 不包含border 可视宽度

　　　　clientHeight 内容区域+ 上下padding 可视高度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 200px;
                height: 200px;
                /*position: absolute;*/
                border: 10px solid red;
                /*margin: 10px 0px 0px 0px;*/
                padding: 80px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        </div>
    </body>
    <script type="text/javascript">
        /*
         *      clientTop 内容区域到边框顶部的距离 ，说白了，就是边框的高度
         *      clientLeft 内容区域到边框左部的距离，说白了就是边框的宽度
         *      clientWidth 内容区域+左右padding 不包含border  可视宽度
         *      clientHeight 内容区域+ 上下padding   可视高度
         * */
        
        var oBox = document.getElementsByClassName('box')[0];
        console.log(oBox.clientTop);
        console.log(oBox.clientLeft);
        console.log(oBox.clientWidth);
        console.log(oBox.clientHeight);   
        
    </script>
    
</html>

View Code

　　2.屏幕的可视区域

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //屏幕 的可视区域
            window.onload = function(){
                //document.documentElement  获取的是html标签
                console.log(document.documentElement.clientWidth);
                console.log(document.documentElement.clientHeight);
                //窗口大小发生变化时,会调用此方法
                window.onresize = function(){
                    console.log(document.documentElement.clientWidth);
                    console.log(document.documentElement.clientHeight);
                }
            }
        </script>
    </body>
</html>

　　3.offset系列

　　　　offsetWidth占位宽内容+padding+border

　　　　offsetHeight 占位高

　　　　offsetTop 如果盒子没有设置定位到body的顶部的距离,如果盒子设置定位,那么是以父辈为基准的Top值

　　　　offsetLeft:如果盒子没有设置定位到body的左部的距离,如果盒子设置定位,那么是以父辈为基准的left值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
        </style>
        
    </head>
    <body style="height: 2000px">
        <div>
            <div class="wrap" style=" width: 300px;height: 300px;background-color: green;position: relative; top: 20px;">
                <div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top:60px;left: 30px;">            
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            var box = document.getElementById('box')
            /*
             offsetWidth占位宽  内容+padding+border
             offsetHeight占位高 
             * offsetTop: 如果盒子没有设置定位 到body的顶部的距离,如果盒子设置定位，那么是以父辈为基准的top值
             * offsetLeft： 如果盒子没有设置定位 到body的左部的距离，如果盒子设置定位，那么是以父辈为基准的left值
             
             * */
            console.log(box.offsetTop);
            console.log(box.offsetLeft);
            console.log(box.offsetWidth)
            console.log(box.offsetHeight)
            
        }
        
    </script>
</html>

View Code

　　4.scroll系列

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{padding: 0;margin: 0;}
        </style>
    </head>
    <body style="width: 2000px;height: 2000px;">
        <div style="height: 200px;background-color: red;"></div>
        <div style="height: 200px;background-color: green;"></div>
        <div style="height: 200px;background-color: yellow;"></div>
        <div style="height: 200px;background-color: blue;"></div>
        <div style="height: 200px;background-color: gray;"></div>
        <div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
            <p>路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
                路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
                路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
                路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
            </p>
            
        </div>
        
        
    </body>
    <script type="text/javascript">
        
        window.onload = function(){
            
            //实施监听滚动事件
            window.onscroll = function(){
//                console.log(1111)
//                console.log('上'+document.documentElement.scrollTop)
//                console.log('左'+document.documentElement.scrollLeft)
//                console.log('宽'+document.documentElement.scrollWidth)
//                console.log('高'+document.documentElement.scrollHeight)
                
                
            }
            
            var s = document.getElementById('scroll');
            
            s.onscroll = function(){
//            scrollHeight : 内容的高度+padding  不包含边框
                console.log('上'+s.scrollTop)
                console.log('左'+s.scrollLeft)
                console.log('宽'+s.scrollWidth)
                console.log('高'+s.scrollHeight)
            }
        }
        
    </script>
</html>

View Code

固定导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin:0;
        }
        .header{
            width: 100%;
            height: 80px;
            background-color: red;
        }
        .content{
            width: 100%;
            height: 1000px;
            background-color: purple;
            /*position: relative;*/
            
        }
        .fixTop{
            width: 100%;
            height: 100px;
            background-color: green;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
        }
        
        .input{
            width: 400px;
            height: 60px;
            background-color: yellow;
            position: absolute;
            left: 50%;
            margin-left: -200px;
            top: 150px;
            
        }
    </style>
</head>
<body>
    
    <div class="header">
        
    </div>
 
    <div class="content">
        
        
        <div class="input"></div>
    </div>
    <div class="fixTop" style="display: none;"></div>
    <script>
        
        window.onload = function() {
            var fromTop = document.getElementsByClassName('input')[0].offsetTop;
            var fixBox = document.getElementsByClassName('fixTop')[0];
            console.log(fromTop);
            var count = 0;
            var timer = null;
            window.onscroll = function() {
                var htmlTop = document.documentElement.scrollTop;
                console.log(htmlTop);
                
                if (htmlTop >= fromTop) {
                    clearInterval(timer);
                    timer = setInterval(function () {
                        count+=10;
                        fixBox.style.display = 'block';
                        // fixBox.style.opacity = count;
                        fixBox.style.height = count+'px';
                        if (count == 100){
                            console.log("11111111111111111")
                            clearInterval(timer);
                            count = 0
                        }
                    
                    },200)
                }else{
                    fixBox.style.display = 'none';
                }
                
            }
        }
    </script>
 
    
</body>
</html>

View Code

友情链接：直通硅谷　点职佳　北美留学生论坛

JavaScript热门文章

echarts 饼图 + 全屏显示

js正则匹配以{开头,以}结尾的表达式怎么写？-附源码

echarts 实现数据(tooltip)自动轮播插件

Js设置博客园主题色(theme-color)

elementUI 设置input的只读或禁用的方法

超级好用的流程图js框架值得收藏

layui table+复杂表头+合并单元格

获取地理位置

如何使用JavaScript导入和导出Excel文件

WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

JavaScript推荐文章

一些八股：1.fetch 的理解。2.let、const、var

电子表格转身购物车：三步轻松实现

Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)

IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder

可视化—gojs 超多超实用经验分享(三)

PixiJS源码分析系列：第一章从最简单的例子入手

WebRTC入门

前端 Array.sort() 源码学习

【技巧】JS代码这么写，前端小姐姐都会爱上你

【JS】await异常捕获，这样做才完美

十三丶JS中的面向对象

创建对象的几种常用方式:

1.使用Object或对象字面量创建对象

2.工厂模式创建对象

3.构造函数模式创建对象

4.原型模式创建对象

下面我们详细看一下如何创建对象

1.使用Object或对象字面量创建对象

JS中最基本创建对象的方式:

字面量方式创建对象:

2.工厂模式创建对象

以上的方式看似简便,但是我们要是创建很多个同类的呢?我们是不是得把以上代码重复n次呢,是否可以像工厂车间那样,不断生产呢?那就让我们看看工厂车间那样,如何"产出"对象

3.构造函数模式创建对象

在上面创建Object这样的原生对象的时候,我们就使用过其构造函数:

在创建原生数组Array类型对象时也使用过其构造函数:

在进行自定义构造函数创建对象之前,我们先了解一下构造函数和普通函数有什么区别.

1丶实际上并不存在创建构造函数的特殊语法,其与普通函数唯一的区别在于调用方法.对于任意函数,使用new操作符调用,那么它就是构造函数;不使用new操作符调用,那么它就是普通函数.

2丶按照惯例,我们约定构造函数名以大写字母开头,普通函数以小写字母开头,这样有利于显性区分二者,例如上面的new Array(),new Object().

3.使用new操作符调用构造函数时,会经历(1)创建一个新对象(2)将构造函数作用域赋给新对象(指this指向该新对象)(3)执行构造函数代码(4)返回新对象;4个阶段

我们使用构造函数将工厂模式的函数重写,并添加一个方法属性

4.原型的模式创建对象

原型链甚至原型继承,是整个JS中最难的一部分,也是最不好理解的一部分.

十四丶定时器

(1)一次性定时器

可以做异步

(2)循环周期定时器

可以做动画

JS跟python一样都有垃圾回收机制,但是定时器对象垃圾回收是回收不了的

1.setTimeOut()一次性定时器,只在指定时间后执行一次

2.setInterval()

练习:

十五丶BOM的介绍

BOM; Browser Object Model,浏览器对象模型.

window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以成为window对象的子对象,DOM是BOM的一部分.

1丶弹出系统对话框

比如说,alert(1)是window.alert(1)的简写,以为它是window的子方法.

系统对话框有三种:

2.打开窗口丶关闭窗口

(1)打开窗口:

url:要打开的地址

target:新窗口的位置.可以是:_blank丶_self丶_parent父框架

location对象

window.location可以简写成location.location 相当于浏览器地址栏,可以将url解析成独立的片段.

location对象的属性

href:跳转

hash 返回url中#后面的内容,包括#

host 主机名,包括端口

hostname 主机名

pathname url中的路径部分

protocol 协议一般是http丶https

search 查询字符串

location.href属性举例:

点击盒子时，进行跳转。

5秒后自动跳转到百度。

location.reload()：重新加载

navigator对象

window.navigator 的一些属性可以获取客户端的一些信息。

userAgent:系统丶浏览器

platform;浏览器支持的系统,win/mac/linux

history对象

1、后退：

history.back()

history.go(-1)：0是刷新

2、前进：

history.forward()

history.go(1)

用的不多。因为浏览器中已经自带了这些功能的按钮：

十六丶client丶offset丶scroll系列

先来了解一下自执行函数:

1.client系列

clientTop 内容区域到边框顶部的距离,说白了,就是边框高度

clietLeft 内容区域到边框左部的距离,说白了就是边框的宽度

clientWidth 内容区域+左右padding 不包含border 可视宽度

clientHeight 内容区域+ 上下padding 可视高度

2.屏幕的可视区域

3.offset系列

offsetWidth占位宽 内容+padding+border

offsetHeight 占位高

offsetTop 如果盒子没有设置定位到body的顶部的距离,如果盒子设置定位,那么是以父辈为基准的Top值

offsetLeft:如果盒子没有设置定位到body的左部的距离,如果盒子设置定位,那么是以父辈为基准的left值

　　创建对象的几种常用方式:

　　　　1.使用Object或对象字面量创建对象

　　　　2.工厂模式创建对象

　　　　3.构造函数模式创建对象

　　　　4.原型模式创建对象

　　下面我们详细看一下如何创建对象

　　1.使用Object或对象字面量创建对象

　　JS中最基本创建对象的方式:

　　字面量方式创建对象:

　　2.工厂模式创建对象

　　以上的方式看似简便,但是我们要是创建很多个同类的呢?我们是不是得把以上代码重复n次呢,是否可以像工厂车间那样,不断生产呢?那就让我们看看工厂车间那样,如何"产出"对象

　　3.构造函数模式创建对象

　　　　在上面创建Object这样的原生对象的时候,我们就使用过其构造函数:

　　　　在创建原生数组Array类型对象时也使用过其构造函数:

　　在进行自定义构造函数创建对象之前,我们先了解一下构造函数和普通函数有什么区别.

　　1丶实际上并不存在创建构造函数的特殊语法,其与普通函数唯一的区别在于调用方法.对于任意函数,使用new操作符调用,那么它就是构造函数;不使用new操作符调用,那么它就是普通函数.

　　2丶按照惯例,我们约定构造函数名以大写字母开头,普通函数以小写字母开头,这样有利于显性区分二者,例如上面的new Array(),new Object().

　　3.使用new操作符调用构造函数时,会经历(1)创建一个新对象(2)将构造函数作用域赋给新对象(指this指向该新对象)(3)执行构造函数代码(4)返回新对象;4个阶段

　　我们使用构造函数将工厂模式的函数重写,并添加一个方法属性

　　4.原型的模式创建对象

　　　　原型链甚至原型继承,是整个JS中最难的一部分,也是最不好理解的一部分.

　　(1)一次性定时器

　　　　可以做异步

　　(2)循环周期定时器

　　　　可以做动画

　　JS跟python一样都有垃圾回收机制,但是定时器对象垃圾回收是回收不了的

　　1.setTimeOut()一次性定时器,只在指定时间后执行一次

　　2.setInterval()

　　练习:

　　　　BOM; Browser Object Model,浏览器对象模型.

　　window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以成为window对象的子对象,DOM是BOM的一部分.

　　1丶弹出系统对话框

　　比如说,alert(1)是window.alert(1)的简写,以为它是window的子方法.

　　系统对话框有三种:

　　2.打开窗口丶关闭窗口

　　　　(1)打开窗口:

　　url:要打开的地址

　　target:新窗口的位置.可以是:_blank丶_self丶_parent父框架

　　location对象

　　　　window.location可以简写成location.location 相当于浏览器地址栏,可以将url解析成独立的片段.

　　location对象的属性

　　　　href:跳转

　　　　hash 返回url中#后面的内容,包括#

　　　　host 主机名,包括端口

　　　　hostname 主机名

　　　　pathname url中的路径部分

　　　　protocol 协议一般是http丶https

　　　　search 查询字符串

　　location.href属性举例:

　　　　点击盒子时，进行跳转。

　　　　5秒后自动跳转到百度。

　　location.reload()：重新加载

　　navigator对象

　　window.navigator 的一些属性可以获取客户端的一些信息。

　　　　userAgent:系统丶浏览器

　　　　platform;浏览器支持的系统,win/mac/linux

　　history对象

　　1、后退：

　history.back()

　history.go(-1)：0是刷新

　　2、前进：

　history.forward()

　history.go(1)

　　　　用的不多。因为浏览器中已经自带了这些功能的按钮：

　　先来了解一下自执行函数:

　　1.client系列

　　　　clientTop 内容区域到边框顶部的距离,说白了,就是边框高度

　　　　clietLeft 内容区域到边框左部的距离,说白了就是边框的宽度

　　　　clientWidth 内容区域+左右padding 不包含border 可视宽度

　　　　clientHeight 内容区域+ 上下padding 可视高度

　　2.屏幕的可视区域

　　3.offset系列

　　　　offsetWidth占位宽内容+padding+border

　　　　offsetHeight 占位高

　　　　offsetTop 如果盒子没有设置定位到body的顶部的距离,如果盒子设置定位,那么是以父辈为基准的Top值

　　　　offsetLeft:如果盒子没有设置定位到body的左部的距离,如果盒子设置定位,那么是以父辈为基准的left值

　　4.scroll系列