本文主要是介绍jQuery事件和动画，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、事件

1.加载DOM两种方式

1.1 window.onload方式

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

编写个数：一个

1.2 jQuery方式

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

编写个数：多个

1.3两个都有的情况下执行顺序

jQuery3.0:indow.onload比jQuery先执行

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

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

//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')
			});

2.绑定事件两种方式

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

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

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

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

3.合成事件/事件切换

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

鼠标以上去第一个函数

鼠标移出第二个函数

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

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

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

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

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

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

传播：小--中--大

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

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

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

5.事件坐标

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一样
				})
			})

6.移除事件

元素.unbind("事件名")

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

<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>

二、动画效果

1.基本

显示:show(Time)

隐藏:hide(Time)

切换:toggle(Time)

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

function test1() {
				$("div").first().show(3000)
			}

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

2.滑动

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

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

slideToggle(Time):动画切换

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

function test4() {
				$("div").eq(1).slideUp(3000)
			}

			function test5() {
				$("div").eq(1).slideDown(3000)
			}

			function test6() {
				$("div").eq(1).slideToggle(3000)
			}

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.自定义动画

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

4.2缩放

width

heigh

4.3移动

top

left

4.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)
			}

这篇关于jQuery事件和动画的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！