jQuery事件和动画

事件

a.加载DOM两种方式

原生态js编写加载函数 2种形式

//第一种   1个  多个加载函数时，前者无效，后者覆盖前者
window.onload = function(){
alert("第一个加载函数");
}
window.onload = function(){
alert("第二个加载函数");
}
//第二种  多个  多个加载函数时，从前者开始到后者
window.addEventListener('load',function(){
alert("第一个加载函数")
});
window.addEventListener('load',function(){
alert("第二个加载函数")
});

jQuery的加载函数  2种  一个页面可以出现多次

$(document).ready(function(){
alert("第一个加载函数");
});
$(document).ready(function(){
alert("第二个加载函数");
});
//简写(常用)
$(function(){
alert("加载函数");
});

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

编写个数：一个

2 jQuery方式
执行时间：网页结构绘制完成后，执行

编写个数：多个

3 两个都有的情况下执行顺序
jQuery3.0:indow.onload比jQuery先执行

jQuery1.0和2.0:jQuery比window.onload先执行

案例：测试两种方式的区别（个数+顺序）

//JS加载函数 两种
			window.onload = function() {
				alert("111")
			}
			window.addEventListener('load', function() {
				alert("222")
			})
			//jQuery加载函数 两种
			$(document).ready(function() {
				alert(111)
			})
			//简写
			$(function() {
				alert(222)
			})
			// 2.js的加载函数和jQuery的加载函数出现在一个页面，先后顺序
			// 版本有关  jQuery3.0版本以上   js快
			window.onload = function(){
				alert("js")
			}
			$(function(){
				alert('jQuery')
			});

b.绑定事件两种方式

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

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

案例：演示事件（鼠标悬停和点击）的两种方式

//直接调用click点击事件
			$("#btn1").click(function(){
				alert("11")
			})
			//通过标签对象调用on这个方法来绑定一个指定事件
			$("#btn1").on('click',function(){
				alert("22")
			})
			//调用bind方法
			$("#btn1").bind('click',function(){
				alert("33")
			})

c.合成事件/事件切换

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

鼠标以上去第一个函数

鼠标移出第二个函数

案例：升级案例2鼠标悬停显示和隐藏

$(function(){
			$("#btn2").hover(function(){
				$("#oDiv").show()//标签显示
			},function(){
				$("#oDiv").hide()//标签隐藏
			})
		})

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

案例：升级案例2鼠标点击显示和隐藏

$(function(){
			$("#btn3").click(function(){
				$("#oDiv2").toggle(3000)
			})
		})

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

传播：小--中--大

组织传播：事件后面加上 return false

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

// 事件传播：在多个标签中设置点击事件，只允许当前点击的标签有效
			// 其它则无效----解决  阻止事件传
			$(function() {
				$("p").click(function() {
					alert(1)
					return false //阻止事件传播
				})
				$("#oDiv3").click(function() {
					alert(2)
				})
				$("body").click(function() {
					alert(3)
				})
			})

e.事件坐标

offsetX:当前元素左上角

clientX:网页左上角

pageX:网页左上角

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

$(function() {
				// 事件坐标  pageX  pageY   都是通过event事件对象调用
				$("body").click(function() {
					console.log(event.pageX + "   " + event.pageY) //鼠标点击位置
					console.log(event.offsetX + "   " + event.offsetY) //偏移量
					console.log(event.clientX + "   " + event.clientY) //可视区 没有滚动条时和pageX一样
				})
			})

f.移除事件

元素.unbind("事件名")

案例：按钮点击一次，不能再次点击

<script>
			$(function() {
				$("#btn4").click(function() {
					$(this).off() //解绑
				})
			})
			var index = 1;
			$("#btn5").click(function() {
				// 点击（奇数次可以，偶数次不行）
				// index为奇数的时候可以   为偶数的时候不行
				if (index % 2 == 1) {
					console.log(index);
				}
				index++;
			});
 
			$("#btn6").one('click', function() {
				alert("只有一次机会")
			})
		</script>

动画效果

a.基本

显示:show(Time)

隐藏:hide(Time)

切换:toggle(Time)

案例：点击按钮，控制div显示和隐藏（基本动画）

function test1() {
				$("div").first().show(3000)
			}
 
			function test2() {
				$("div").first().hide(3000)
			}
            function test3() {
				$("div").first().toggle(3000)
			}

b.滑动

slideUp(Time):动画收缩（向上滑动）--隐藏

slideDown(Time):动画展开（向下滑动）--显示

slideToggle(Time):动画切换

案例：点击按钮，控制div显示和隐藏（滑动）

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

c.淡入淡出（透明度）

fadeIn(Time):淡入（透明度减少）

fadeOut(Time):淡出（透明度增大）

fadeToggle(Time):切换

案例：点击按钮：控制控制div显示和隐藏（透明度）

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

d.自定义动画

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

2缩放

width

heigh

3移动

top

left

4移动（本元素），距离

top="+="

left="-="

function test10() {
				$("div").last().animate({
					width: "+=500px",
					height: "+=500px",
					opacity: "0.1" //透明度
				}, 1000)
			}
function test10() {
				$("div").last().animate({
					width: "+=500px",
					height: "+=500px",
					opacity: "0.1" //透明度
				}, 1000)
			}