前端基础 - 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]