JQuery事件绑定3事件切换
事件切换: toggle
jq对象,toggle(fn1,fn2)
当单击jq对象对应的组件后,会执行fn1,第二个点击会执行fn2...
案例:
<!DOCTYPE html>标签:JQuery,function,绑定,toggle,事件,backgroundColor,切换 From: https://www.cnblogs.com/ssr1/p/16615010.html
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
//获取按钮,调用toggle方法
$("#btn").toggle(function () {
//改变div背景色backgroundColor 颜色为 green
$("#myDiv").css("backgroundColor","green");
},function () {
//改变div背景色backgroundColor 颜色为 pink
$("#myDiv").css("backgroundColor","pink");
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="事件切换">
<div id="myDiv" style="width:300px;height:300px;background:pink">
点击按钮变成绿色,再次点击红色
</div>
</body>
</html>