js进阶第一式

一、自定义动画

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 自己的,用于获取元素尺寸

网页可见区域宽: 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:2pxsolid#ccc;padding:10px;}问:div的offsetWidth是多少?

注意:和 div.style.width 的区别,其只能获取到行内的数值

3.3 offsetLeft 和 offsetTop

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

总结: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 返回的是空字符串。

案例----弹性菜单效果.html

案例----如影随形效果.html

四、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 常见属性

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

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

pageX 和 pageY 是以当前文档(绝对定位)为基准,不适用于IE6-8;

clientX 和 clientY 是以当前可视区域为基准,类似于固定定位。

4.4 JS常见事件

onmousemove当鼠标在当前元素中移动的时候触发,鼠标只要移动一像素就会执行的事件,频率非常高;

onmouseover当鼠标进入当前元素时触发,只会被触发一次

onmouseup当鼠标弹起的时候触发

onmousedown当鼠标按下的时候触发

4.5 防止拖动时选中内容

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

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

案例----商品放大效果.html

案例----滚动条效果.html

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

5.1 同步执行

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

5.2 异步执行

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

5.3 初始化执行

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

5.4 总结

目前我们学习的代码中有哪些是同步的哪些是异步的?主要关注异步就可以,所有被鼠标触发的事件都可以认为是异步,互相独立。还有一个需要注意的就是定时器中的代码都是异步的,也是互相独立。

推荐阅读更多精彩内容