<button id="btn">点击</button>
var Btn = document.getElementById("btn");
一. 传统事件跟现代事件
传统事件的写法: Btn.onclick = function(){}
现代事件的写法:
1. 不支持IE: Btn.addEventListener("click",function(){
console.log("hello!");
})
2. 支持IE: Btn.attachEvent("click",function(){
console.log("hello!");
})
二. 事件方法
1. change事件
在需要对下拉列表赋予事件时,记住只能在select中加事件,不能在
option上加事件,change事件就是用于下拉列表中某项被选中时所
触发的事件.
$("select").change(function(){
console.log(".......");
})
三. 动画时间
1. show(speed,easing,func): 显示所隐藏的元素,如果元素本身就是
显示的话,那么show无作用.
speed的3种数据: "slow","fast","normal",或表示动画时长的
毫秒数值,如2000就表示2秒;除了数值之外,其他都必须加双引号;
func是在动画完成后执行的函数.
2. hide(speed,easing,func): 隐藏所显示的元素,如果元素本身就是隐藏
的话,那么hide无作用.
用法同show一样,这里就不赘述了.
3. fadeIn(speed,easing,func): 实现元素的淡入效果,用法同show一样
4. fadeOut(speed,easing,func): 实现:元素的淡入出效果,用法同show一样
四. 动画animate
1. animate动画:
$("#div").animate({动画完成时的样式},速度,擦除效果的名称,func):
func表示动画完成后执行的函数.
如: $("#div").animate({
width: "40px",
height:"30px",
"margin_left":"20px",
marginTop:"20px"
},"slow",{easing:"linear"},function(){
......动画完成后执行的操作....
})
说明: 在样式的设置时,如果margin_left这样写,那么需要加双引号"margin_left",
如果marginLeft这样写,就不加双引号;
(网上摘抄: 所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left. )
速度有三种值: "slow","fast","normal",数值
擦除效果: "linear","swing"等值
2. stop() 表示终止当前动画,继续后面的动画,后面的动画在当前位置开始移动
但注意:其实后面的动画是从第一个动画开始的位置开始的,虽然我们看到的是后面的
动画是从第一个动画终止的位置开始移动,但我们可以看到,当后面的动画开始
时会有一个停顿的时间,那就是因为动画是从最开始的位置开始,又因为后面的
动画是在当前停止的位置,所以我们看到的效果是后面的动画是在前面的动画
结束的位置开始的.
stop(true) 第一个参数为true的情况, 表示清空指定元素所有的动画队列,动画停止在当前位置
stop(false, true) 动画停止在当前动画的最终位置 ，并继续下一个动画
stop(true,true) 两个参数都为true的情况, 表示清空指定元素所有的动画队列,动画停止在
当前动画的最终位置.
finish() 表示清空指定元素所有的动画队列,终止动画,动画停止在所有动画的最终位置.
注意: 上面这四个终止动画的方式都是针对调用了该方法的元素(指定元素)所作的操作,不同元素
的动画是互不影响的,那么对于"清除动画队列"这个词的理解就应该是: 指的是清除指定元素的
所有动画,而不是清除不同元素的动画.
3. 动画队列
$("#btn4").click(function(){
$("#d1").animate({
marginLeft:500,
opacity:0.5
},2000, function () {
$("#d1").css("background","red");
});
$("#d2").animate({
marginTop:300,
opacity:1
},2000);
$("#d2").animate({
marginLeft:300,
opacity:0.5
},2000);
$("#d2").animate({
marginTop:0,
opacity:1
},2000);
});
如上,先后给d1和d2设置了各自的动画,当我们运行时,会看到d1和d2是同时开始动画的;
其次,给d2先后设置了3个动画,这3个动画先后执行.
须明白: 给同一个元素先后设置了多个动画,那么这些动画就在这一个元素的动画队列中,
该元素依次执行动画队列中的动画;
给不同的元素设置各自的动画效果,那么它们就会生成各自的动画队列,不同的
动画队列在同一域中执行时,我们看到的效果是它们会同时执行;但我认为,程序
都是按照从上到下的顺序加载,当d1的动画加载之后,d1的动画就开始执行,这个
时候d2的动画就开始加载并执行,因为电脑的运行速度很快,我们根本看不到它们
是从上往下加载的,另一方面,d2的动画并不会等到d1的动画完成之后才执行,
而是在d1的动画加载完之后,就继续加载d2的动画并执行,所以我们看到了d1和d2
是同时执行的效果.
