jQuery04---事件&动画

最新推荐文章于 2024-05-30 13:59:14 发布

xxie编程

最新推荐文章于 2024-05-30 13:59:14 发布

阅读量167

点赞数 1

分类专栏：软件开发jQuery入门 jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/qq_63531917/article/details/123624507

版权

软件开发jQuery入门同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

一、事件

加载Dom两种方式

1.window.onload:

执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行

编写个数：1个

2.jQuery方式:

执行时间：网页结构绘制完成后，执行

编写个数：多个

相同点:两个都有的情况下执行顺序

//1.1 加载DOM两种方式(区别)
			//js多个会被覆盖
			 window.onload=function(){
				console.info("js方式1")
			}
			window.onload=function(){
				console.info("js方式2")
			}
			window.onload=function(){
				console.info("js方式3")
			} 
			//jQuery可以写多个
			 $(document).ready(function(){
				console.info("jQuery方式1");
			})
			$(document).ready(function(){
				console.info("jQuery方式2");
			})
			$(document).ready(function(){
				console.info("jQuery方式3");
			})

绑定事件两种方式

1.元素.on("事件名",function(){})

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

案例2：演示事件(鼠标悬停和点击)的两种方式

<button type="button" id="bbb">变便便</button>
		<button type="button" id="xx">显示[展开](淡入)</button>
		<button type="button" id="yy">影藏[收缩](淡出)</button>
		<button type="button" id="zz">显示\影藏[展开](淡入\淡出)</button>
		<button type="button" id="btn">点我试试</button>
		<a href="#" style="text-decoration: none;">显示</a>
		<div id="aa">
			<br/>
			<br/>
			<p>这是一巴掌</p>
		</div>


// 1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
				// --元素.on/bind()
				$("#aa").on("click",function(){
					alert("嘿嘿")
				})
				$("#aa").bind("mouseover",function(){
					alert("嘿嘿")
				})
				// --元素.事件名
				$("#aa").click(function(){
					alert("干哈")
				})

合成事件/事件切换

1.hover()：鼠标悬停合成事件

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

<button type="button" id="bbb">变便便</button>
		<button type="button" id="xx">显示[展开](淡入)</button>
		<button type="button" id="yy">影藏[收缩](淡出)</button>
		<button type="button" id="zz">显示\影藏[展开](淡入\淡出)</button>
		<button type="button" id="btn">点我试试</button>
		<a href="#" style="text-decoration: none;">显示</a>
		<div id="aa">
			<br/>
			<br/>
			<p>这是一巴掌</p>
		</div>


// 1.3 合成事件/事件切换
				// --hover()悬停控制元素[div]的显示和隐藏
				$("#aa").hide();//影藏
				$("a").hover(function(){//鼠标移上
					$("#aa").show();//显示
				},function(){//鼠标移开
					$("#aa").hide();//影藏
				})
				// --toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
				$("a").toggle(function(){//点击一下
					$("#aa").show();//显示
				},function(){//再点一下
					$("#aa").hide();//影藏
				})
				// $("#aa").toggle(1000);

事件传播（事件冒泡）

1.传播：小-->中-->大

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

案例：给body div span(在div中) 分别添加点击事件，测试事件传播

<button type="button" id="bbb">变便便</button>
		<button type="button" id="xx">显示[展开](淡入)</button>
		<button type="button" id="yy">影藏[收缩](淡出)</button>
		<button type="button" id="zz">显示\影藏[展开](淡入\淡出)</button>
		<button type="button" id="btn">点我试试</button>
		<a href="#" style="text-decoration: none;">显示</a>
		<div id="aa">
			<br/>
			<br/>
			<p>这是一巴掌</p>
		</div>

//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.offsetX：当前元素左上角

2.clientX：窗口左上角

3.pageX：网页左上角

案例：pageX实现鼠标悬浮，获取鼠标坐标

<button type="button" id="bbb">变便便</button>
		<button type="button" id="xx">显示[展开](淡入)</button>
		<button type="button" id="yy">影藏[收缩](淡出)</button>
		<button type="button" id="zz">显示\影藏[展开](淡入\淡出)</button>
		<button type="button" id="btn">点我试试</button>
		<a href="#" style="text-decoration: none;">显示</a>
		<div id="aa">
			<br/>
			<br/>
			<p>这是一巴掌</p>
		</div>

//1.5 事件event的坐标[了解即可 pageX,pageY]
				$("#aa").click(function(e){
					console.info(e.pageX,e.pageY);
				})

移除事件

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

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

