您现在的位置是:首页 > 正文

JavaWeb学习笔记——jQuery动画、事件

2024-01-30 21:10:01阅读 0

动画

方法

基本:
show([speed,[easing],[fn]]) 显示
hide([speed,[easing],[fn]]) 隐藏
toggle([speed],[easing],[fn]) 交替,可见就隐藏,不可见就显示。

滑动:
slideDown([spe],[eas],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])

淡入淡出:
fadeIn([speed],[eas],[fn])
fadeOut([speed],[eas],[fn])
fadeTo([[speed],opa,[eas],[fn]]) 在指定时长内慢慢的将透明度修改到指定的值,0 透明,1 完成可见,0.5 半透明
fadeToggle([speed,[eas],[fn]]) 淡入/淡出 切换

以上动画方法都可以添加参数:

  • 第一个参数是动画执行的时长,以毫秒为单位
  • 第二个参数是动画的回调函数 (动画完成后自动调用的函数)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	
<script type="text/javascript">
		/* 	
		基本
		show([speed,[easing],[fn]])	显示
		hide([speed,[easing],[fn]]) 隐藏
		toggle([speed],[easing],[fn]) 交替,可见就隐藏,不可见就显示。
		
		滑动
		slideDown([spe],[eas],[fn]) 
		slideUp([speed,[easing],[fn]]) 
		slideToggle([speed],[easing],[fn]) 
		
		淡入淡出
		fadeIn([speed],[eas],[fn]) 
		fadeOut([speed],[eas],[fn]) 
		fadeTo([[speed],opa,[eas],[fn]])  在指定时长内慢慢的将透明度修改到指定的值。0 透明,1 完成可见,0.5 半透明
		fadeToggle([speed,[eas],[fn]])	淡入/淡出 切换
		
		以上动画方法都可以添加参数:
			1、第一个参数是动画执行的时长,以毫秒为单位
			2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)
		*/
		$(function(){
			//提供一个可被调用的函数
			var func1 = function(){
				alert("hide动画完成");
			}
			
			//循环执行动画
			var func2 = function(){
				$("#div1").toggle(1000, func2);
			}
			
			//显示   show()
			$("#btn1").click(function(){
				$("#div1").show(1000, function(){
					alert("show动画完成");
				});
			});		
			
			//隐藏  hide()
			$("#btn2").click(function(){
				$("#div1").hide(1000, func1);
			});	
			
			//切换   toggle()
			$("#btn3").click(function(){
				$("#div1").toggle(1000);
			});	
			
			//循环执行动画
			$("#btn8").click(function(){
				func2();
			});
			
			//淡入   fadeIn()
			$("#btn4").click(function(){
				$("#div1").fadeIn();
			});	
			
			//淡出  fadeOut()
			$("#btn5").click(function(){
				$("#div1").fadeOut(1000, function(){
					alert("fadeOut完成");
				});
			});	
			
			//淡化到  fadeTo()
			$("#btn6").click(function(){
				$("#div1").fadeTo(2000, 0.5, function(){
					alert("fadeTo完成");
				});
			});	
			
			//淡化切换  fadeToggle()
			$("#btn7").click(function(){
				$("#div1").fadeToggle(1000);
			});	
		})
</script>
	
	</head>
	<body>
		<table style="float: left;">
			<tr>
				<td><button id="btn1">显示show()</button></td>
			</tr>
			<tr>
				<td><button id="btn2">隐藏hide()</button></td>
			</tr>
			<tr>
				<td><button id="btn3">显示/隐藏切换 toggle()</button></td>
			</tr>
			<tr>
				<td><button id="btn4">淡入fadeIn()</button></td>
			</tr>
			<tr>
				<td><button id="btn5">淡出fadeOut()</button></td>
			</tr>
			<tr>
				<td><button id="btn6">淡化到fadeTo()</button></td>
			</tr>
			<tr>
				<td><button id="btn7">淡化切换fadeToggle()</button></td>
			</tr>
			<tr>
				<td><button id="btn8">循环执行动画</button></td>
			</tr>
		</table>
		
		<div id="div1" style="float:left;border: 1px solid;background-color: pink;width: 300px;height: 200px;">
			jquery动画定义了很多种动画效果,可以很方便的使用这些动画效果
		</div>
	</body>

</html>

