JS（三）基本知识

一数据类型检测的四种方式

1、typeof：用来检测数据类型的运算符。

使用typeof检测数据类型，首先返回的都是一个字符串，其次字符串中包含了对应的数据类型，
局限性：
typeof null -> "object"
不能具体的细分是数组还是正则，还是对象中其他的值，因为使用typeof检测数据类型，对于对象数据类型中的左右的值，最后返回的结果都是"object"
2、instanceof：检测某一个实例是否属于某个类。instanceof的特性：只要在当前实例的原型链上，我们用其检测出来的结果都是true。
局限性：
1、不能用来检测和处理字面量方式创建出来的基本数据类型值。
对于基本数据类型来说，字面量方式创建出来的结果和实例方式创建出来的结果是有一定的区别的，从严格意义上来讲，只有实例创建出来的结果才是标准的对象数据类型值，也是标准的Number这个类的一个实例。对于字面量方式创建出来的结果是基本数据类型值，不是严禁的实例，但是由于JS的松散特点，导致了可以使用Number.prototype上提供的方法。
3、constructor 构造函数作用和instanceof非常的相似。
可以处理基本数据类型的检测。
4、Object.prototype.toString.call(); 最准确最常用的方式。
首先获取Object原型上的toSTring方法，让方法执行，并且改变方法中的this关键字的指向。

二同步异步

JS是单线程的，当前事情没有完成之前，绝对不会做下一件事情。
JS的两种编程思想：同步、异步。

1、同步：上一件事情没有完成，继续处理上一件事情，只有上一件事情完成了，才会做下一件事情（JS大部分都是同步编程的）。
2、异步：规划要做一件事情，但是不是当前立马去执行这件事情，需要等待一定的时间，这样的话，我们不会等着他执行，而是继续执行下面的操作，只有当下面的事情都处理完成了，才会返回头处理之前的事情。如果下面的事情并没有处理完成，不管之前的事情有没有到时间，都得等着完成。
在JS中异步编程只有四种：
（1）定时器
（2）所有的事件绑定
（3）Ajax读取数据的时候，我们一般都设置为异步编程
（4）回调函数

三图片的延时加载（懒加载）

作用：保证页面打开的速度
原理：
（1）对于首屏内容中的图片，首先给对应的区域一张默认图片占着位置（默认图需要非常的小，一般维持在5KB以内），当首屏内容都加载完成后（或者也可以给一个延迟的时间），在开始加载真实的图片。
（2）对于其他屏中的图片，也是给一张默认的图片占位，当滚动条滚到对应区域的时候，我们在开始加载真实的图片。
（3）扩展：数据的异步加载，开始只把前两屏的数据加载绑定出来，后面的数据不进行处理，当页面滚动到对应区域的时候在重新请求数据然后绑定渲染数据。

四盒子模型

JS盒子模型指的是通过JS中提供的一系列的属性和方法，获取页面中元素的样式信息值。
1、client系列（当前元素的几个私有的属性）

clientheight/clientwidth：内容的高度/宽度+上下/左右填充

内容的高度/宽度：我们设置的width和height这两个样式就是内容的宽和高。如果没有设置height值，容器的高度会根据里面的内容自己进行适应，这样获取的值就是真实内容的高，如果设置固定的高度了，不管内容是多了还是少了，其实我们内容的高度指的都是设定的那个值。

真实内容的宽度和高度：这个代指的是实际内容的宽高（和我们设置的height没有必然的联系），例如：如果内容有溢出，那么真实内容的高度要加上溢出内容的高度。

clientleft：左边框的宽度 clienttop：上边框的高度
2、offset系列
offsetwidth/offsetheight（和内容是否溢出没有任何关系）：clientwidth/clientheight+左右/上下边框
offsetleft/offsettop：当前元素的外边框距离父级参照物的内边框的偏移量
3、scroll系列
scrollwidth/scrollheight：和我们的clientwidth/clientheight一模一样，（前提是：容器中的内容没有溢出的情况下）

如果容器中的内容有溢出，我们获取的结果是如下规则：
scrollwidth：真实内容的宽度（包含溢出）+左填充
scrollheight：真实内容的高度（包含溢出）+上填充
获取到的结果都是约等于的值，因为同一个浏览器我们是否设置overflow="hidden"，对于最终的结果都是有影响的；在不同的浏览器中，我们获取到的结果也是不相同的。

scrollleft/scrolltop：滚动条卷去的宽度或高度

五关于JS盒子模型属性

1、关于JS盒子模型属性取值问题：我们通过以上属性值获取的结果永远不可能出现小数，都是整数，浏览器获取结果的时候，在原来真实结果的基础上进行四舍五入。
2、关于操作浏览器本身的盒子模型信息：clientheight/clientwidth是当前浏览器可视窗口（一屏幕的高度和宽度）的高度和宽度
scrollwidth/scrollheight是当前页面的真实宽度和高度（所有屏加起来的宽度和高度，但是是一个约等于的值）。

我们不管是哪些属性，也不管是什么浏览器，也不管是获取还是设置，想要都兼容的话，需要写两套：

document.documentElement[attr] || document.body[attr]; 
必须document.documentElement在前
例如：
获取：document.documentElement.clientwidth || document.body.clientwidth; 
设置：document.documentElement.clientwidth=0; document.body.clientwidth=0;

六

1、获取元素的某一个具体的样式属性值

