【无标题】

最新推荐文章于 2022-08-19 10:56:57 发布

巴枝子

最新推荐文章于 2022-08-19 10:56:57 发布

阅读量62

点赞数 1

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/fddggghrr/article/details/123694511

版权

本文介绍了使用jQuery实现页面元素的事件绑定、事件传播控制、动画效果，包括点击事件、悬停事件、滑动动画、淡入淡出效果，以及自定义动画如元素的缩放和平移。此外，还涉及了事件的传播阻止和移除，以及元素样式的变换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#aa{
				width:200px;
				height: 200px;
				background-color: aqua;
			}
			p{
				text-align: center;
				background-color: deeppink;
			}
			.ab{
				transform: rotate(720deg);
				transform: all  2s;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
			
			/* jQuery第四次课 */
			
			/* 一、事件 */
			//1.1 加载DOM两种方式(区别)
			/* 只能写一个   多个会被覆盖
			 window.onload=function(){
				console.info("js方式"); 
			}
			window.onload=function(){
				console.info("js方式2");
			}
			window.onload=function(){
				console.info("js方式3");
			} */
			/*  可以写多个  都会被执行
			 $(function(){
			     console.info("jQuery方式1")	
			})
			$(function(){
			     console.info("jQuery方式2")	
			})
			$(function(){
			     console.info("jQuery方式3")	
			}) */
			
			$(function(){
				//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
				//--元素.on/bind()
				/* $("#aa").on("click",function(){
					alert("哈哈哈");
				}) */
				/* $("#aa").bind("mousevover",function(){
					alert("张牛逼别睡觉");
				}) */
			
				//--元素.事件名
				/* $("#aa").click(function)({
					alert("干啥");
				} )*/
				/* $("#aa").click((function){
					alert(123);
				}) */
				//1.3 合成事件/事件切换
				//--hover()悬停控制元素[div]的显示和隐藏
				/* $("#aa").hide();//隐藏
				$("#aa").hover(function(){//鼠标移出事件
					$("#aa").show();//显示
				},function(){//鼠标移出事件
					$("#aa").hide();//隐藏
				}) */
				//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
				// $("#aa").hide();//隐藏
				// $("#aa").toggle(function(){//鼠标移出事件
				// 	$("#aa").show();//显示
				// },function(){//鼠标移出事件
				// 	$("#aa").hide();//隐藏
				// }) 
				//1.4 事件的传播(事件冒泡) 小p->中div->大body
				  // $("p").click(function(){
					 //  console.info("p被点击");
				  // })
				  // $("div").click(function(){
				  // 	  console.info("div被点击");
					 //  return.false;//
				  //   })
				  // $("body").click(function(){
				  // 	  console.info("body被点击");
				  //   })
				  
				//1.5 事件event的坐标[了解即可 pageX,pageY]
               /* $("aa")on("click",function(e){
				   console.info(e.pageX,e.pageY);
			   }) */

				//1.6 事件的移除
				//--按钮只能点击一次[2] 
				/* $("btn").click(function(){
					console.info(44944);//做一系列事件
					//将该点击事件移出 off
					$("#btn").unbind("click");
					//将按钮禁用
					$("#btn").prop("disabled",true);
				}) */
				 /* $("btn").one(click(function(){
					 console.info(44944);
					 //将按钮禁用
				$("#btn").prop("disabled",true);
				}) */
				//--按钮点击偶数次可行 奇数次不行
				// var i=1;
				// $("#btn").click(function(){
				// 	if(i%2==0){
				// 		console.info(44944,i);
				// 	}
				// 	i++;
				// })

				
				/* 二、动画 */
				//2.1 基本动画 [回调函数]
				/* $("#aa").hide();//默认隐藏
				$("#xx").click(function(){
					$("#aa").show(1000,function{
						//回
						alert("来了，老弟")
					})//1s
				}) 
				$("#xx").click(function(){
					$("#aa").show(2000);//2s
				})
				$("#xx").click(function(){
					$("#aa").show(1000);//1s
				})
				 */
				//2.2 滑动动画
				// $("#xx").click(function(){
				// $("#aa").hide();//默认隐藏
				// 	$("#aa").slideDown(1000);
						
				// }) 
				// $("#xx").click(function(){
				// 	$("#aa").slideUp(2000);//2s
				// })
				// $("#xx").click(function(){
				// 	$("#aa").slideToggle(1000);//1s
				// })
				
				//2.3 淡入淡出(透明度)
				/* $("#aa").hide();//默认隐藏
				$("#xx").click(function(){
					$("#aa").fadeIn(1000);
						
				}) 
				$("#xx").click(function(){
					$("#aa").fadeOut(2000);//2s
				})
				$("#xx").click(function(){
					$("#aa").fadeToggle(1000);//1s
				})
				 */
				//2.4 自定义动画
				//--缩放
			 /* $("#bb").on("click",function(){
				  $("#aa").animate({
					  width:"100px";
					  heigth:"300px";
				  },1000);
			  })*/
			 	//--移动[2]
				/* $("#bb").click(function{
					$("#aa").animate({
						left:100,
						top:100
					},2000)
				})
				 */
				//在自身基础上进行移动
				/* $("#bb").click(function{
					$("#aa").animate({
						left:"+=5",
						top:"+=10"
					},100)
				}) */
				
				$("#bb").click(function(){
					$("#aa").addCass("abc");
				})
				
			})
			
			
		</script>
	</head>
	<body>
		<input type="button" value="点我试试" id="btn"/>
		<a style="text-decoration: none;" href="#">显示</a>
		<button id="xx">显示[展开]</button>
		<button id="yy">隐藏[收缩]</button>
		<button id="zz">显示/隐藏(展开/收缩)[淡入/淡出]</button>
		<button id="bb">变变变</button>
		<div id="aa"></div>
		<br/>
		<br/>
		<p>这是一巴掌</p>
	</body>
</html>