js奋战持续中。。。

这周真的绝望了，睡了一觉起来感觉啥都忘了，这感觉让人抓狂，无措，那又能怎么办呢，上了贼穿就没有跳船这一说。

第一天：

1、ES5：

（1）保护对象：保护对象的成员（属性和方法）

        如何保护：

                ①四大特性：

                        Object.defineProperties(obj,{

                                "属性名":{

                                        value:实际保存值,

                                        writable:true/false,  //控制这个属性是否被修改

                                        enumerable:true/false, //控制这个属性是否被for in 循环遍历

                                        configurable:true/false, //控制这个属性是否被删除  总开关，一旦设置false，其他特征不允许被修改，一旦设置false，不可逆。

                                }

                        })

                ②三大级别：

                        a、防扩展：禁止给对象添加新属性：Object.preventExtensions(obj);

                        b、密封：禁止给对象添加新属性和删除属性：Object.seal(obj);

                        c、冻结：禁止给对象添加、删除、修改属性：Object.freeze(obj);

        （2）数组的新API：

                ①判断：结果是一个布尔值

                        every：每一个，要求每一个元素都要满足，结果才为true，只要有一个不满足就为false，类似于&&

                        语法：

                                var bool = arr.every(function(val,i,arr){

                                                return  判断条件；

                                })

                        

                        some：某一个，要求每一个元素都不满足，结果才为false，只要有一个满足就为true，类似于||

                        语法：

                                var bool = arr.some(function(val,i,arr){

                                                return  判断条件；

                                })

                ②遍历：将数组中每个元素取出来执行相同或相似的操作

                        forEach：遍历数组，直接修改原数组

                        语法：

                                arr.forEach(function(val,i,arr){

                                        直接做操作；

                                })

                        

                        map：遍历数组，不修改原数组，返回一个新数组

                        语法：

                                var newArr = arr.map(function(val,i,arr){

                                             return  操作结果;

                                })

                ③过滤和汇总

                        过滤：筛选出自己想要的，但是不会修改原数组

                                语法：

                                        var subArr = arr.filter(function(val,i,arr){

                                                        return  判断条件;

                                        })

                        

                        汇总：把数组中的每个元素汇总在一起

                                语法：

                                        var sum = arr.reduce(function(prev,val,i,arr){

                                                        return  prev+val;

                                        },基础值);

        （3）Object.create();  //根据父对象创建子对象，继承已经设置好了

                语法：

                        var 子对象 = Object.create(父对象,{

                                      "自有属性名":{四大特性},

                                        .................

                        })

        （4）面试时：严格模式

                开启：在任何作用域的顶部加："use strict";

                功能：①禁止给未声明的变量赋值--解决全局污染的问题

                          ②静默失败升级为报错

        （5）call/apply/bind：不是自己的方法也能使用

                ①call / apply ：临时替换了函数中的this---借用（相当于立刻调用函数，立刻执行）

                        语法：函数名.call(借用的对象，实参，。。。);  ----单独传入每一个实参

                                   函数名.apply(借用的对象，arr);  ---只能传入一个数组实参，apply会将数组打散成为单个元素

                ②bind :永久替换了函数中的this

                        a：创建了一个和原函数完全相同功能的新函数

                        b：将新函数中的this永久绑定为了指定的对象，别人借不走

                        c：将新函数中的部分参数永久固定

                用法：var 新函数 = 原函数.bind(指定对象,永久实参，。。。);   //不是立刻执行，需要自己调用

                强调：bind绑定的新函数没有办法被call apply借走

                固定套路：

                        ①Math.max/min.apply(Math.arr);

                        ②Object.prototype.toString.call/apply(arr);

                        ③类数组转为普通数组：类数组名 = Array.prototype.slice.call/apply(类数组);

2、ES6 简化EMCAScript

        （1）模板字符串：可以在字符串中放入变量--不需要再做字符串拼接，在字符串中实现了一个简单的js环境

                语法：`我的名字叫${name}`

        （2）块级作用域：

                let 变量名 = 值;

                作用：①禁止声明提前

                           ②添加了块级作用域，一个{}是一个块，变量只能在定义中使用

                           ③记录着当前触发事件的元素的下标

        （3）箭头函数

                     公式：去掉function，（）和{}之间用=>，若形参只有一个，则省略掉（），若函数体只有一句话，省略{}，函数体只有一句话且是return，return和{}都省略

                千万不要简化事件

第二天

1、什么是DOM：Document Object Model（文档对象模型）

将每一个标签/元素/属性/文本/注释，看作了一个DOM节点/元素/对象，提供了一些操作元素的属性和方法。