元素.style.属性名：需要我们把元素的样式都写在行内样式上才可以（写在样式表中是不管用的）
在真实项目中，这种方式不常用，因为不能为了获取值而把所有的样式都写在行内（无法实现CSS和HTML分离）
2、使用window.getComputedStyle这个方法获取所有经过浏览器计算过的样式。
所有经过浏览器计算过的样式：只要当前的元素标签可以在页面中呈现出来，那么他的所有的样式都是经过浏览器计算过得（渲染过的），哪怕有些样式没有写，我们也可以获取到。
window.getComputedStyle(当前要操作的元素对象，当前元素的伪类[一般我们不用伪类写null])。获取的结果是是CSSStyleDeclaration这个类的一个实例：包含了当前元素的所有样式属性和值。但是IE6-8不兼容。

console.log(window.getComputedStyle(box,null)["height"]);

3、在IE6-8下我们可以使用currentStyle来获取所有经过浏览器计算过得样式。

标准浏览器：window.getComputedStyle(box,null).height;
非标准浏览器IE6-8：box.currentStyle.height

七 :hover :after 伪类的应用补充

1、可在元素前后添加内容
2、清除浮动

.clear {
    zoom:1;
}
.clear:after {
    display:block;
    width:0;
    height:0;
    content:"";
    overflow: hidden;
    clear:both;
}

八 scrolltop/scrollleft

1、JS盒子模型中，client系列/offset系列/scrollwidth/scrollheight都是“只读”属性，只能通过属性获取值，不能通过属性修改元素样式
2、scrolltop/scrollleft：滚动条卷去的高度/宽度，这两个属性是唯一“可读写”属性
3、scrolltop/scrollleft存在边界值（最大和最小值）
最小值：0
最大值=真实的高度-当前容器一屏幕的高度=box.scrollHeight-box.clientHeight

九定时器

1、setTimeout

window.setTimeout(function () {

},1000);

设置一个定时器，等到1000ms后开始执行对应的方法，方法执行完成后，定时器结束。
2、setInterval

window.setInterval(function () {

},1000);

设置一个定时器，等到1000ms后开始执行对应的方法，方法执行完成后，定时器并没有结束，以后每隔1000ms都会把定时器中的方法执行一次，直到手动清除定时器为止。
3、设置定时器的时候是有返回值的，返回的结果是一个数字，代表当前是第几个定时器。

var timer1 = window.setTimeout(function () { },1000); ->1
var timer2 = window.setTimeout(function () { },1000); ->2
var timer3 = window.setInterval(function () { },1000); ->3

4、window.clearTimeout（1）清除定时器的时候，我们里面放一个数字，代表把这个数字代表的那个第N个定时器清除掉。
window.clearInterval（timer2）使用的是setTimeout设置的第二个定时器，使用clearInterval也可以把它清除掉。
5、setInterval来实现一个多次运动的动画

/*setInterval来实现一个多次运动的动画*/
var n=0;
var timer=window.setInterval(function () {
    n++;
    console.log(n);
    if (n===5) {
        window.clearTimeout(timer); /*或者是window.clearInterval(timer);*/
    }
},1000);

6、setTimeout来实现一个多次运动的动画

/*setTimeout来实现一个多次运动的动画*/
var n=0;
    var timer=null;
    function move() {
        /*在每一次执行方法之前，先把之前设置的没用的定时器清除掉*/
        window.clearTimeout(timer);
        n++;
        console.log(n);
        if(n===5) {return;}
        /*第一次执行完成后，设置一个定时器，每隔1000ms重新执行move*/
        timer=window.setTimeout(move,1000); /*递归*/
    }

十

获取页面中元素的方法
1、document.getElementById()
2、context.getElementsByTagName(TAGNAME)：把指定容器中子子孙孙辈的所有标签名为TAGNAME的都获取到了
3、context.getElementsByClassName(CLASSNAME)：IE6-8不兼容
4、document.getElementsByName()：在IE浏览器中只对表单元素的name起作用
5、document.body
6、document.documentElement
7、context.querySelector/context.querySelectorAll：IE6-8不兼容，通过这个获取的节点集合不存在DOM映射
描述节点和节点之间关系的属性（在标准浏览器中会把空格和换行当做文本节点处理）
1、childNodes
2、children：获取所有的元素子节点，IE6-8下获取的结果和标准浏览器获取的结果不一致
3、parentNode：父亲节点
4、previousSibling：获取上一个哥哥节点/previousElementSibling
获取上一个哥哥元素节点，在IE6-8不兼容
5、nextSibling：获取下一个弟弟节点/nextElementSibling
获取下一个弟弟元素节点，在IE6-8不兼容
6、lastChild/lastElementChild：获取最后一个子节点
7、firstChild/firstElementChild：获取第一个子节点
DOM的增删改
1、creatElement
2、document.createDocumentFragment()
3、appendChild
4、insertBeforecloneNode(true/false)
5、replaceChild
6、removeChild
7、get/set/removeAttribute
DOM盒子模型

十一清除浮动

1、overflow: hidden; 清除子元素的浮动对父级元素的影响
2、clear: both;清除哥哥元素的浮动对弟弟元素的影响
3、

.box ul:after {
    display: block;
    content: "";
    clear: both;
}

十二 JS动画

JS实现高性能动画的黄金法则：1、边界判断是要加步长
2、清除没有用的定时器：用settimeout实现轮循动画，每一次都要把没用的定时器清除掉
3、move方法需要传参，里面需要写一个小move，来避免不销毁作用域的层级嵌套
4、让当前元素在同一个时间只能运行一个动画的话，把定时器返回值放在自定归属性上

十三回调函数

回调函数：把一个函数A当做一个值传递给另外一个函数B，这样在B方法执行的时候，可以在任何位置执行一到多次A方法