jQuery03（事件和动画）

最新推荐文章于 2024-07-20 22:52:28 发布

愆零落

最新推荐文章于 2024-07-20 22:52:28 发布

阅读量1.3k

点赞数

文章标签： html linq 前端

本文链接：https://blog.csdn.net/m0_67777597/article/details/123464682

版权

布局代码：

<body>
		<h3>1.绑定事件的两种方式   on 元素.事件</h3>
		<button type="button" id="oBtn1">点击获取</button>
		<hr >
		<div id="oDiv" style="width: 100px;height: 100px;background-color: red;">
			
			
		</div>
		<button type="button" id="oBtn2">点击显示与隐藏</button>
		<button type="button" id="oBtn3">点击</button>
		
	</body>

一.事件

1. 绑定事件的两种方式 [eg.:点击、悬停事件等等]
--元素.on/bind()

$("#oBtn1").on('click',function(){
	 	alert(123)
			 });

 $("#oBtn1").bind('click',function(){
alert(123)
							 });

元素.事件名

$("#oBtn1").click(function(){
								alert(123)
							})

2. 合成事件/事件切换
--hover()悬停控制元素[div]的显示和隐藏

$("#oDiv").hover(function(){
								$(this).addClass("over")
							},function(){
								$(this).removeClass("over")
							})

3.toggle()点击控制元素[div]的显示和隐藏[注意版本问题]

	$("#oBtn2").click(function(){
								// 有参数调用后有延时效果
							$("#oDiv").toggle(1000)
							$("#oDiv").toggle(function(){
								alert("隐藏了，，，，我出现了")
							},function(){
								alert("我出现了")
							})
							})

4. 事件的传播(事件冒泡) 小p->中div->大body

$("body").click(function(){
								alert(123)
							})
							$("#oBtn2").click(function(){
								alert(123)
								return false;//阻止事件传播
							})

5. 事件event的坐标[了解即可 pageX,pageY]

$("body").click(function(){
				//鼠标 pageX  横坐标  pageY  纵坐标
				console.log(event.pageX,event.pageY)
				console.log(event.offsetX,event.offsetY)
				// 窗口
				console.log(event.clientX,event.clientY)
			})

6. 事件的移除

--按钮只能点击一次[2]

var flag=true
                             $("#oBtn3").click(function(){
								 if(flag==true){
									alert(123) 
								 } 
                            // $(this).off()
								 $(this).unbind();//解绑事件
								 
							 })

7.jQuery中提高一个方法 one

$("#oBtn3").one('click',function(){
							alert(123)	
							})
							--按钮点击偶数次可行 奇数次不行
							var num=1;
			                  $("#oBtn3").click(function(){
								if(num % 2==0){
									alert(123)
								}  
								num++;
							  })

二.动画

布局代码：

<body>
		<button type="button" id="btn1">显示</button>
		<button type="button" id="btn2">隐藏</button>
		<button type="button" id="btn3">显示隐藏（toggle）</button>
		<button type="button" id="btn4">滑动</button>
		<button type="button" id="btn5">滑动（向下）</button><br>
		<button type="button" id="btn6">滑动（切换）</button>
		<button type="button" id="btn7">淡入</button>
		<button type="button" id="btn8">淡出</button><br>
		<button type="button" id="btn9">淡入淡出</button>
		<button type="button" id="btn10">点击变化（宽高）</button>
		<button type="button" id="btn11">点击变化（左右）</button>
		<button type="button" id="btn12">点击变化（叠加）</button>
		<div  style="background-color: red; width: 100px ; height: 100px;position: absolute;left: 0px;top: 150px;">
			
		</div>
</body>

2.1 基本动画 [回调函数]
隐藏

$("#btn2").click(function(){
				// alert(123)
				$("div").hide(5000);
			})

显示

$("#btn2").click(function(){
				$("div").show(2000);
			})

切换

$("#btn3").click(function(){
				$("div").toggle(2000);
			})

滑动动画

$("#btn4").click(function(){
				// 往上拉
				$("div").slideUp(2000);
				
			})
$("#btn5").click(function(){
				// 往下拉
				$("div").slideDown(2000);
				
			})
			$("#btn6").click(function(){
				// 切换
				$("div").slideToggle(2000);
				
			})

淡入淡出(透明度)

$("#btn7").click(function(){
				// 淡入
				$("div").fadeOut(2000);
				
			})
			$("#btn8").click(function(){
				// 淡出
				$("div").fadeIn(2000);
				
			})
			$("#btn9").click(function(){
				// 淡入淡出切换
				$("div").fadeToggle(2000);
				
			})

2.4 自定义动画

$("#btn10").click(function(){
				
				$("div").animate({
					width:"500px",
					height:"500px"
				},3000);
				
			})
			$("#btn11").click(function(){
				
				$("div").animate({
					left:"500px",
					top:"300px"
				},3000);
				
			})
			
			$("#btn12").click(function(){
				
				$("div").animate({
					left:"+=50px",
					top:"+=3px"
				},3000);
				
			})

愆零落

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery03（事件和动画）

布局代码：<body> <h3>1.绑定事件的两种方式 on 元素.事件</h3> <button type="button" id="oBtn1">点击获取</button> <hr > <div id="oDiv" style="width: 100px;height: 100px;background-color: red;"> </div> <but
复制链接

扫一扫