WEB_BASIC---08 jQuery事件处理、jQuery动画_mind_programmonkey的博客-程序员秘密

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>

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

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

windows server 2012 路由及地址转换NAT_serve2012 对来访地址做nat_Huang Wenxing的博客-程序员秘密

第二台添加功能，远程访问里面添加路由功能安装完成后，打开路由和远程访问右键配置一个安装向导自定义配置安装NAT和vpn然后启动服务新增两个接口，内网和外网的ethernet0是连左手边的，外网，Ethernet1是连右手边的内网去第三台ping一下可以ping通可以看到第二台的转换通了...

素数判定Miller-Rabin算法的实现_miller素数判别法_YSRM的博客-程序员秘密

编程实现Miller-Rabin素数判定算法，并判断23456789是否是素数

DICOM文件_liuguoshi44的博客-程序员秘密

请问这里有处理过dicom文件的大佬吗，请指点指点欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导...

三维几何变换---反射变换_weixin_33716557的博客-程序员秘密

为什么80%的码农都做不了架构师？>>> ...

攻防世界之web新手入门——robots_Hailey-X的博客-程序员秘密

攻防世界之web新手入门——robots题目描述：X老师上课讲了Robots协议，小宁同学却上课打了瞌睡，赶紧来教教小宁Robots协议是什么吧。思路分析+步骤：1.Robots协议是什么百度百科解释如下：可知Robots协议是用来告知搜索引擎哪些页面能被抓取，哪些页面不能被抓取的一个文本文件，相关语法解释如下：2.怎么查看robots.txt文件如下，只需要在题目场景的地址后面添加/robots.txt回车就可以查看了查看页面如下：可见有一个PHP文件被禁止爬取查看，如果在未加robo

JavaSe-Regex-String-split_iteye_649的博客-程序员秘密

在java.lang包中有String.split()方法，返回是一个数组。　 1、“.”和“|”都是转义字符，必须得加"\\";　　如果用“.”作为分隔的话，必须是如下写法：String.split("\\."),这样才能正确的分隔开，不能用String.split(".");如果用“|”作为分隔的话，必须是如下写法：String.split("\\|"),这样才能正确的分隔...