JavaScript最后的课程笔记

一、快捷位置和尺寸

DOM已经提供给我们计算后的样式，但是还觉得不方便，所以DOM又提供给我们一些API：

ele.offsetLeft

ele.offsetTop

ele.offsetWidth

ele.offsetHeight

ele.clientWidth

ele.clientHeight

1.1 offsetLeft属性和offsetTop属性

这两个属性的兼容性非常差，不要着急，我们慢慢来看。

IE9、IE9+、Chrome等高级浏览器：

一个元素的offsetLeft值，就是这个元素左边框外，到自己的offsetParent对象的左边框内的距离。

 

每一个元素，天生都有一个属性，叫做offsetParent，表示自己的“偏移参考盒子”，我们不称呼中文，就叫offsetParent。这个offsetParent是谁呢？

就是自己祖先元素中，离自己最近的已经定位的元素，如果自己的祖先元素中，没有任何盒子进行了定位，那么offsetParent对象就是body。

1    op.offsetParent

无论这个盒子自己是否定位，自己的offsetParent就是按照上述方法寻找。

 

IE6、IE7：

IE6、7的offsetParent对象是谁，和高级浏览器有非常大的不同。

情形1：自己如果没有定位属性，那么自己的offsetParent对象就是自己的祖先元素中离自己最近的有width或者有height的元素：

1    <div class="box1">

2        <div class="box2">  → 你好，我有宽度 , offsetParent

3           <div class="box3"> → 你好，我没有宽高

4               <p></p>   → 你好，我没有定位

5           </div>

6        </div>

7    </div>

 

8    <div class="box1">

9        <div class="box2">

10          <div class="box3"> → 你好，我没有宽高，有定位  , offsetParent

11              <p></p>   → 你好，我没有定位

12           </div>

13       </div>

1    </div>

情形2：自己如果有定位属性

那么自己的offsetParent就是自己祖先元素中离自己最近的有定位的元素。

 

数值就是自己的左外边框到offsetParent对象的左内边框的值。

 

IE8：

IE8的offsetParent是谁呢？和高级浏览器一致：

无论自己是否定位，自己的offsetParent就是自己祖先元素中，离自己最近的已经定位的元素。

这一点，没有任何兼容问题！

但是，多算了一条边框

总结：

	IE6、7	IE8		IE9、IE9+、高级浏览器
offsetParent	如果自己没有定位，那么就是自己父亲中有width或者有height或者有定位的元素。 如果自己有定位，那么就是和高级浏览器一致。	和高级浏览器一致	自己祖先元素中，离自己最近的已经定位的元素
offsetLeft	和高级浏览器一致	多算一条border		自己的border外到offsetParet对象的border内

兼容性解决办法，不是能力检测，也不是版本检测，而是善用这个属性，要确保属性的使用条件：

自定位，父无边   (父亲也要定位，但是为了顺口，就不多说了)

这样的话，所有浏览器的值都是一样的，offsetLeft、offsetTop值是number类型的，可以直接参与运算，不需要parseInt()

 

1.2 offsetWidth和offsetHeight

全线兼容，是自己的属性，和别的盒子无关。

一个盒子的offsetWidth值就是自己的 width+左右padding+左右border的宽度

如果盒子没有宽度，那么所有浏览器都将把px值当做offsetWidth，而不是100%；

如果盒子没有高度，用文字撑的，所有浏览器都将把px值当做offsetHeight

总结一下，全线兼容。

特别注意，IE6、7、8下，盒子没有高度，文字撑的，用currentStyle.height是auto。体现出了offsetHeight的好用。

 

1.3 clientWidth和clientHeight

全线兼容，就一丢丢IE6的问题

client表示“客户端”这里就是一个名字而已，不用在意这个名字。

clientWidth就是自己的width+padding的值。 也就是说，比offsetWidth少了border。

 

如果盒子没有宽度，那么那么所有浏览器都将把px值当做clientWidth，而不是100%

如果盒子没有高度，用文字撑的，IE6 clientHeight是0，其他浏览器都是数值。

 

总结一下，我们的6个属性要铭记于心，就offsetLeft、offsetTop比较闹腾，但是合理使用，也没兼容问题了。

