jQuery 事件 ，动画

最新推荐文章于 2023-06-21 14:46:32 发布
最新推荐文章于 2023-06-21 14:46:32 发布
阅读量220 收藏
点赞数
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_68180489/article/details/124354175
版权

事件，动画 思维导图

1.绑定事件的两种方式

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		$(function(){
			
			//			1.通过两种方式给div添加鼠标点击事件.
			// 方法一：
			// $("#da").click(function(){
			// 	console.info("div被点击了！");
			// })
			// 方法二：
			// $("#da").on("click",function(){
			// 	console.info("div被点击了！");
			// })
			// 方法三：
			// $("#da").bind("click",function(){
			// 	console.info("div被点击了！");
			// })
			//			2.通过两种方式给div添加鼠标进入事件.
			// 方法一：
			// $("#da").mouseenter(function(){
			// 	console.info("鼠标进来了");
			// })
			// 方法二：
			// $("#da").mousemove(function(){
			// 	console.info("鼠标进来了");
			// })
			//			3.通过两种方式给div添加鼠标离开事件.
			// 方法一：
			// $("#da").mouseleave(function(){
			// 	console.info("鼠标出去了");
			// })
			// 方法二：
			// $("#da").bind("mouseleave",function(){
			// 	console.info("鼠标出去了");
			// })
			
		})
		
		</script>

2.合成事件（事件切换）

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
//			1.hover:鼠标悬停合成事件
//				1.1给div添加鼠标悬停合成事件:打印内容.,
// $("#da").hover(function(){
// 	console.info("进来了")；
// },function(){
// 		console.info("出去了")；
// })
//				1.2给div添加鼠标悬停合成事件:显示和隐藏图片(图片一开始处于隐藏状态).
// $("#da").hover(function(){
// 	$("#ia").show();//显示图片
// },function(){
// 		$("#ia").show();//隐藏图片
// })
// 			2. toggle：鼠标点击合成事件.
//				2.1给div添加鼠标点击合成事件：显示和隐藏图片(图片一开始处于隐藏状态).
// $("#da").toggle(function(){
	// 	$("#ia").show();//显示图片
// },function(){
	// 		$("#ia").show();//隐藏图片
})
		</script>
	</head>
	<body>
		<div id="da" style="background-color: greenyellow;width: 200px;height: 100px;">
		</div>
		<img src="img/5.png" id="ia" />
	</body>

3.事件传播（冒泡传播）

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		$(function(){
			// 1.给span添加鼠标点击事件.
			// $("#sa").click(function(){
			// 	console.info("span被点击了");
			// return false；
			// })
			// 2.给div添加鼠标点击事件.
			// $("#da").click(function(){
			// 	 	console.info("div被点击了");
			// return false；
			// })
			// 3.给body添加鼠标点击事件.
			// $("boby").click(function(){
			// 	 	console.info("boby被点击了");
			// })
			// 4.点击span，事件传播截止到span.
	
			// 5.点击span，事件传播截止到div.
		})

		</script>
	</head>
	<body>
		<div id="da" style="background-color: aqua;width: 200px;height: 100px;">
			<br />
			<center>
				<span id="sa" style="background-color: yellow;">这是span标签</span>
			<center />
		</div>
	</body>

4.移除事件

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script>
		$(function(){
			// 1.给按钮添加鼠标点击事件，且只能点击一次。
			// $("#sb").click(function(){
			// 	console.info("按钮被点击了");
			// 	//移除按钮的鼠标点击事件
			// 	$("#sb").unbind("click");
			// 	$("#sb").off("click");
			// })
			// 			2.给i按钮添加鼠标点击事件,且只能偶数次点击才有效,奇数次则失效.
			// 方法一
			// var i = 1;
			// $("#sb").click(function(){
			// 	//偶次数
			// 	if(i % 2 == 0){
			// 		console.info("被点击了！");
			// 	}
			// 	i++;
			// })
			// 方法二
			// $("#sb").toggle(function(){
			// 	//奇数次点击
			// }function(){
			// 	//偶数
			// 	console.info("被点击了！");
			// })
			
			// 			3.给按钮添加鼠标点击事件，且只能点击一次,通过函数one来完成.
			// $("#sb").one("click",function(){
				// 	console.info("被点击了！");
			// })
		})
		</script>
	</head>
	<body>
		<input type="button" id="sb" value="这个按钮不一般" />
	</body>

5.动画-基本的动画

