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

版权声明:本文为博主原创文章,未经博主允许不得转载。 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>

猜你喜欢

转载自blog.csdn.net/qq_20042935/article/details/88696269