jQuery04事件&动画

一. 事件

1.加载Dom的两种方式2

(1) window.onload方式

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

(2) jQuery方式

    执行时间：网页结构绘制完成后，执行
    编写个数：多个

两个都有的情况下执行顺序【面试题】
    jQuery3.0：window.onload比jQuery先执行
    jQuery1.0和2.0：jQuery比window.onload先执行

2.绑定事件两种方式

    元素.on("事件名",function(){})
    元素.事件名(function(){})
    案例2：演示事件(鼠标悬停和点击)的两种方式

代码案例：

代码案例：

				// 1.标签绑定绑定事件的方式
				// (1)直接调用click点击事件的方法即可
				// $("#btn1").click(function(){
				// 	alert("我点击了这个按钮")
				// });
				// (2)可以通过标签对象调用on这个方法来绑定一个指定的事件。
				// $("#btn1").on('click',function(){
				// 	alert("on实现的点击");
				// });
				// (3)可以通过调用bind方法进行绑定一个事件
				// $("#btn1").bind('click',function(){
				// 	alert("bind 点击")
				// });

3.合成事件/事件切换

    hover()：鼠标悬停合成事件
        鼠标移上去第一个函数
        鼠标移除第二个函数
        案例3：升级案例2鼠标悬停显示和隐藏
    toggle()：鼠标点击合成事件
        案例4：升级案例2鼠标点击显示和隐藏

代码案例：

//1.合成事件hover
			$(function(){
				// 参数中第1个回调函数的作用：鼠标触碰式触发
				// 参数中第2个回调函数的作用：鼠标离开式触发
				$("#btn2").hover(function(){
					console.log('111')
					// 标签显示show  属于jQuery中的动画效果
					// $("#oDiv").show();
					$("#oDiv").css("display","block");
				},function(){
					console.log('222')
					// 标签隐藏
					// $("#oDiv").hide();
					$("#oDiv").css("display","none");
				});
				
				
				// toggle事件
				$("#btn3").click(function(){
					console.log("我点击了");
					// 在jQuery中所有的动画效果都是默认改变标签的宽度，高度，透明度
					$("#oDiv2").toggle(3000);
				})
			});

4.事件传播（事件冒泡）

    传播：小-->中-->大
    阻止传播：事件后面加上  return false
    案例5：给body div span(在div中) 分别添加点击事件，测试事件传播

代码案例：

// 事件传播：在多个标签中设置点击事件，只允许当前点击的标签有效
		// 其它则无效----解决  阻止事件传播
		
		// 阻止事件传播的顺序：从小到大。
			$(function(){
				// p标签设置一个点击事件
				$("p").click(function(){
					alert('p段落的点击事件');
					return false;//阻止事件传播
				})
				// 设置oDiv3的点击事件
				$("#oDiv3").click(function(){
					alert('oDiv3的点击事件')
					return false;
				})
				// $("body").click(function(){
				// 	alert('body点击事件')
				// });

5.事件坐标

    offsetX：当前元素左上角
    clientX：窗口左上角
    pageX：网页左上角
    案例6：pageX实现 鼠标悬浮，获取鼠标坐标

代码案例：

				// 事件坐标  pageX  pageY   都是通过event事件对象调用
				
				$("body").click(function(){
					// 获取鼠标所点击的位置
					// 鼠标的坐标
					// console.log(event.pageX+"   "+event.pageY);
					// // 偏移量  考虑了外边距,边框,内填充
					// console.log(event.offsetX+"   "+event.offsetY);
					// // 如果没有滚动条，与pageX和pageY是一样的
					// // client 可视区宽度和高度
					// console.log(event.clientX+"    "+event.clientY)
				});
			});

6.移除事件：

    元素.unbind("事件名")
    案例7：按钮点击一次，不能再次点击
    注意1：一般情况下，不会使用unbind，推荐使用变量控制事件
    案例8：点击按钮偶数次可以，奇数次则失效
    注意2：如果某个元素只允许使用一次事件，则可以使用one()
    案例9：按钮只允许点击一次

代码案例：

<!-- 解绑事件 -->
		<script type="text/javascript">
			$(function(){
				// unbind  off
				
				$("#btn4").click(function(){
					alert("恭喜你中奖了~");
					// 调用解绑事件
					// $(this).off();
					// $(this).disable();//禁用  无效
					// disabled 是属性  不是样式  不能用css去设置
					$(this).attr("disabled","disabled");
					$(this).unbind();
				});
				
				var index = 1;
				$("#btn5").click(function(){
					// 点击（奇数次可以，偶数次不行）
					// index为奇数的时候可以   为偶数的时候不行
					if(index % 2 == 1){
						console.log(index);
					}
					index++;
				});
				
				$("#btn6").one('click',function(){
					alert("只有一次机会")
				})
			});

二.动画效果

1.基本

    显示：show(Time)
    隐藏:hide(Time)
    切换：toggle（Time）
    案例1：点击按钮，控制div显示和隐藏（基本动画）

代码案例：

function test1(){
				// div隐藏和显示
				$("div").eq(0).show(5000)
			}
			function test2(){
				// div隐藏和显示
				$("div").eq(0).hide(5000)
			}
			function test3(){
				// div隐藏和显示
				$("div").eq(0).toggle(5000)
			}

2.滑动

    slideUp(Time)：动画收缩(向上滑动)-->隐藏
    slideDown(Time)：动画展开(向下滑动)-->显示
    slideToggle(Time)：动画切换
    案例2：点击按钮，控制div显示和隐藏（滑动）

代码案例：

			function test4(){
				$("div").eq(1).slideUp(4000);
			}
			function test5(){
				$("div").eq(1).slideDown(4000);
			}
			function test6(){
				$("div").eq(1).slideToggle(4000);
			}

3.淡入淡出(透明度)

    fadeIn(Time)：淡入(透明度减少)
    fadeOut(Time)：淡出(透明度增大)
    fadeToggle(Time)：切换
    案例3：点击按钮，控制div显示和隐藏（透明度）

代码案例：

function test7(){
				$("div").eq(2).fadeIn(4000);
			}
			function test8(){
				$("div").eq(2).fadeOut(4000);
			}
			function test9(){
				$("div").eq(2).fadeToggle(4000);
			}

4.自定义动画

    元素.animate({属性：属性值},Time)
    缩放
        width
        height
    案例4：点击按钮，控制div的宽度和高度变大
    移动
        top
        left
    案例5：点击按钮，控制div移动，距离网页左上角
    移动(本元素)，距离
        top=  "+="
        left= "-="
    案例6：点击按钮，控制div移动，距离本元素

代码案例：

function test10(){
				$("div").eq(3).animate({
					width:"+=500px",
					height:"+=500px",
					opacity:"0.1"
				},10000)
			}
			
			
			
			
			$(function(){
				// 定时器
				window.setInterval(function(){
					$("div").last().animate({
						left:"+=5px"
					},2);
				},500);
			})