jQuery04(事件&动画)

最新推荐文章于 2025-01-18 09:08:38 发布

呼啦啦dxy

最新推荐文章于 2025-01-18 09:08:38 发布

阅读量932

点赞数 4

文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_66202611/article/details/123605428

版权

本文详细讲解了window.onload与jQuery在DOM加载时机和事件绑定上的区别，包括代码演示和合成事件、动画效果的应用，适合理解DOM操作与JavaScript高级技巧。

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

一，《事件》

【1】加载Dom的两种方式：1.window.onload方式
（1）执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行
（2）编写个数：1个

2.jQuery方式
（1）执行时间：网页结构绘制完成后，执行
（2）编写个数：多个

两个都有的情况下执行顺序为（执行顺序与版本有关系）：

（1）jQuery3.0：window.onload比jQuery先执行

（2）jQuery1.0和2.0：jQuery比window.onload先执行

《代码演示》

                window.onload=function(){
				console.info("js方式1");
			}
			window.onload=function(){
				console.info("js方式2");
			}
			window.onload=function(){
				console.info("js方式3");
			} 
			

			//jQuery方式 可以写多个 
			 $(function(){
				console.info("jQuery方式1");
			})
			$(function(){
				console.info("jQuery方式2");
			})
			$(function(){
				console.info("jQuery方式3");
			})

【2】绑定事件有两种方式：点击，悬停事件等
（1）元素.on/bind()("事件名",function(){})

（2）元素.事件名(function(){})

《代码演示》

                $("#aa"),on("click",function(){
					alert("hahaha");
				}) 
				
			     $("#aa").bind("mouseover",function(){
					alert("fsfs");
				}) 


				
				//元素.事件名
				 $("#aa").click(function(){
					alert("haha");
				})

合成事件/事件切换：
（1） hover()：鼠标悬停合成事件

（2）toggle()：鼠标点击合成事件

补充：点击控制元素[div]的显示和隐藏[注意版本问题]

《代码演示》

                $("#aa").hide();//隐藏
				$("a").hover(function(){//鼠标移上事件
					$("#aa").show();//显示
				},function(){//鼠标移出
					$("#aa").hide();//隐藏
				})
				

				//--toggle()
			     $("#aa").hide();//隐藏
				 $("a").toggle(function(){//点击一下
				 $("#aa").show();//显示
				 },function(){//再点一下
					$("#aa").hide();//隐藏
				})

事件传播（事件冒泡）：
（1）传播：小-->中-->大

（2）阻止传播：事件后面加上 return false

《代码演示》

提示：分别添加点击事件

                $("p").click(function(){
					console.info("p被打了");
				})
				$("div").click(function(){
					console.info("div被打了");
					// return false;//阻止传播
				})
				$("body").click(function(){
					console.info("body被打了");
				})

事件坐标：
                    offsetX：当前元素左上角
                   clientX：窗口左上角
                    pageX：网页左上角

《代码演示》

                $("#aa").click(function(e){
					console.info(e.pageX,e.pageY);//x,y坐标
				})

移除事件：
                    元素.unbind("事件名")

                    注意1：一般情况下，不会使用unbind，推荐使用变量控制事件

                    注意2：如果某个元素只允许使用一次事件，则可以使用one()

《代码演示》

            //按钮只能点击一次[2]
			$("#btn").on("click",function(){
					//做一系列的事情
					console.info(44944);
					//将点击事件进行移出
					$("#btn").off("click");
					//将按钮禁用
					$("#btn").attr("disabled",true);
				})

            //一次
             $("#btn").on("click",function(){
					console.info(44944);
					//将按钮禁用
					$("#btn").attr("disabled",true);
				})

            //按钮点击偶数次可行 奇数次不行
				 var i = 1;
				 $("#btn").click(function(){
					//判断
					if(i%2==0){
						console.info(44944);//做一系列的事情
					}
					i++;
				})

二，《动画效果》

基本动画【回调函数】：
                    显示：show(Time)
隐藏:hide(Time)
                    切换：toggle（Time）

《代码演示》

                $("#aa").hide();//默认隐藏
				$("#xx").on("click",function(){
					$("#aa").show(1000,function(){
						//回调函数
						alert("hhhhh");
					});//ls 显示
				})
				$("#yy").on("click",function(){
					$("#aa").hide(2000);//ls 隐藏
				})
				$("#zz").on("click",function(){
					$("#aa").toggle(1000);//ls 切换
				})

滑动动画：
           slideUp(Time)：动画收缩(向上滑动)-->隐藏
           slideDown(Time)：动画展开(向下滑动)-->显示
            slideToggle(Time)：动画切换

                $("#aa").hide();//默认隐藏
				$("#xx").on("click",function(){
					$("#aa").slideDown(1000)//ls 显示
				})
				$("#yy").on("click",function(){
					$("#aa").slideUp(2000);//ls 隐藏
				})
				$("#zz").on("click",function(){
					$("#aa").slideToggle(1000);//ls 切换
				})

淡入淡出(透明度)：
                    fadeIn(Time)：淡入(透明度减少)
                    fadeOut(Time)：淡出(透明度增大)
                   fadeToggle(Time)：切换

自定义动画：
                   元素.animate({属性：属性值},Time)
                    缩放 width  height

                 移动   top     left

                    移动(本元素)，距离
                       top= "+="
                        left= "-="

《代码演示》

                //缩放
               $("#bbb").click(function(){
					$("#aa").animate({
						width:100,
						heigth:300
					},1000)
				})
				

				//--移动[2]
				 $("#bbb").click(function(){
					$("#aa").animate({
						left:"+=5",
						top:"+=8"
					},100)
				})

补充知识点：图片的旋转与旋转时间

（1）transform: rotate(度数deg);----旋转的度数

（2）transition: all 200s;-------旋转的时间

《代码演示》

提示：1.先定义样式

           .xyz{
				transform: rotate(6666888886deg);
				transition: all 2000000s;
			}

2.再在函数里调用

                $("#bbb").click(function(){
					$("#aa").addClass("xyz");
				})