练习:品牌显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>品牌展示练习</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		body {
			font-size: 12px;
			text-align: center;
		}
		
		a {
			color: #04D;
			text-decoration: none;
		}
		
		a:hover {
			color: #F50;
			text-decoration: underline;
		}
		
		.SubCategoryBox {
			width: 600px;
			margin: 0 auto;
			text-align: center;
			margin-top: 40px;
		}
		
		.SubCategoryBox ul {
			list-style: none;
		}
		
		.SubCategoryBox ul li {
			display: block;
			float: left;
			width: 200px;
			line-height: 20px;
		}
		
		.showmore , .showless{
			clear: both;
			text-align: center;
			padding-top: 10px;
		}
		
		.showmore a , .showless a{
			display: block;
			width: 120px;
			margin: 0 auto;
			line-height: 24px;
			border: 1px solid #AAA;
		}
		
		/*
		后代选择器:
			使用该样式的标签,后代中要有a标签,并且a标签的后代中要有span标签
		*/
		.showmore a span {
			padding-left: 15px;
			background: url(img/down.gif) no-repeat 0 0;
		}
		
		.showless a span {
			padding-left: 15px;
			background: url(img/up.gif) no-repeat 0 0;
		}
		
		.promoted a {
			color: #F50;
		}
	</style>
	<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function() {
			//刚开始是隐藏某些标签的
			$("div ul li:gt(5):not(:last)").hide();
			
			//为a标签添加单击事件
			$("div div a").click(function(){
				//点击之后在显示和隐藏之间切换
				$("div ul li:gt(5):not(:last)").toggle();
				
				//为a标签内的span标签添加文字
				//先判断当前标签是显示还是隐藏,若显示则删除原有样式,添加向上箭头,并为span标签赋值文本:显示精简品牌
				//若隐藏则删除原有样式,添加向下箭头,并为span标签赋值文本:显示全部品牌
				var $temp = $("div ul li:gt(5):not(:last)").is(":hidden");
				if($temp) {//隐藏时
					$("div div").removeClass();//删除原有样式
					$("div ul li").removeClass();//删除高亮样式
					$("div div").addClass("showmore");//添加新样式
					$("div div a span").text("显示全部品牌");
				} else {//显示时
					$("div div").removeClass();//删除原有样式
					$("div div").addClass("showless");//添加新样式
					$("div div a span").text("显示精简品牌");
					
					//显示全部品牌时,显示高亮名称
					func();	
				}
				//阻止a标签的默认跳转动作
				return false;
			});
			
			//用于将某些品牌标签加高亮的函数
			var func = function(){
				$("li:eq(0), li:eq(3), li:contains('奥林巴斯')").addClass("promoted");
			}
			
		});
	</script>
</head>
<body>
	<div class="SubCategoryBox">
		<ul>
			<li><a href="#">佳能</a><i>(30440) </i></li>
			<li><a href="#">索尼</a><i>(27220) </i></li>
			<li><a href="#">三星</a><i>(20808) </i></li>
			<li><a href="#">尼康</a><i>(17821) </i></li>
			<li><a href="#">松下</a><i>(12289) </i></li>
			<li><a href="#">卡西欧</a><i>(8242) </i></li>
			<li><a href="#">富士</a><i>(14894) </i></li>
			<li><a href="#">柯达</a><i>(9520) </i></li>
			<li><a href="#">宾得</a><i>(2195) </i></li>
			<li><a href="#">理光</a><i>(4114) </i></li>
			<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
			<li><a href="#">明基</a><i>(1466) </i></li>
			<li><a href="#">爱国者</a><i>(3091) </i></li>
			<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
		</ul>
		<div class="showmore">
			<a href="more.html"><span>显示全部品牌</span></a>
		</div>
	</div>
</body>
</html>

事件

文档加载

$(function(){}); 替换掉 window.onload = function(){}

事件绑定

