jQuery 动画和事件

        点击 onclick
      鼠标 onmouseover onmouseout onmousemove
  键盘 onkeydown onkeyup onkeypress
  onsubmit 表单提交 onreset
onchange 输入框的值发生改变的时候
onblur 失去/onfocus 得到
ondblclick 双击事件

注意事项：

jquery的事件就是js去掉on

js的事件只能有一个，但是jQuery可以有多个事件，写代码时要注意不要出现事件重复的现象。

1.加载Dom两种方式

1>.window.onload方式

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

2>.jQuery方式

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

3>.两个都有的情况下执行顺序

jQuery3.0：window.onload比jQuery先执行
jQuery1.0和2.0：jQueryt比window.onload先执行

2.绑定事件的两种方式：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
		</script>
		<style>
			div{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				margin: auto;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div ></div>
		<script type="text/javascript">
			$("div").click(()=>{
				alert("zzzzzzzz")
			})
			
			$("div").click(()=>{
				alert("aaaaaaaa")
			})
			
		</script>
	</body>
</html>

效果图：

由于jQuery可以有多个事件，所以它会弹出两次提示，而js则只会弹出后面事件的提示。

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

可以将事件委托给 body html 等·，但是注意千万不要委托在容易受影响的元素上，如：tr，td

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
		</script>
		<style>
			div{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				margin: auto;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div ></div>
		<script type="text/javascript">
			$("div").click(()=>{
				alert("zzzzzzzz")
			})
			
			$("div").click(()=>{
				alert("aaaaaaaa")
			})
			
//事件委托：委托给了"table"中的所有"button" 委托事件是："click"事件 
            $("table").on("click","button",function () {
                $(this).parents("tr").remove()
            })
		</script>
	</body>
</html>

3.合成事件/事件切换

hover():鼠标悬停合成事件（鼠标放入，鼠标移开两种状态）

鼠标移上去第一个函数

鼠标移除第二个函数

toggle():鼠标点击合成事件(控制是否显示)

注意：在箭头函数中 this代表的是window

在普通函数中，this代表的是这个函数本身

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
		</script>
		<style>
			div{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				margin: auto;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div ></div>
        //设置了延迟时间为1S 
        <button onclick="$('div').toggle(1000)">点我</button>
		<script type="text/javascript">
	    $("p").click(()=>{
            alert("---")
            return false //阻止事件的冒泡
        })
		</script>
	</body>
</html>

点击前：

点击后：

4.事件传播(事件冒泡)

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

阻止传播：时间后面加上 return false

事件的传播是从上到下传播，事件的冒泡是从下到上冒泡。它们是两个不同的方向。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
		</script>
		<style>
			div{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				margin: auto;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
    		<div ></div>
        <a href="https://www.baidu.com">
            <p>dasdasdasdsada</p>
        </a>
		<script type="text/javascript">
	    $("p").click(()=>{
            alert("---")
            return false //阻止事件的冒泡 当点击p标签时其实没有点击a标签，但是p有事件冒泡，所以可以跳转，加这行代码则可以阻断事件的冒泡
        })
		</script>
	</body>
</html>

五，事件坐标

offsetX:当前元素左上角针对整个body的位置

clientX:窗口左上角针对屏幕位置

pageX:网页左上角针对屏幕位置

效果图：

六：移除事件

元素.unbind("事件名")

$("body").unbind("mousemove")

二，动画效果

1.基本

显示：show（Time）

隐藏：hide（Time）

切换：toggle（Time）它就包含了上面两个

2.滑动

slideUp（Time）：动画收缩（向上滑动）-->隐藏

slideDown（Time）：动画展开（向下滑动）-->显示

slideToggle（Time）：动画切换

3.淡入淡出（透明度）

fadeIn（Time）：淡入（透明度减少）

fadeOut（Time）：淡出（透明度增大）

fadeToggle（Time）：切换

4.自定义动画

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

缩放：width heigth

移动：top left

移动(本元素),距离：top="+=" left="-="

今天的分享就到此为止了，更多代码小知识下期精彩继续。

xiongᥫᩣ

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 动画和事件

目录一，事件常用的基本事件：1.加载Dom两种方式1>.window.onload方式2>.jQuery方式3>.两个都有的情况下执行顺序2.绑定事件的两种方式：元素.事件名(function(){})3.合成事件/事件切换hover():鼠标悬停合成事件（鼠标放入，鼠标移开两种状态）toggle():鼠标点击合成事件(控制是否显示)4.事件传播(事件冒泡)五，事件坐标offsetX:当前元素左上角针对整个body的位置c...
复制链接

扫一扫