首页 > 其他分享> 文章详细

jQuery事件和动画

2022-03-22 00:02:29 阅读：184 来源： 互联网

标签：jQuery 动画 function alert 点击事件 div click

一、事件

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,动画,function,alert,点击,事件,div,click
来源： https://blog.csdn.net/weixin_62232726/article/details/123646603

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9