click():单击事件
mouseover():鼠标移入事件
mouseout():鼠标移出事件
bind():一次绑定一个或多个事件
one():一次绑定一个或多个事件,但该事件只会响应一次
unbind():解除事件的绑定
on():为所有满足条件的标签绑定事件,那怕是这个标签在页面运行之后才被创建

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			/*
			click() 单击事件
			mouseover() 鼠标移入事件
			mouseout() 鼠标移出事件
			mousemove()	鼠标移动事件
			bind() 一次性绑定一个或多个事件	新版为on() 如果需要为不同事件设置不同响应,可以通过事件对象event的type属性获取当前事件,进而赋予不同操作
			one() 一次性绑定一个或多个事件,但只响应一次
			unbind() 解除事件的绑定,参数为空时解除所有事件的绑定	新版为off()
			live() 绑定事件,可以为选择器匹配到的元素绑定事件,哪怕这个元素是后面动态创建出来的也有效	新版为on()
			*/
			$(function(){
				//为h5绑定单击事件
				$("h5").click(function(){//为h5绑定单击事件:click()传入function()是为某个对象绑定单击事件
					alert("h5的单击事件");
				});
				
				/*
				由于在为h5绑定单击事件时,还没有执行到追加h5的语句,因此新的h5没有被绑定上单击事件,此时可以使用live()
				新版为on()方法,对h5进行单击事件的绑定,后面新创建的h5标签都会被绑定上单击事件
				*/
				$("h5").live("click",function(){
					alert("live绑定的h5单击事件");
				});
				
				$("<h5 class=\"head\">什么是jQuery?</h5>").appendTo("#panel");//在#panel后追加一个h5
				
				//调用h5的单击事件
				$("#btn01").click(function(){
					$("h5").click();//调用h5的单击事件:click()不传参数是调用某个对象的单击事件
				});
				
				//为h5绑定鼠标移入事件
				$("h5").mouseover(function(){
					console.log("mouse in");
				});
				
				//为h5绑定鼠标移出事件
				$("h5").mouseout(function(){
					console.log("mouse out");
				});
				
				/*
				//使用bind绑定事件
				$("h5").bind("click mouseover",function(){
					console.log("bind绑定事件");
				});
				
				//使用one绑定事件,每个事件只响应一次
				$("h5").one("click mouseover",function(){
					console.log("one绑定事件");//控制台会输出两次"one绑定事件"
				});
				*/
				
				//unbind解绑事件
				$("h5").unbind("mouseover mouseout");

			});
		
		</script>
	</head>
	<body>
		<div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
			<button id="btn01">按钮1</button>
		</div>
	</body>

</html>

事件移除

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				//给li绑定两种事件:单击和鼠标移入
				$("li").bind("click mouseenter" , function(){
					alert(this.innerHTML);
				});
				
				//点击第一个button,将#bj上的mouseenter事件移除
				//unbind()可以移除指定的事件,只需要传一个事件名作为参数
				//unbind(type,[data|fn]])
				//type事件类型  当传入type的时候会解除type事件
				//如果没有传入type值,会移除所有事件
				$("button:eq(0)").click(function(){
					$("li").unbind("click mouseenter");
				});
				
				//点击第二个button,将#rl上的所有事件移除
				$("button:eq(1)").click(function(){
					$("#btn02").unbind();
				});
			});
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>
			</div>
			<button id="byn01">移除#bj的mouseenter事件</button>
			<button id="btn02">移除#rl所有事件</button>
		</div>
	</body>
</html>

事件冒泡

什么是事件的冒泡?
事件的冒泡是指,父子标签在同时监听同一个事件时,当子标签事件被触发时,也会触发父标签的事件。
如何阻止事件的冒泡?
在子标签事件函数内,加入return false;

事件对象

如何获取 javascript 事件对象呢?
在给标签绑定事件的时候,在 function( event ) 参数列表中添加一个参数,这里取名为 event,这个 event 就是该事件的事件对象

练习:使用 bind() 同时对多个事件绑定同一个函数,怎么获取当前响应的是什么事件?
event的type属性,可以用来判断当前事件类型,进而对不同事件进行不同操作

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

	#areaDiv {
		border: 1px solid black;
		width: 300px;
		height: 50px;
		margin-bottom: 10px;
	}
	
	#showMsg {
		border: 1px solid black;
		width: 300px;
		height: 20px;
	}

</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
	/*
	事件对象,封装了当前被触发的事件的所有信息

	如何获取呢 javascript事件对象呢?
		在给元素绑定事件时,在 function()参数列表中添加event参数(习惯命名为event),这个event就是该事件的事件对象
	*/
	
	//1.原生javascript获取 事件对象
	window.onload = function(){
		document.getElementById("areaDiv").onclick = function(event){
			console.log(event);
		}
	} 

	$(function(){
		//2.JQuery代码获取事件对象
		$("#showMsg").click(function(event){
			console.log(event);
			/*
			可以在浏览器中按F12打开console控制台,查看event的所有属性
			MouseEvent {isTrusted: true, screenX: 271, screenY: 136, clientX: 271, clientY: 17, …}
			altKey: false
			bubbles: true
			button: 0
			buttons: 0
			cancelBubble: false
			cancelable: true
			clientX: 271
			clientY: 17
			composed: true
			ctrlKey: false
			currentTarget: null
			defaultPrevented: false
			detail: 1
			eventPhase: 0
			fromElement: null
			isTrusted: true
			layerX: 271
			layerY: 17
			metaKey: false
			movementX: 0
			movementY: 0
			offsetX: 262
			offsetY: 8
			pageX: 271
			pageY: 17
			path: (5) [div#areaDiv, body, html, document, Window]
			relatedTarget: null
			returnValue: true
			screenX: 271
			screenY: 136
			shiftKey: false
			sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
			srcElement: div#areaDiv
			target: div#areaDiv
			timeStamp: 4004.225000011502
			toElement: div#areaDiv
			type: "click"
			view: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
			which: 1
			x: 271
			y: 17
			__proto__: MouseEvent
			*/
		});
		
		//3.使用bind同时对多个事件绑定同一个函数,怎么获取当前操作是什么事件
		$("#areaDiv").bind("mouseover mouseout", function(event){
			//event的type属性,可以用来判断当前事件类型,进而对不同事件进行不同操作
			var eventType = event.type;
			if(eventType=="mouseover"){
				console.log("mouse In");
			} 
			if(eventType=="mouseout"){
				console.log("mouse Out");
			}
		});
	});
