jQuery事件&动画

最新推荐文章于 2024-11-03 20:03:09 发布

秃头没秃头

最新推荐文章于 2024-11-03 20:03:09 发布

阅读量731

点赞数 5

文章标签： html 前端 jquery

本文链接：https://blog.csdn.net/weixin_66110079/article/details/123621840

版权

本文详细介绍了jQuery中的事件处理，包括DOM加载、事件绑定、事件传播、事件移除等，并通过代码展示了点击、悬停等常见事件的实现。此外，还探讨了jQuery的动画效果，如基本动画、滑动、淡入淡出及自定义动画，帮助读者深入理解jQuery在动态效果上的应用。

摘要由CSDN通过智能技术生成

Hilo Everybody wellcome to my channel！

今天Lion带大家来学习jQuery的事件以及动画（jQuery04）

一、jQuery事件

代码展示：

            /* 一、事件 */
			//1.1 加载DOM两种方式(区别)
			// window.onload=function(){
			// 	console.info(1);
			// }
			// $(function(){
			// 	console.info(2);
			// })



            //1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
			//--元素.on/bind()
			// $("#aa").on("click",function(){
			// 	console.info("你还真的点啊！");
			// })
			// $("#aa").bind("click",function(){
			// 	console.info("点两次了都！");
			// })
			// //--元素.事件名
			// $("#aa").click(function(){
			// 	console.info("点我就对了！");
			// })


			//1.3 合成事件/事件切换
			// $("#qq").hide();
			//--hover()悬停控制元素[div]的显示和隐藏

			// $("#qwe").hover(function(){
			// 	$("#qq").show();
			// },function(){
			// 	$("#qq").hide();
			// })
			//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
			// $("#aa").toggle(function(){
			// 	$("#qq").show();
			// },function(){
			// 	$("#qq").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.6 事件的移除
			//--按钮只能点击一次[2]
			// $("#aa").on("click",function(){
			// 	console.info("你还真的点啊！");
			// 	$("#aa").off("click");
			// })
			// $("#aa").on("click",function(){
			// 	console.info("你还真的点啊！");
			// 	$("#aa").unbind("click");
			// })

			// $("#aa").one("click",function(){
			// 	console.info("只能点击一次哦！");
			// })

			//--按钮点击偶数次可行 奇数次不行
			// var i =0;
			// $("#aa").on("click",function(){
			// 	if(i%2==0){
			// 		console.info("你还真的点啊！");
			// 	}
			// 	i++;
			// })
			// $("#aa").dblclick(function(){
			// 	console.info("点吧点吧随便你啊！");
			// })

二、动画

代码展示：

			/* 二、动画 */
			// $("#qq").hide();
			//2.1 基本动画 [回调函数]
			// $("#a1").click(function(){
			// 	$("#qq").show(1000,function(){
			// 		alert(1);
			// 	})
			// })
			// $("#a2").click(function(){
			// 	$("#qq").hide(1000,function(){
			// 		alert(1);
			// 	})
			// })
			// $("#a3").click(function(){
			// 	$("#qq").toggle(1000,function(){
			// 		alert(1);
			// 	})
			// })
			//2.2 滑动动画
			// $("#a1").click(function(){
			// 	$("#qq").slideDown(1000,function(){
			// 		alert(1);
			// 	})
			// })
			// $("#a2").click(function(){
			// 	$("#qq").slideUp(1000,function(){
			// 		alert(1);
			// 	})
			// })
			// $("#a3").click(function(){
			// 	$("#qq").slideToggle(1000,function(){
			// 		alert(1);
			// 	})
			// })
			//2.3 淡入淡出(透明度)
			// $("#a1").click(function(){
			// 	$("#qq").fadeIn(1000,function(){
			// 		alert(1);
			// 	})
			// })
			// $("#a2").click(function(){
			// 	$("#qq").fadeOut(1000,function(){
			// 		alert(1);
			// 	})
			// })
			// $("#a3").click(function(){
			// 	$("#qq").fadeToggle(1000,function(){
			// 		alert(1);
			// 	})
			// })
			//2.4 自定义动画

			//--缩放
			// $("#aa").click(function(){
			// 	$("#qq").animate({
			// 		width:"100px",
			// 		heigth:"400px"
			// 	},1000)
			// })


			//--移动[2]
			// $("#aa").click(function() {
			// 	$("#qq").animate({
			// 		top: "+=10",
			// 		left: "+=20"
			// 	},10)
			// })


			//--在自身基础上移动[2]
			// $("#aa").click(function() {
			// 	$("#qq").animate({
			// 		left: "+=5",
			// 		top: "+=5"
			// 	}, 10);
			// }) 



			/* $("#aa").click(function(){
				$("#qq").addClass("xyz");
			}) */