二、运动

2.1 定时器

window对象有一个方法，叫做

1    window.setInterval(函数，间隔时间);

能够使每间隔时间，调用函数一次。我们习惯叫做定时器，按理说叫做“间隔器”。

单词：interval

演示：

1           window.setInterval(function(){

2               console.log(“你好”);

3           },1000);

间隔时间是以毫秒为单位，1000毫秒就是1秒。

“毫”就是千分之一，

“厘”就是百分之一，

“分”就是十分之一

 

第一个参数，是一个函数，所以可以把一个匿名函数往里放，更可以用一个有名函数的引用放里面。

1    function fun(){

2        console.log("你好");

3    }

4     

5    window.setInterval(fun,1000);

 

哲学上讲，setInterval()能够让函数每间隔时间执行。

我们说过，window对象，可以不写，所以：

1    setInterval(function(){

2        console.log(Math.random());

3    },1000);

定时器没有所谓的start、begin方法，只要setInterval了，定时器就开始运行了。

2.2 简单运动模型

视觉暂留：把连续相关的画面，连续播放，就是运动了。

 

1    var nowleft = 111;

2    //定时器

3    setInterval(function(){

4        //这个函数，就是每20毫秒调用一次。

5        nowleft += 10;

6        oDiv.style.left = nowleft + "px";

7    },20);

间隔时间是20毫秒，那么1秒中执行函数50次。也就是说，这个动画是每秒50帧，50fps。

 

那么现在我们来研究一个事儿，如果让这个盒子跑得更快？

上面的案例中，数值20间隔时间，这个数字越小运动越快；

数值10叫做步长，每一步的变化量，这个数字越大运动越快。

 

我们就有一个感觉，JavaScript描述动画，描述的是每一步的改变，并不是直接描述终点。这给我们的工作会带来不便，我们下午解决这个事儿。

举个例子，去森林公园玩儿的路线：

JS的模式，是告诉你第1毫秒你直走80厘米，第2毫秒你继续直走80厘米……

2.3 定时器的停止

setInterval的时候，要给这个定时器一个变量引用，停止的时候只需要clearInterval(timer)。

1    timer = setInterval(function(){

2       

3    },20)

4     

5     

6    clearInterval(timer);

 

 

2.4 简单运动需要注意的事儿

我们的开始按钮是：

1           startBtn.onclick = function(){

2               //设置定时器

3               timer = setInterval(function(){

4                  nowleft += 2;

5                  oDiv.style.left = nowleft + "px";

6               }, 20);

7           }

这个按钮持续点击，盒子运动越来越快。这是因为每次点击，盒子身上就有更多的定时器在作用。

解决办法，就是四个字的口诀“设表先关”。

1           startBtn.onclick = function(){

2               //设表先关

3               clearInterval(timer);

4               //设置定时器

5               timer = setInterval(function(){

6                  nowleft += 2;

7                  oDiv.style.left = nowleft + "px";

8               }, 20);

9           }

 

还要注意一个事情：当盒子到终点，自己停止。比如起点是100，终点我们想要600自动停止：

下面的方法是错误的：

1           var timer = setInterval(function(){

2               if(nowleft < 600){

3                  nowleft += 13;

4                  oDiv.style.left = nowleft + "px";

5               }else{

6                  clearInterval(timer);

7               }

8           },200);

初始值是100，所以盒子的运动轨迹就是

100、113、126……594、607停表

所以盒子停下来的位置，不是我们想要的600，而是607

 

所以解决办法，就是验收、拉回终点、停表：“拉终停表”

1           var timer = setInterval(function(){

2               nowleft += 7;

3               if(nowleft > 600){

4                  nowleft = 600;

5                  clearInterval(timer);

6               }

7               oDiv.style.left = nowleft + "px";

8               console.log(nowleft);

9           },20);

三、无缝连续滚动

原理：

页面上是6个图片，编号0、1、2、3、4、5。

复制一倍在后面，长长的火车在移动：

 

当你赋值的后半段火车的0号头贴到了盒子的左边框的时候，那么就

 

瞬间移动到原点，重新执行动画：

 

编程不难，但是降低偶尔性是一个大问题，专业的前端是要思考这个事情的。