</script>
</head>
<body>

	<div id="areaDiv"></div>
	<div id="showMsg"></div>

</body>
</html>

练习:图片跟随

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<style type="text/css">
		body {
			text-align: center;
		}
		#small {
			margin-top: 150px;
		}
		#showBig {
			position: absolute;
			display: none;
		}
	</style>
	<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function(){
			//为两张图片绑定鼠标移入移出事件
			//鼠标移入小图片区域时显示大图片,鼠标移出小图片区域时隐藏大图片
			$("#small").bind("mouseover mouseout mousemove", function(event){
				if(event.type=="mouseover"){
					$("#showBig").show();
				}else if(event.type=="mouseout"){
					$("#showBig").hide();
				}else if(event.type=="mousemove"){
					$("#showBig").offset({
						left: event.pageX+10,
						top: event.pageY+10
					});
				}
			});
		});
	</script>
</head>
<body>

	<img id="small" src="img/small.jpg" />
	
	<div id="showBig">
		<img src="img/big.jpg">
	</div>

</body>
</html>

网站文章

  • 结构体变量

    在C语言中,可以使用结构体(Struct)来存放一组不同类型的数据。结构体的定义形式为: struct 结构体名{ 结构体所包含的变量或数组 }; 结构体是一种集合,它里面包含了多个变量或数组,它们的...

    2024-01-30 21:09:56
  • Java面试注意

    3125

    2024-01-30 21:09:48
  • python 依赖下载

    https://www.lfd.uci.edu/~gohlke/pythonlibs/#scipy

    2024-01-30 21:09:20
  • 轻松学懂图(下)——Dijkstra和Bellman-Ford算法

    轻松学懂图(下)——Dijkstra和Bellman-Ford算法

    概述 在上一篇文章中讲述了Kruskal和Prim算法,用于得到最小生成树,今天将会介绍两种得到最短路径的算法——Dijlkstra和Bellman-Ford算法 Dijkstra算法 算法的特点: ...

    2024-01-30 21:09:14
  • 顺序队列的基本操作实现

    顺序队列的基本操作

    2024-01-30 21:09:08
  • 电脑桌面计算机打开不显示硬盘信息,电脑加硬盘后不显示不出来怎么办

    1.给电脑添加了一个新硬盘,可是显示不出来怎么办1、在计算机上安装硬盘后,打开计算机,在计算机桌面上,选择我的计算机并右键单击“管理”进入计算机管理界面。2、选择“磁盘管理”,系统将弹出来检测新硬盘并...

    2024-01-30 21:09:00
  • 欢迎使用CSDN-markdown编辑器

    项目Properties -> Project Facets -> Runtime -> New -> Add a tomcat server ,JRE 选择 JRE1.8.0_XX.

    2024-01-30 21:08:31
  • LinkedBlockingQueue的put,take方法

    put操作:在LinkedBlockingQueue中有putlcok和takelock俩把锁,put操作使用putlock这把锁,利用lockInterruptibly方法加锁,该方法的作用为:如果...

    2024-01-30 21:08:18
  • 微信程序开发之微信接入

    微信程序开发之微信接入

    一、 微信公众号1、详情网址微信公众平台微信官方文档 | 微信开放文档微信公众平台接口调试工具几款免费内网穿透工具测评使用 - 哔哩哔哩2、使用测试号①、微信公众平台可以进行登录或注册:公众号分类:订...

    2024-01-30 21:07:50
  • 【调剂】211西南大学2020年计算机与信息科学学院硕士研究生招生调剂

    【调剂】211西南大学2020年计算机与信息科学学院硕士研究生招生调剂

    点击文末的阅读原文或者公众号界面左下角的调剂信息或者公众号回复“调剂”是计算机/软件等专业的所有调剂信息集合,会一直更新的。说 明:1.以上分数线为普通计划分数线,少数民族高层次...

    2024-01-30 21:07:41