<script src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
		$(function(){
			//			1.给隐藏按钮添加事件：使div在规定的时间内消失。
			// $("#hide").click(function(){
			// 	$("ia").hide(1000)
			// })
			//			2.给显示按钮添加事件：使div在规定的时间内显示。
			// $("#show").click(function(){
			// 	$("#ia").show(1000);
			// })
			//			3.给显示/隐藏按钮添加事件：使div在规定的时间内显示和隐藏。
		// 	$("#toggle").toggle(function(){
		// $("ia").hide(1000)
		// 	},function(){
		// 		$("#ia").show(1000);
		// 	})
			//			4.给隐藏按钮添加事件：使div在规定的时间内隐藏，并且显示图片ia。
		})

		</script>
	</head>
	<body>
		<input type="button" value="显示" id="show" />
		<input type="button" value="隐藏" id="hide" />
		<input type="button" value="显示/隐藏" id="toggle" />
		<div id="da" style="background-color: deeppink; width: 200px; height: 100px;">
</div><br />
		<img src="img/5.png" id="ia" />
	</body>

6.动画-滑动动画

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
		$(function(){
			//				1.给显示按钮添加鼠标点击事件：使div在指定时间内向下显示.
			$("#show").click(function(){
				$("#da").slideDown(1000);
			})
			//				2.给隐藏按钮添加鼠标点击事件：使div在指定时间内向下隐藏.
			$("#hide").click(function(){
				$("#da").slideUp(1000);
			})
			//				3.给显示/隐藏按钮添加鼠标点击事件：使div在指定时间内向下显示和向下隐藏.
		$("#toggle").toggle(function(){
			$("#da").slideUp(1000);
		},function(){
			$("#da").slideDown(1000);
		})
		})

		</script>
		
		
	</head>
	<body>
		<input type="button" value="显示(向下)" id="show" />
		<input type="button" value="隐藏(向上)" id="hide" />
		<input type="button" value="显示/隐藏" id="toggle" />
		<div id="da" style="background-color: deeppink; width: 240px; height: 500px;">
		</div>
	</body>

7.动画-淡入淡出动画

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
		$(function(){
			// 显示(淡入)
			$("#show").click(function(){
				$("#da").fadeIn(1000,function(){
					alert("事件");
				});
			})
			// 隐藏(淡出)
			$("#hide").click(function(){
				$("#da").fadeOut(1000);
			})
			// 显示/隐藏
			$("#toggle").toggle(function(){
			    $("#da").fadeIn(1000);
			},function(){
				$("#da").fadeOut(1000);
			})
		})
				
		</script>
	</head>
	<body>
		<input type="button" value="淡入" id="show" />
		<input type="button" value="淡出" id="hide" />
		<input type="button" value="淡入/淡出" id="toggle" />
		<div id="da" style="background-color: deeppink; width: 240px; height: 500px;">
		</div>
	</body>

8.自定义动画

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				// 放大
				$("#big").click(function(){
					$("#da").animate({
						width:450,
						height:450
					},1000)
				})
				
				// 缩小
				$("#small").click(function(){
					$("#da").animate({
						width:300,
						height:300
					},2000)
				})
				// 往右移动
				$("#right").click(function(){
					$("#da").animate({
						left:+=50,
					},2000)
				})
				// 往左移动
				$("#left").click(function(){
					$("#da").animate({
						left:-=50,
					},2000)
				})
				// 往下移动
				$("#down").click(function(){
					$("#da").animate({
						top:100,
					},2000)
				})
				// 往上移动
				$("#up").click(function(){
					$("#da").animate({
						top:10,
					},2000)
				})
				// 斜下右移动
				$("#xxy").click(function(){
					$("#da").animate({
						left:10,
						top:10
					},2000)
				})
				// 斜上左移动
				$("#xsz").click(function(){
					$("#da").animate({
						left:400,
						top:400
					},2000)
				})
			});
		</script>
	</head>
	<body>
		<input type="button" value="上移" id="up" />
		<input type="button" value="下移" id="down" />
		<input type="button" value="右移" id="right" />
		<input type="button" value="左移" id="left" />
		<input type="button" value="放大" id="big" />
		<input type="button" value="缩小" id="small" />
		<input type="button" value="斜下右" id="xxy" />
		<input type="button" value="斜上左" id="xsz" />
		<div id="da" style="background-color: deeppink; width: 300px; height: 300px;position: absolute;">
	</body>

