本文共 1648 字,大约阅读时间需要 5 分钟。
1.事件处理 event (1)事件处理知识回顾 1)如何绑订事件处理函数 a,绑订到html元素上 <input type="button" id="b1" οnclick="f1();"/> b,绑订到dom对象上。 var obj = document.getElementById('b1'); obj.οnclick=f1; c,使用浏览器提供的方法。 因为兼容性问题,少用。 2)如何获得事件对象 e1.html 给事件处理函数使用"event"来作为参数。 比如: οnclick="f1(event);" 3)事件对象的作用 e1.html a.找到事件源(谁产生的这个事件) e.target (firefox,chrome) e.srcElement (ie) b,获得鼠标点击的坐标 e.clientX e.clientY c,取消事件冒泡 e.cancelBubble = true; 4)什么是事件冒泡,如何取消 e2.html 子节点产生的事件,会依次向上抛给对应的 父节点。 (2)jQuery对事件处理的支持 1)绑订事件处理函数 e3.html a,正式写法 $obj.bind(事件类型,事件处理函数); 比如: var eventType = 'click'; $obj.bind(eventType,f1); b,简写形式: $obj.click(f1); 2)获得事件对象 e4.html 只需要给事件处理函数传递任意一个变量。 比如 $obj.click(function(e){ e:就是事件对象。 实际上,该事件对象是jQuery对 底层事件对象的一个封装。 }); 3)事件对象的作用 e4.html a,找到事件源 var obj = e.target; b,获得鼠标点击的坐标 e.pageX e.pageY c,取消冒泡 e.stopPropagation(); 4)事件冒泡 e5.html 5)合成事件 e6.html e7.html a, hover(f1,f2); 模拟光标悬停事件(鼠标进入 和离开)。当鼠标进入时,执行f1, 当鼠标离开,执行f2。 b,toggle(f1,f2,f3...);模拟连续单击事件。 6)模拟操作 e8.html a,正式写法 $obj.trigger(事件类型); 比如: $obj.trigger('click'); b,简写形式$obj.click();
2.动画 animate
(1)show,hide a1.html 1)作用 通过同时改变元素的宽度和高度来实现显示和隐藏。 2)用法 $obj.show(speed,callback); 注: speed:执行速度,单位可以是毫秒,也可以是"slow","fast","normal"。 callback:(回调函数)当整个动画完成之后, 执行该函数。 (2)slideDown,slideUp a1.html 1)作用 通过改变元素的高度来实现显示和隐藏。 2)用法 同上。 (3)fadeIn,fadeOut (淡入,淡出) a2.html 1)作用 通过改变元素的不透明度来实现显示和隐藏。 2)用法 同上。 (4)animate a3.html 1)用法 $obj.animate({},speed,callback); 注: {}: 用来描述动画完成之后,元素的样式,比如: {'top':'200px','left':'300px'} speed:只能用毫秒。callback:回调函数。
例子1.
Insert title here
例子2:
Insert title here
A老师:
B老师:
C老师:
D老师:
例子3:
Insert title here
转载地址:http://bgwdf.baihongyu.com/