jQuery_04(事件&动画)

最新推荐文章于 2022-03-22 16:30:59 发布

飓风.

最新推荐文章于 2022-03-22 16:30:59 发布

阅读量63

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_62981121/article/details/123653711

版权

思维导图

事件

加载Dom两种方式
   window.onload方式
       执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行
       编写个数：1个
   jQuery方式
       执行时间：网页结构绘制完成后，执行
       编写个数：多个
   两个都有的情况下执行顺序【面试题】
       jQuery3.0：window.onload比jQuery先执行
       jQuery1.0和2.0：jQuery比window.onload先执行
   案例1：测试两种方式的区别【个数+顺序】
绑定事件两种方式
   元素.on("事件名",function(){})
   元素.事件名(function(){})
   案例2：演示事件(鼠标悬停和点击)的两种方式
合成事件/事件切换
   hover()：鼠标悬停合成事件
       鼠标移上去第一个函数
       鼠标移除第二个函数
       案例3：升级案例2鼠标悬停显示和隐藏
   toggle()：鼠标点击合成事件
       案例4：升级案例2鼠标点击显示和隐藏
事件传播（事件冒泡）
   传播：小-->中-->大
   阻止传播：事件后面加上 return false
   案例5：给body div span(在div中) 分别添加点击事件，测试事件传播
事件坐标
   offsetX：当前元素左上角
   clientX：窗口左上角
   pageX：网页左上角
   案例6：pageX实现鼠标悬浮，获取鼠标坐标
移除事件：
   元素.unbind("事件名")
   案例7：按钮点击一次，不能再次点击
   注意1：一般情况下，不会使用unbind，推荐使用变量控制事件
   案例8：点击按钮偶数次可以，奇数次则失效
   注意2：如果某个元素只允许使用一次事件，则可以使用one()
   案例9：按钮只允许点击一次

加载函数

window.onload 只会加载一次并且在整个网页中只能编写一次
执行时间：整个网页所有内容全部加载完成之后,才会执行
可以编写一个函数，通过onload调用
可以在body通过事件属性调用onload
//JavaScript编写方式
window.onload = function() {
console.log("a")
}
function add(){
console.log(123) ;
}
window.load()=add();
<body οnlοad="alert(123)"></body>

jQuery方式
可以加载多次并且在整个网页中可以编写多次
执行时间：网页结构绘制完成完成后,执行
//jQuery编写方式
$(function() {
console.log("$a")
})
jQuery编写的完整方式
jQuery编写function()方法的完整方式

$(document).ready(function(){

console.log("你好")
})

$(function(){
				$("#btn2").hover(function(){
					$("div").first().show();
				},function(){
						$("div").first().hide();
				})
				
				
			$("#btn3").click(function(){
				$("div").eq(1).toggle(2000);
			});
			
			$("#pp").click(function(){
				alert("p段落点击");
				return false;
			});
			$("#oDiv").click(function(){
				alert("div点击");
			});
			
			$("body").click(function(){
				// 获取鼠标所点击的位置
				console.log(event.pageX+"  "+event.pageY);
				// 偏移量  算了外边距  内边距
				console.log(event.offsetX+"  "+event.offsetY);
				// 可视区   如果没有滚动条和page 和 offset是一样的
				console.log(event.clientX+"  "+event.clientY);
			})
			});




$(function(){
				$("#btn4").click(function(){
					alert("恭喜你中奖了")
					// 调用  off、unbind 方法后btn4按钮再次点击无效
					// $(this).off();
				$(this).unbind();
					
				})
				
				var i=0;
				$("#btn5").click(function(){
					if(i%2==1){
						alert(i);
					}
					i++;
				});
				
				$("#btn6").one('click',function(){
					alert("只有一次机会")
				})
			})

动画效果

   基本
       显示：show(Time)
       隐藏:hide(Time)
       切换：toggle（Time）
       案例1：点击按钮，控制div显示和隐藏（基本动画）
   滑动
       slideUp(Time)：动画收缩(向上滑动)-->隐藏
       slideDown(Time)：动画展开(向下滑动)-->显示
       slideToggle(Time)：动画切换
       案例2：点击按钮，控制div显示和隐藏（滑动）
   淡入淡出(透明度)
       fadeIn(Time)：淡入(透明度减少)
       fadeOut(Time)：淡出(透明度增大)
       fadeToggle(Time)：切换
       案例3：点击按钮，控制div显示和隐藏（透明度）
   自定义动画
       元素.animate({属性：属性值},Time)
       缩放
           width
           height
       案例4：点击按钮，控制div的宽度和高度变大
       移动
           top
           left
       案例5：点击按钮，控制div移动，距离网页左上角
       移动(本元素)，距离
           top= "+="
           left= "-="
       案例6：点击按钮，控制div移动，距离本元素

	function text1(){
				$("div").first().show();
			}
			function text2(){
				$("div").first().hide();
			}
			
			function text3(){
				$("div").first().toggle(3000)
			}
			
			function text4(){
				$("div").eq(1).slideUp(2000)
			}
			function text5(){
				$("div").eq(1).slideDown(2000)
			}
			
			function text6(){
				$("div").eq(1).slideToggle(2000)
			}
			
			
			function text7(){
				$("div").eq(2).fadeIn(2000)
			}
			function text8(){
				$("div").eq(2).fadeOut(2000)
			}
			function text9(){
				$("div").eq(2).fadeToggle(2000)
			}
			
			
			// 自定义动画
			function text10(){
				$("div").last().animate({
					width:"+=200px",
					height:"+=200px",
					opacity:"0.1"
				})
			}