【无标题】

最新推荐文章于 2024-05-18 00:53:54 发布

原创最新推荐文章于 2024-05-18 00:53:54 发布 · 826 阅读

CC 4.0 BY-SA版权

文章标签：

一，事件
常用的基本事件：
点击 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.合成事件/事件切换

over():鼠标悬停合成事件（鼠标放入，鼠标移开两种状态）
鼠标移上去第一个函数

鼠标移除第二个函数

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