js进阶第一天

2017-11-25 本文已影响0人 LIT乐言

82982-106.jpg

一、自定义动画

animation: flash 0.5s alternate infinite
/*自定义动画*/
@keyframes flash {
    0%{opacity: 0;}
    100%{opacity: 1;}
}

延迟执行

start.style.animationDelay = delay + 's';

二、Underscore-min.js

Underscore封装了常用的JavaScript对象操作方法，用于提高开发效率。我们可以将它单独运用到任何一个页面，另外，Underscore还可以被使用在Node.js运行环境。

Underscore中有许多方法在JavaScript1.6中已经被纳入规范，因此在Underscore对象内部，会优先调用宿主环境提供的内置方法（如果宿主环境已经实现了这些方法），以此提高函数的执行效率。

Underscore默认使用_（下划线）来访问和创建对象。

三、offSet家族

3.1 offSet 自己的，用于获取元素尺寸 002.jpg

网页可见区域宽： document.body.clientWidth;

网页可见区域高： document.body.clientHeight;

网页可见区域宽： document.body.offsetWidth (包括边线的宽);

网页可见区域高： document.body.offsetHeight (包括边线的宽);

网页正文全文宽： document.body.scrollWidth;

网页正文全文高： document.body.scrollHeight;

网页被卷去的高： document.body.scrollTop;

网页被卷去的左： document.body.scrollLeft;

3.2 offsetWidth 和 offsetHeight

获取对象自身的宽度和高度，包括内容、边框和内边距，即：offsetWidth = width + border + padding
```
div{
   width: 300px; border-right:2px solid #ccc; padding:10px;
}
问：div的offsetWidth是多少？
```
注意：和 div.style.width 的区别，其只能获取到行内的数值

3.3 offsetLeft 和 offsetTop

距离第一个有定位的父级盒子左边和上边的距离，注意：父级盒子必须要有定位，如果没有，则最终以body为准！

Snip20161111_2.png

总结：offsetLeft和offsetTop从从父标签的padding开始计算，不包括border。即：从子盒子边框到定位父盒子边框的距离。

3.4 offsetParent

返回当前对象的父级（带有定位）盒子，可能是父亲、也可能是爷爷：
- 如果当前元素的父级元素没有进行CSS定位（position：absolute 或 relative），则其offsetParent为body； 如果当前元素的父级元素中有CSS定位（position：absolute或relative），offsetParent取最近的那个父级元素。

注意：和parentNode的区别

3.5 offsetXXX 和 style.XXX的区别

用offsetLeft和style.left来分析，其他的以此类推：

a) style.left只能获取行内的，而offsetLeft则可以获取到所有的；
b) offsetLeft 可以返回没有定位盒子距离左侧的位置；而style.left不可以，其只能返回有定位盒子的left;
c) offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px;
   注意：可以用parseInt进行转化；比如：styleLeft='300px' ---> parseInt(styleLft) ---> 300
d) offsetLeft是只读的，而style.left是可读写；
e) 如果没有给 当前 元素指定过 top 样式，则 style.top 返回的是空字符串。

案例可用弹性菜单效果练习

四、JS的事件对象 - event

4.1 在之前我们已经接触过很多事件，比如：onclick，ondbclick，onfocus, onmousedown，onmousemove...

   btn.onclick = function(){
       // 代码块
   }

   btn.onclick = function(event){  // event就是当前事件的对象，简称事件对象

   }

只要触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。比如：IE6-8只能通过window.event获取事件对象，而其他的则可以直接获取。通常，考虑兼容性的写法：
```
var event = event || window.event;
```

4.2 event 常见属性

Snip20161129_1.png

4.3 pageX/pageY、screenX/screenY、clientX/clientY的区别

screenX/screenY 是以屏幕为基准进行测量，即：当前元素距离屏幕的尺寸

Snip20161111_5.png

pageX 和 pageY 是以当前文档（绝对定位）为基准，不适用于IE6-8;
clientX 和 clientY 是以当前可视区域为基准，类似于固定定位。

4.4 JS常见事件

onmousemove 当鼠标在当前元素中移动的时候触发，鼠标只要移动一像素就会执行的事件，频率非常高；
onmouseover 当鼠标进入当前元素时触发，只会被触发一次
onmouseup 当鼠标弹起的时候触发
onmousedown 当鼠标按下的时候触发

4.5 防止拖动时选中内容

防止拖拽的时候选中拖拽区域中的内容，代码如下：

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

五、代码的执行-同步和异步

5.1 同步执行

下一行代码的执行必须等待上一个行代码执行完毕再执行；或者说上一行未执行完毕下一行不能执行。

5.2 异步执行

代码各自执行各自的，互相独立。

5.3 初始化执行

网页一发布就执行的代码称之为初始化中执行；初始化也是同步执行的一种。

5.4 总结

主要关注异步就可以，所有被鼠标触发的事件都可以认为是异步，互相独立。还有一个需要注意的就是定时器中的代码都是异步的，也是互相独立。## 一、水平滚动条和垂直滚动条

Snip20161124_1.png

1.1 核心技术点

1）求滚动条的长度？ 2）拖动滚动条，求内容要走多少？
滚动条的长度取决于滚动内容（滚动内容越长，滚动条越短）；
内容滚动的距离和滚动条走的距离是成倍数关系。

1.2 换算公式

获取滚动条的长度：
- **滚动条的长度 / 盒子的长度 = 盒子的长度 / 内容的长度 **
- 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度

拖动滚动条，求内容走的长度：
- **内容走的距离 / 滚动条走的距离 =（内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度) **
- 内容走的距离 = （内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度) * 滚动条走的距离

二、内置对象document

Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问:

** document.head（获取头部） **

** document.body（获取身体） **

** document.title （获取标题） **

** document.documentElement（获取整个html)**

Document.compatMode:

** BackCompat：标准兼容模式关闭**
- 浏览器宽度:document.body.clientWidth

** CSS1Compat：标准兼容模式开启 **

- 浏览器宽度:document.documentElement.clientWidth

BackCompat 对应 quirks mode(怪异模式) , CSS1Compat 对应 strict mode (严格模式) ：

早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式)，但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式) 。

三、scroll家族

3.1 基本概念

网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;

在实际开发中使用比较多的就是scrollTop，如下图：

Snip20161124_3.png

3.2 处理scroll家族浏览器适配问题

**ie9+ 和最新浏览器 **

    window.pageXOffset; （scrollLeft）

    window.pageYOffset; （scrollTop）

**Firefox浏览器和其他浏览器 **

document.documentElement.scrollTop;
**Chrome浏览器和没有声明 DTD <DOCTYPE > **

document.body.scrollTop;
兼容写法
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

3.3 scrollTo(x,y)

把内容滚动到指定的坐标
格式：scrollTo(xpos,ypos)
- xpos 必需；要在窗口文档显示区左上角显示的文档的 x 坐标；
- ypos 必需；要在窗口文档显示区左上角显示的文档的 y 坐标。

网页大部分都没有水平滚动条，所以，这个x 不太常用。

四、什么是Json?

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。相比于XML，json易于人阅读和编写，同时也易于机器解析和生成，目前数据传递基本上都使用json。
JSON有两种结构：对象和数组，两种结构相互组合从而形成各种复杂的数据结构。
- 数据在键值对中
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组

248911-106.jpg

87143-106.jpg