jquery事件切换
逐个添加事件
需要几个事件,就天添加几次,每次是对象调用函数
链接方式
方法返回当前对象
切换方式
hover函数接收两个函数(如A,B)
点击A后事件切换为B
点击B后事件切换为A
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<script type="application/javascript">
$(function () {
//1:----------------原始方式----------------
/*
$("#myDiv").on("mouseover",function () {
$(this).css("backgroundColor","green");
});
$("#myDiv").on("mouseout",function () {
$(this).css("backgroundColor","blue");
});
*/
//2:----------------链式方式----------------
$("#myDiv").on("mouseover",function () {
$(this).css("backgroundColor","green");
}).on("mouseout",function () {
$(this).css("backgroundColor","blue");
});
//3:----------------切换方式----------------
/*
$("#myDiv").hover(function () {
$(this).css("backgroundColor","green");
},function () {
$(this).css("backgroundColor","blue");
});
*/
});
</script>
<body>
<div id="myDiv" style="width:300px;height:300px;background:red">鼠标移入变成绿色,
移出回复红色</div>
</body>
</html>
运行效果:
扫描二维码关注公众号,回复:
11811662 查看本文章