事件
鼠标事件
事件 | 说明 |
---|---|
mouseenter | 鼠标移入(无冒泡) |
mouseleave | 鼠标移出(无冒泡) |
mouseover | 鼠标移入 |
mouseout | 鼠标移出 |
mousemove | 鼠标移动 |
click | 单击 |
dblclick | 双击 |
复合事件
$(selector).hover(function(){enter事件},function(){leave事件})
键盘事件(参数e)
事件 | 说明 |
---|---|
keydown | 按键被按下 |
keyup | 按键被抬起 |
keypress | 可打印字符按键被点击 |
键盘按键返回值
e.keyCode
阻止默认按键事件
e.preventDefault()
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<input type="text">
<input type="submit" value="enter提交">
</form>
</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(window).on("keydown", function (e) {
console.log(e.keyCode)
})
$("input:eq(0)").on("keydown", function (e) {
if (e.keyCode == 13) {
e.preventDefault()
}
})
</script>
上述代码:
1.控制台输出按键对应数值;
2.按回车不自动提交。
系统事件
事件 | 说明 |
---|---|
$(window).resize(回调函数) | 调整窗口大小执行 |
事件绑定
一次性绑定:one(“事件名”,function(){})
on(“事件名”,此参数可选,function(){})
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
//方法1:
// $("ul").on("click", "li", function () {
// alert($(this).text())
// })
//方法2:
$("li").on("click", function () {
alert($(this).text())
})
</script>
样式如下:
解除绑定
语法:$(selector).off(参数)
参数 | 说明 |
---|---|
无 | 删除该元素全部事件 |
事件名 | 删除该元素此事件 |
事件名,回调函数 | 删除此事件的此函数 |
动画
分类 | 语法 | 说明 |
---|---|---|
全部 | hide(参数) | 隐藏 |
show(参数) | 显示 | |
toggle(参数) | 隐藏、显示切换 | |
高度 | slideDown(参数) | 展开 |
slideUp(参数) | 收起 | |
slideToggle(参数) | 展开、收起切换 | |
透明度 | fadeIn(参数) | 淡入 |
fadeOut(参数) | 淡出 | |
fadeToggle(参数) | 淡入、淡出切换 |
参数 | 说明 |
---|---|
“slow” | 慢,=600 |
“normal” | 中等,=400 |
“fast” | 快,=200 |
毫秒数 | 动画执行时间 |
定义动画
语法:$(selector).animate(参数)
参数 | 说明 |
---|---|
参数1 | {“样式属性”:“值”} |
参数2 | 毫秒数(动画执行时间) |
参数3 | 可选,动画结束后执行的回调函数 |
停止动画
语法:$(selector).stop(参数)
参数 | 说明 |
---|---|
无参数 | 停止当前动画,继续执行后续动画 |
true | 停止所有动画 |
true,true | 停止当前动画,并显示当前动画结束样式 |
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 200px;
background-color: pink;
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<button>move</button>
<button>stop</button>
<div></div>
</body>
</html>
<script src="jquery-3.6.0.min.js"></script>
<script>
$("button:eq(0)").on("click", function () {
$("div").animate({
"top": "+=100px",
"left": "+=50px"
}, 1000).animate({
"width": "-=10px",
"height": "-=20px"
}, 1000, function () {
$("div").css("background-color", "red")
})
})
$("button:eq(1)").on("click", function () {
//停止当前动画
//$("div").stop()
//停止所有动画
//$("div").stop(true)
//停止当前动画并停在当前动画结束样式
$("div").stop(true, true)
})
</script>
今天的分享就是这些啦,欢迎正在学习web的伙伴们“挑毛病”“提意见”,当然了也欢迎各种表扬奥~(比心,比心)