本文共 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.

例子2：

   	
			
	
		A老师:	
	
		B老师:	
	
		C老师:	
	
		D老师:	

例子3：

   	
											
	
			
	
操作成功
	
   

转载地址：https://codingchaozhang.blog.csdn.net/article/details/79823825 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！