<button type="button" id="bbb">变便便</button>
		<button type="button" id="xx">显示[展开](淡入)</button>
		<button type="button" id="yy">影藏[收缩](淡出)</button>
		<button type="button" id="zz">显示\影藏[展开](淡入\淡出)</button>
		<button type="button" id="btn">点我试试</button>
		<a href="#" style="text-decoration: none;">显示</a>
		<div id="aa">
			<br/>
			<br/>
			<p>这是一巴掌</p>
		</div>

//1.6 事件的移除
				//--按钮只能点击一次[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").on("click",function(){
					if(i%2==0){
					//做一系列事情
					console.info(44944);
					}
					i++;
				}) */

二.动画效果

基本

1.显示：show(Time)

2.隐藏:hide(Time)

3.切换：toggle（Time）

<button type="button" id="bbb">变便便</button>
		<button type="button" id="xx">显示[展开](淡入)</button>
		<button type="button" id="yy">影藏[收缩](淡出)</button>
		<button type="button" id="zz">显示\影藏[展开](淡入\淡出)</button>
		<button type="button" id="btn">点我试试</button>
		<a href="#" style="text-decoration: none;">显示</a>
		<div id="aa">
			<br/>
			<br/>
			<p>这是一巴掌</p>
		</div>


/* $("#aa").hide();//默认影藏
				$("#xx").on("click",function(){
					$("#aa").show(1000,function(){
						//回掉函数
						alert("来了，老第")
					});//1s		
				})
				$("#yy").click(function(){
					$("#aa").hide(2000);//2s
				})
				$("#zz").click(function(){
					$("#aa").toggle(1000);//切换
				}) */

滑动

1.slideUp(Time)：动画收缩(向上滑动)-->隐藏

2.slideDown(Time)：动画展开(向下滑动)-->显示

3.slideToggle(Time)：动画切换

<button type="button" id="bbb">变便便</button>
		<button type="button" id="xx">显示[展开](淡入)</button>
		<button type="button" id="yy">影藏[收缩](淡出)</button>
		<button type="button" id="zz">显示\影藏[展开](淡入\淡出)</button>
		<button type="button" id="btn">点我试试</button>
		<a href="#" style="text-decoration: none;">显示</a>
		<div id="aa">
			<br/>
			<br/>
			<p>这是一巴掌</p>
		</div>


            $("#aa").hide();//默认影藏
						$("#xx").on("click",function(){
							$("#aa").slideDown(1000);
						});//1s		
				
						$("#yy").click(function(){
							$("#aa").slideUp(2000);//2s
						})
						$("#zz").click(function(){
							$("#aa").slideToggle(1000);//切换
						})

淡入淡出(透明度)

1.fadeIn(Time)：淡入(透明度减少)

2.fadeOut(Time)：淡出(透明度增大)

3.fadeToggle(Time)：切换

<button type="button" id="bbb">变便便</button>
		<button type="button" id="xx">显示[展开](淡入)</button>
		<button type="button" id="yy">影藏[收缩](淡出)</button>
		<button type="button" id="zz">显示\影藏[展开](淡入\淡出)</button>
		<button type="button" id="btn">点我试试</button>
		<a href="#" style="text-decoration: none;">显示</a>
		<div id="aa">
			<br/>
			<br/>
			<p>这是一巴掌</p>
		</div>

        $("#aa").hide();//默认影藏
						$("#xx").on("click",function(){
							$("#aa").fadeIn(1000);
						});//1s		
				
						$("#yy").click(function(){
							$("#aa").fadeOut(2000);//2s
						})
						$("#zz").click(function(){
							$("#aa").fadeToggle(1000);//切换
						})

自定义动画

1.元素.animate({属性：属性值},Time)

2.缩放（width&&height）

3.移动（top&&left）

4.移动(本元素)，距离（top= "+="&&left= "-="）

<button type="button" id="bbb">变便便</button>
		<button type="button" id="xx">显示[展开](淡入)</button>
		<button type="button" id="yy">影藏[收缩](淡出)</button>
		<button type="button" id="zz">显示\影藏[展开](淡入\淡出)</button>
		<button type="button" id="btn">点我试试</button>
		<a href="#" style="text-decoration: none;">显示</a>
		<div id="aa">
			<br/>
			<br/>
			<p>这是一巴掌</p>
		</div>


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

xxie编程

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery04---事件&动画

一、事件加载Dom两种方式1.window.onload:执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行编写个数：1个2.jQuery方式:执行时间：网页结构绘制完成后，执行编写个数：多个相同点:两个都有的情况下执行顺序//1.1 加载DOM两种方式(区别) //js多个会被覆盖 window.onload=function(){ console.info("js方式1") } window.onload=func..
复制链接

扫一扫