咩咩573
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery事件与动画基础详解
10-20
本文主要介绍了jQuery事件与动画的基础知识，具有很好的参考价值，下面跟着小编一起来看下吧
jQuery04-事件-动画
long_2004的博客
04-22 1094
jQuery04-事件-动画案例1：绑定事件的两种方式案例2：合成事件（事件切换）案例3：事件传播(事件冒泡)案例4：移除事件案例5：动画-基本动画案例6：动画-滑动动画案例7：动画-淡入淡出动画案例8：动画-自定义动画 案例1：绑定事件的两种方式 $(function(){ // 1.通过两种方式给div添加鼠标点击事件. // $("#da").click(function(){ // console.info("ok"); // }) // $("#da").on("cl
jq动态添加div ,并绑定点击事件
weixin_40030173的博客
06-02 1683
<ul class="ul_box">点击</ul> <script> init() function init() { var liHtml = ""; for (var i = 0; i < 3; i++) { liHtml += "<li data-event='liClick' >锄禾日当午" + i + "<li>"; } $(".ul_box").empty(); $(".ul_box").appen
jquery捕获通过for循环生成的代码的点击事件
weixin_56006480的博客
06-21 338
方法的第二个参数是字符串选择器，表示要绑定事件的元素，这里我们传入了我们生成代码的容器元素。，然后在选择器字符串后面再传入我们要绑定事件的元素的选择器字符串。这样就可以捕获通过 for 循环生成的代码的点击事件了。这里，我们为所有的按钮元素添加了共同的。
jq遍历循环，给每个元素添加点击事件，并返回当前元素的索引值（闭包问题）
yehaocheng520的博客
03-30 5228
jq循环绑定点击事件造成闭包问题 需求：给每个带有tab类名的元素点击点击事件，点击时可以添加active类名，（用于样式切换），而且还需要返回当前元素对应的索引值： 方法一（出现闭包） 先引入jq jq引入之后的获取dom的方式： $(’.tab’) //获取到的是所有含有tab类名的元素，如果想要限制在某个区域内，可以再加个类名的限制。 $(’.tab’).each(function(index){ $(this).on(‘click’,function(){ console.log(index); $
el-table中el-select与span 通过点击按钮进行编辑与显示切换；js给数据中的对象添加属性
killerdoubie的博客
04-23 836
el-table中el-select与span 通过点击按钮进行编辑与显示切换；js给数据中的对象添加属性
JQuery中的事件及动画用法实例
10-24
主要介绍了JQuery中的事件及动画用法,实例分析了事件的绑定、移除、添加及动画方法操作表单的使用技巧,需要的朋友可以参考下
[jQuery] 事件和动画详解
10-17
主要介绍了JQ事件和动画，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jquery事件与动画资料
09-10
jquery事件与动画，初学者不明白怎么用看看pdf吧，这是老师发的
jQuery中事件与动画的总结分享
10-22
下面小编就为大家带来一篇jQuery中事件与动画的总结分享。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jquery循环绑定事件并传递参数
The Legend of Stalvan
03-02 2712
代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> $(document).ready(function () {
jquery模拟点击不起作用解决思路和方案
weixin_55658418的博客
06-26 2493
jquery模拟点击事件 $.click()
span 点击事件
热门推荐
l_degege的专栏
08-02 2万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
jquery 属性操作,循环,事件
小赵的呢
08-07 436
jquery属性操作 1、html() 取出或设置html内容 // 取出html内容 var $htm = $('#div1').html(); // 设置html内容 $('#div1').html('<span>添加文字</span>'); 2、prop() 取出或设置某个属性的值 // 取出图片的地址 var $src = $('#img1').prop('src'); // 设置图片的地址和alt属性 $('#img1').prop({src: "test.j
js获取元素的方法及具体案例
m0_62697897的博客
09-26 1500
（3）通过class名获取：document.getElementsByClassName('class名')（4）通过name获取：document.getElementsByName('name') 表单。（2）通过标签名获取：document.getElementsByTagName('标签名')（3）不只是通过document对象获取元素，也可以通过父元素获取子元素。（1）通过id获取：document.getElementByid('id名')（2）获取属性：元素.属性名。（5）通过选择器获取。
怎么设置jQuery中的事件和动画
全栈
03-12 1747
1. 事件 3 1.1. 加载Dom两种方式 1.1.1. window.onload方式 1.1.2. jQuery方式 1.1.3. 案例1：测试两种方式的区别【个数+顺序】 1.2. 绑定事件两种方式 1.2.1. 元素.on(“事件名”,function(){}) 1.2.2. 元...
js中的事件绑定与解绑
qq_44884287的博客
04-08 402
js中的事件绑定与解绑
使用原生js实现项目中,点击文字复制功能
zxlny的博客
08-30 285
使用原生js实现项目中,点击文字复制功能
有个span标签，想在上面做点击事件，怎么扩大点击的区域
qq_36546490的博客
06-01 2088
span点击
jquery事件与动画的思维导图
最新发布
07-15
但是，我可以为您提供一个简单的文字概述来帮助您理解 jQuery 的事件处理和动画效果。 事件处理的思维导图： 1. 选择元素： - 使用选择器来选择要绑定事件的元素。 - 使用`$()`函数或`jQuery()`函数来选择元素。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值