jQuery04（事件&动画）

jQuery事件

什么是事件？

页面对不同访问者的响应叫做事件。

事件处理程序是指当HTML中发生某些事件时所调用的方法

加载Dom两种方式

1.window.onload方式：

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

2.jQuery方式：

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

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
            //js不可以写多个 多个会被覆盖
            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");
			}) 
        </script>

注意版本区别：jQuery3.0：window.onload比jQuery先执行

jQuery1.x和2.x：jQuery比window.onload先执行

绑定事件的两种方式

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

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">                  
            $("#aa").on("click",function(){
					alert("点击事件");
    		})
        </script>

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

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
                $("#aa").click(function(){
					alert("点击事件");
				})
         </script>

合成事件/事件切换

hover():鼠标悬停合成事件

当鼠标指针悬停在被选元素上时要运行的两个函数，方法触发mouseenter和mouseleave事件

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
                $("a").hover(function(){//鼠标移上
					$("#aa").show();//显示
				},function(){//鼠标移出
					$("#aa").hide();//隐藏
					
				})
        </script>

toggle():鼠标悬停合成事件

在版本jQuery版本1.8中被废弃，1.9版本中被移除

        <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
                $("a").toggle(function(){
					$("#aa").show();//显示
				},function(){
					$("#aa").hide();//隐藏
				})
        </script>

事件传播（事件冒泡）

传播方式：小--->中--->大

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

移除事件

元素.unbind/off("事件名")

//将点击事件进行移除
$("#btn").off("click");

jQuery动画

控制元素的显示和隐藏

语法：

                $("#yy").click(function(){
					$("#aa").hide(2000);//隐藏
				})
        
               $("#aa").hide();//默认隐藏
				$("#xx").on("click",function(){
					$("#aa").show(1000,function(){
						alert("显示完毕");
				})

滑动动画

控制元素的上下滑动效果

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

jQuery slideToggle()来切换slideDown()和slideUp()方法

淡入淡出动画（透明度）

控制元素的淡入淡出效果

                $("#xx").on("click",function(){
					$("#aa").fadeIn(1000);// 1s 显示
				})
				$("#yy").click(function(){
					$("#aa").fadeOut(2000);//隐藏
				})
				$("#zz").click(function(){
					$("#aa").fadeToggle(1000);//切换
				})

jQuery fadeToggle()来切换fadeIn()和fadeOut()方法

自定义动画

                //--缩放
				$("#bbb").click(function(){
					$("#aa").animate({
						width:"100px",
						height:"300px"
					},1000);
					
				}) 
				//--移动[2]
				$("#bbb").click(function(){
					$("#aa").animate({
                    //每点击一次向右移动5 向下移动8
						left:"+=5",
						top:"+=8"
					},100);
				})