影者东升 发表于 2021-7-7 14:50:31

前端基础 - JQuery事件切换(原来还有这种写法)

  JQuery事件切换  效果图:

  代码:
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function() {

/**第一种写法*/
/*$("#divId").mouseover(function() {
$(this).html("鼠标进入");
}).mouseout(function() {
$(this).html("鼠标离开");
})*/

/**第二种写法*/
$("#divId").hover(function() {
$(this).html("鼠标进入");
}, function() {
$(this).html("鼠标离开");
})


var i = 0;
$("#bId").click(function() {
i++;
if(i % 2 == 0) {
alert("222");
} else {
alert("111");
}
})

/*$("#bId").toggle(function() { //浏览器有可能会不兼容
alert("111");
}, function() {
alert("222")
})*/
})
</script>
</head>

<body>
<input type="button" id="bId" value="点击查看" /><br>
<div id="divId" style="border:1px solid red;height:100px;width:100px">事件切换</div>
</body>

</html>


  
文档来源:51CTO技术博客https://blog.51cto.com/u_15294985/2999292
页: [1]
查看完整版本: 前端基础 - JQuery事件切换(原来还有这种写法)