十三丶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>

十五丶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>

　　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>

　　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>

固定导航栏

<!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>

JavaScript初识(三)的更多相关文章

学习javascript数据结构(三)——集合
前言总括: 本文讲解了数据结构中的[集合]概念,并使用javascript实现了集合. 原文博客地址:学习javascript数据结构(三)--集合知乎专栏&&简书专题:前端进击者 ...
JavaScript的三种工业化调试方法
JavaScript的三种工业化玩法软件工程中任何的语言如果想要写出健壮的代码都需要锋利的工具,当然JavaScript也不例外,很多朋友刚入门的时候往往因为工具选的不对而事半功倍,JavaScri ...
初探JavaScript（三）——JS带我"碰壁"带我飞
已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...
前端笔记知识点整合之JavaScript（三）关于条件判断语句、循环语句那点事
一.条件分支语句条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力 ...
Emscripten教程之连接C++和JavaScript（三）
本文是Emscripten-WebAssembly专栏系列文章之一,更多文章请查看专栏.也可以去作者的博客阅读文章.欢迎加入Wasm和emscripten技术交流群,群聊号码:939206522. E ...
JavaScript中有三个可以对字符串编码的函数，分别是： escape(),encodeURI(),encodeURIComponent()
JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...
【转】SVG与HTML、JavaScript的三种调用方式
原文:https://www.cnblogs.com/guohu/p/5085045.html SVG与HTML.JavaScript的三种调用方式一.在HTMl中访问SVG的DOM 1 2 3 4 ...
JS---课程介绍 + JavaScript分三个部分
Web API---课程介绍 DOM: 概念-----能够说出来--理解作用----记住了----后来理解回顾JS分几个部分---知道 DOM树---能够说出 ...
从ES6重新认识JavaScript设计模式(三): 建造者模式
1 什么是建造者模式? 建造者模式(Builder)是将一个复杂对象的构建层与其表示层相互分离,同样的构建过程可采用不同的表示. 建造者模式的特点是分步构建一个复杂的对象,可以用不同组合或顺序建造出不 ...

随机推荐

EchoServer和EchoClient模型的改进1之多线程
在之前的EchoServer模型个EchoClient模型中,客户端和服务端只是单纯的一一对应的关系,如果存在多个客户端和一个服务端,这就需要具体处理了.在这里我们明显想到的第一种方案是使用多线程处理 ...
[hdu1712]ACboy needs your help分组背包
题意:一共$m$天,$n$门课程,每门课程花费$i$天得到$j$的价值,求最后获得的最大价值解题关键:分组背包练习,注意循环的顺序不能颠倒伪代码: $for$ 所有的组$k$ $for{\rm ...
树莓派 Learning 002 装机后必要的操作 --- 09 root用户密码
树莓派装机后必要的操作 - root用户密码我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 树莓派使用的Linux是debian系统, ...
Learning Python 001 第一个程序
Python 第一个程序我使用的开发工具是PyCharm软件.我们使用的是Python3.5 for windows . 如果你还没有安装PyCharm软件和 Python3.5,请到这里来看如果 ...
Python中使用json.loads解码字符串时出错：ValueError: Expecting property name: line 1 column 1 (char 1)
解决办法,json数据只能用双引号,而不能用单引号
SuperSocket框架中BinaryRequestInfo协议的使用
一.开发环境 1.Windows 10 企业版 64位 2.Microsoft Visual Studio 2017 企业版二.项目开始 1.新建控制台程序,项目名称“BinarySuperSock ...
docker17.09.1-ce 执行systemctl resart docker重启失败的问题
记录在实际操作中碰到的docker问题环境信息: 安装完kolla ocata版本,并且编译成功各openstack 组件的容器镜像 [root@localhost ~]# docker --ver ...
[Xcode 实际操作]三、视图控制器-(7)UINavigationController自定义导航按钮
目录:[Swift]Xcode实际操作本文将演示设置导航按钮的样式,以及设置导航标题区域的样式. import UIKit class FirstSubViewController: UIViewC ...
关于双端队列 deque 模板 && 滑动窗口 (自出)
嗯... deque 即为双端队列,是c++语言中STL库中提供的一个东西,其功能比队列更强大,可以从队列的头与尾进行操作... 但是它的操作与队列十分相似,详见代码1: 1 #include < ...
使用命令安装vue插件
使用命令npm install element-ui --save-dev 安装element-ui. --save-dev表示自动添加配置依赖到package.json文件的devDependenc ...

JavaScript初识(三)

十三丶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值

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

　　　　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系列