2、DOM树：document，一个页面只有一个document对象，由浏览器的JS解释器自动生成，可以通过树根找到每一个DOM元素，节点，对象，提供了很多APT

3、每个DOM元素都有三大属性

        （1）xx.nodeType：描述节点的类型

                document节点：9；element节点：1；attribute：2；text节点：3

        （2）xx.nodeValue：属性节点的值，获取属性值

        （3）xx.nodeName：节点的名称--判断xx是什么标签

                   注意：返回的是一个全大写得标签名

        （4）递归：函数中又一次调用了函数自己，迟早会停下来

                何时使用：遍历DOM树，专门用于遍历层级不明确的情况

                如何使用：

                        function 函数名（）{

                                ①第一层要做什么操作直接做；

                                ②判断它有没有下一级，如果有下一级再次调用此函数，只不过传入的实参是它的下一次；

                        }

                缺点：同时开启大量的函数调用，浪费内存

4、遍历层级不明确的API：TreeWalker：一个在DOM树上行走的人，

        缺点：专门为遍历层级不明确的DOM准备

        如何：

                固定公式：

                ①创建tw：

                        let tw=document.createTreeWalker(根元素，NodeFilter.SHOW-ELEMENT);

                ②反复调用nextNode方法找到每一个元素-》找不到为null

                        while((node=tw.nextNode())!=null){

                                    node要做什么操作;

                        }

5、API直接查找元素

        （1）通过HTML的一些特点去找元素

                ①id：var elem=document.getElementById("id"); - 找到了是单个元素，没找到null

                ②tagname/class/name：                        

                        var elems=document.getElementsByTagName/ClassName/Name("标签名/class名");- 找到了是集合，没找到空集合

                 建议：表单控件元素尽量可以不用写class，因为必写name

        （2）通过css选择器去获取元素：

               ① 单个元素：var elem=document.querySelector("任意css选择器");

                ②多个元素：var elems=document.querySelectorAll("任意css选择器");        

面试题：getXXX 和 querySelectoXXX 有什么区别？
        返回结果不同：
            1、getXXX，获取到返回的是一个动态集合HTMLCollection

            2、querySelectoXXX，获取到返回的是一个静态集合NodeList

            动态集合 vs 静态集合
            1、动态集合：根据DOM树的改变，是动态集合也一起改变，每一次修改DOM树，都会悄悄的再次查找DOM
                   缺点：每次都会悄悄重新查找，效率较低，不能使用forEach

            2、静态集合：每一次修改DOM树，静态集合不会发生变化，只会认准你找的时候的第一次找到的结果
                   优点：每次不会悄悄重新查找，效率较高，可以使用forEach

第三天

1、元素的内容：
       *1、elem.innerHTML：获取或设置开始标签到结束标签之间的HTML代码，没有兼容性问题，可以识别标签
        获取：elem.innerHTML
        设置：elem.innerHTML="新内容"

    2、elem.textContent：获取或设置开始标签到结束标签之间的纯文本，具有兼容性问题，不能识别标签
        获取：elem.textContent
        设置：elem.textContent="新内容"
           *老IE：elem.innerText;//第一次碰到小三上位，原本是只有老IE才可以使用的，但是随着各个浏览器的发展，IE没有将就大家，反而是其他主流浏览器去将就了老IE

       *3、input.value：获取或设置单标签（能写内容的单标签）的内容的
        获取：input.value;
        设置：input.value="新内容"

2、元素的属性：
    *1、获取属性值：
        核心DOM：elem.getAttribute("属性名");

        HTML DOM：elem.属性名;

    *2、设置属性值
        核心DOM：elem.setAttribute("属性名","属性值");

        HTML DOM：elem.属性名="属性值";

    *3、删除属性：
        核心DOM：elem.removeAttribute("属性名");

        HTML DOM：elem.属性名="";

     4、判断属性：垃圾，只能判断有没有，不能判断具体是什么
        核心DOM：elem.hasAttribute("属性名");

        真的想要判断，更推荐：
            if(elem.getAttribute("class")=="d1"){
                使用获取的方式能判断出具体是什么class
            }

    强调：HTML DOM确实简单，但是需要注意：
        1、class写为className
        2、只能操作标准属性，不能操作自定义属性
        3、删除的时候，删不干净，有的属性删不干净依然具有功能，比如href没有属性值默认为刷新、disabled就算没有属性值依然是禁用操作...,跟推荐删除的时候使用核心DOM

