版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_20042935/article/details/88696269
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>