WEB_BASIC---08 jQuery事件处理、jQuery动画_b站 jquery事件处理程序-CSDN博客

本文链接：https://blog.csdn.net/Mind_programmonkey/article/details/79823825

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.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
	$(function(){
		$(":button:eq(0)").click(function(e){
			console.log("hello");
			//此事件对象是被jQuery做了封装，因为事件对象是游览器创建的
			//不同游览器创建的事件对象有区别，开发时要兼顾这个区别，很麻烦
			//jQuery就是想解决这个麻烦，将他们的区别进行统一，提供统一的方法。
			//取消冒泡：e.stopPropagation()
			//获取事件源：e.target
			console.log(e);
		})
	});
	//后绑定hover事件，该事件是jQuery特有的事件，必须使用jquery后绑定
	$(function(){
		$("img").hover(
		 function(){console.log("1");
		 $(this).width(250).height(250)},//悬停时
		 function(){console.log("2");
		 $(this).width(218).height(218)}//离开时
		);
	});
	$(function(){
		$(":button:eq(1)").click(function(){
			//让图片在显示与影藏间切换
			$("img").toggle();
		});
	});
</script>
</head>
<body>
	<p>
		<input type="button" value="按钮1">
		<input type="button" value="按钮2">
	</p>
	<p>
		<img alt="" src="../images/1.jpg">
	</p>
</body>
</html>

例子2：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
	$(function(){
		//给按钮后绑定单击事件
		$(":button").click(function(){
			var n=0;
			//启动定时器
			var id=setInterval(function() {
				//获取下一个要处理的框
				var $text=$(":text").eq(n);
				//模拟光标切入事件
				$text.trigger("focus");
				//生成随机的分数，写入框内
				var s=parseInt(Math.random()*100);
				$text.val(s);
				//都处理完，就停止定时器
				if(n==$(":text").length-1){
					clearInterval(id);
				}
				n++;
			}, 2000);
		});
	});
</script>
</head>
<body>
	<p>
		<input type="button" value="打分">
	</p>
	<p>
		A老师:<input type="text">
	</p>
	<p>
		B老师:<input type="text">
	</p>
	<p>
		C老师:<input type="text">
	</p>
	<p>
		D老师:<input type="text">
	</p>
</body>
</html>

例子3：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	/*设置相对/绝对/固定定位,才能做出动画效果，动画就是连续改变元素的偏移量*/
	img{
	position:relative;
	}
	#ad{
		width:200px;
		height:100px;
		border:1px solid red;
		position:fixed;
		top:100px;
		right:-180px;
	}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
	function  f1(){
		$("img").show(3000);
	}
	function f2(){
		$("img").hide(3000);
	}
	function f2(){
		//参数2是一个函数，jquery会在执行完动画以后自动调用它，这样的函数（完成后自动调用的）称之为回调函数
		$('img').slideUp(3000);
		//显示隐藏动画的实现原理：通过定时器连续改变元素的样式（大小和透明度）
		//f3相当于主线程，动画相当于支线程，二者并发执行，不互相等待，所以这句话会立刻执行
		console.log("over");
	}
	function f3(){
		$("#msg").fadeIn(500).fadeOut(2500);
	}
	function f4(){
		$("img").animate({"left":"300px"},3000).animate({"top":"300px"},3000).animate({"left":"0"},3000).animate({"top":"0"},3000);
	}
	$(function(){
		$("#ad").hover(function(){
			$(this).animate({"right":"0"},500);
		},function(){
			$(this).animate({"right":"-180px"},500);
		});
	});
</script>
</head>
<body>
	<p>
		<input type="button" value="显示" οnclick="f1();">
		<input type="button" value="隐藏" οnclick="f2();">
		<input type="button" value="删除" οnclick="f3();">
		<input type="button" value="走你" οnclick="f4();">
		
	</p>
	<p>
		<img alt="" src="../images/1.jpg ">
	</p>
	<p id="msg" style="display:none;">操作成功</p>
	<div id="ad"></div>
</body>
</html>