3、元素的样式：
    1、内联样式：优先级最高，一定会覆盖其他的样式
             仅仅当前元素可用，不会牵一发动全身
        获取样式：elem.style.css属性名
        设置样式：elem.style.css属性名="css属性值"

        唯一的缺点：获取样式时，也只能获取内联样式

    2、样式表：
            //1、获取你想要操作的样式表
            var sheet=document.styleSheets[1];
            //2、获取这个样式表中所有的样式规则
            var rules=sheet.cssRules;
            //3、数出你想要操作的那个样式规则
            var rule=rules[30];
            //4、操作：获取和设置
            console.log(rule.style.background);
            rule.style.background="purple"

第四天：

1、BOM：Browser Object Model：浏览器对象模型：专门用于操作浏览器的API，没有标准（大部分浏览器还是统一的实现了API，除了老IE），BOM使用较少
    重点：定时器、事件对象event

2、window对象介绍：扮演着2个角色
    1、代替了ES中的global，充当全局对象
    2、自己也带有一些属性和方法，指代当前窗口本身

3、window对象提供的东西：
    1、网页打开新链接的方式：4种
        1、替换当前页面，可以后退：
            HTML：<a href="url">内容</a>
              JS：open("url","_self");

        2、替换当前页面，禁止后退： - 场景：电商网站：付款后，禁止后退
            history对象：记录着当前窗口的历史记录，只有有了历史才能前进后退
            location对象：记录着当前窗口的正在打开的url，他有一个方法叫做替换，不会产生历史记录
              JS：location.replace("新url");

        3、在新窗口打开，可以打开多个：
            HTML：<a href="url" target="_blank">内容</a>
              JS：open("url","_blank");

        4、在新窗口打开，只能开打一个：- 场景：电商网站：只允许用户打开一个付款页面
            HTML：<a href="url" target="自定义name">内容</a>
              JS：open("url","自定义");
            意思是：每一个窗口其实底层都有一个名字，如果重新打开相同name，新打开的窗口会将就的窗口给替换掉，_self->自己窗口的名字，_blank->新建一个随机的名字

        总结：
          1、HTML能做的，JS都能做，JS能做的，HTML不一定可以
          2、不同的跳转方式，可以提升用户的体验感

        扩展：a标签的作用：
            1、跳转
            2、锚点
            3、下载：<a href="xx.安装后缀/压缩包后缀">内容</a>
            4、打开：<a href="xx.txt/图片后缀">内容</a>
            5、直接书写javascript：<a href="javascript:js语句;">内容</a> - 可以不用绑定点击事件

    2、window提供的属性和方法：
        属性：获取浏览器的完整大小：outerWidth/Height;
             *获取到浏览器的文档显示区域的大小：innerWidth/Height; - body的大小
              获取到屏幕的完整大小：screen.width/height;

        方法：1、打开窗口：var newW=open("url","target/自定义","width=,height=,left=,top=");
                注意：1、第三个配置参数没有传入时，大小和浏览器一样，并且粘在浏览器上面的，但是如果有了第三个参数，脱离浏览器
                      2、宽高不能设置的太小了
              2、关闭窗口：window/newW.close();
              3、修改窗口的大小：newW.resizeTo(newW,newH);
              4、修改窗口的位置：newW.moveTo(x,y);

    扩展：***获取鼠标的位置：2步
        1、在事件函数中的小括号里传入一个形参e，自动获取到事件对象event
        2、获取坐标：
            e.screenX/Y - 鼠标相对于屏幕的坐标：鼠标就算在最上面也是70px左右
            e.clientX/Y - 鼠标相对于文档显示区域的坐标：网页不管多长多大，始终顶部是0，底部是900多
               *e.pageX/Y   - 鼠标相对于整个页面的坐标 - 跟随我们的网页变化
        完成鼠标跟随动画：
            1、window/document.onmousemove - 在页面的任何位置移动鼠标都会触发
            2、js的加载速度比图片的加载速度快，使用加载事件：onload

    3、*****定时器：2种
           *1、周期性定时器：每过一段时间，会执行一次定时器中的操作
            开启：timer=setInterval(callback,间隔毫秒数)
            停止：clearInterval(timer);

        2、一次性定时器：等待一段时间，执行一次定时器之中的操作就停止了
            开启：timer=setTimeout(callback,等待毫秒数)
            停止：clearTimeout(timer);

        注意：一次性和周期性底层都是一样的，甚至可以相互转换，所以到底用哪个都可以

    总结：函数 和 循环 和 定时器 都能反复执行，区别？
        1、函数 - 用户触发绑定事件
        2、循环 - 一瞬间基本就结束了
        3、定时器 - 等一段时间做一次