下面的红箭头的长度，就是折返点的数值：

 

解决方法有两个：

方法1：遍历前半部分（复制一倍之前）所有的li，把所有的li的宽度累加，累加之后就是折返点。

我们上午学习的offsetWidth，这个东西不带margin。所以累加的时候，有需要得到计算后的margin十分麻烦。所以我们不考虑方法1。

方法2：我们发现，折返点就是假火车的第1张图的offsetLeft值。所以，如果原来的li的个数是lilength，那么假火车的第1张图就是lis[length]

 

 

chrome、火狐、IE10开始，JS的执行，不等到图片加载完毕。

所以我们的轮播图，所有li都没有宽度，li都是浮动的，浮动的都是收缩的，图有多宽li就有多宽。

所以，你的chrome运行的时候，图片都没有加载呢，js就着急读取offsetLeft值。如何解决？

1    window.onload = function(){

2        alert(oBox.offsetWidth);

3    }

我们不喜欢写window.onload ， 因为一个页面只能有一个window.onload 。页面也乱。

所以我们要学习新的事件

1    image.onload

当图片加载完毕的时候。。。。。。

四、JSON

4.1 最简单的JSON示例

JSON叫做JavaScript Object Notation， JavaScript对象表示法。由JS大牛Douglas发明。

我们之前学习过数组：

1    var arr = [“东风”,”西风”,”南风”,”北风”]

数组很好用，arr[2]  就是南风。

但是我们发现，数组的下标，只能是阿拉伯数字，不能是我们任意取的。

 

JSON的示例：

1           var obj = {

2               "name":"考拉",

3               "age" : 18,

4               "sex" : "不祥"

5           };

6     

7           console.log(obj.age); //18

语法：

1    {

2        "k" : v,

3        "k" : v,

4        "k" : v,

5        "k" : v

6    }

然后就能用点语法，访问某一个属性。.就是“的”

1    obj.age;   //obj这个对象的age属性

 

如果不用点语法，也可以使用[]来表示属性，需要注意的是，[]里面是变量：

1    var a = "age";

2    console.log(obj[a]);  //18

如果不想用变量，必须加引号：

1    obj["age"]   //18

 

 

4.2 JSON的嵌套

JSON里面的v，可以又是一个JSON

1           var obj = {

2               "name":"考拉",

3               "age" : 18,

4               "sex" : "不祥",

5               "shengao" : 193,

6               "peiou" : {

7                  "name" : "Angelababy",

8                  "age" : 16,

9                  "shengao" : 168

10              }

11          };

所以，想得到168这个数字：

1    obj.peiou.shengao

Ajax课程大量用到JSON。

 

4.3 JSON项的添加和删除

如果想增加obj里面的项，那么就用点语法赋值：

1    var obj = {

2        "name":"考拉",

3        "age" : 18

4    };

5     

6    obj.sex = "刚变完性";

 

如果想删除某一个属性，使用delete关键字：

1    delete obj.age;

 

4.4 JSON的遍历

for…in语句是专门用来遍历JSON的语法：

1    for(var k in obj){

2        console.log(k + "的值是" + obj[k]);

3     }

k会依次等于我们的obj里面的属性名，然后在循环语句里面，用obj[k]来读取这个值。

五、运动框架

为什么要封装一个运动框架呢？因为你不知道运动的复杂。

我们现在想一个情况，一个盒子初始位置是：

left:100px; 

top:100px;

现在，我想用3000毫秒时间，让这个盒子运动到

left:700px;

top:250px;

也就是说变化量：

△left = 600px;

△top = 150px;

 

我们想一下，如果我们现在的动画的间隔是20毫秒，也就是说3000毫秒能执行150次函数。

也就是说：

left的变化步长是600px / 150 = 4px;

而top的变化步长是  150px / 150 = 1px;

 

牵一发而动全身。动画不直观，所以我们迫切的需要一个牛逼的函数，直接告诉谁运动、终点是什么、总时间：

1    animate(oDiv,{"width":700,"height":250},3000);

 

性能问题，Chrome浏览器能够支持最小5的interval，每秒200帧；

IE6、7、8、9只能支持最小50的interval，每秒20帧