5.jQuery事件

最新推荐文章于 2024-07-10 21:37:49 发布

「已注销」

最新推荐文章于 2024-07-10 21:37:49 发布

阅读量544

点赞数

分类专栏： jQuery 文章标签： java mysql jquery

本文链接：https://blog.csdn.net/qq_67192586/article/details/123961208

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

案例:多个div鼠标移入移出变色

方式一

<style>
		div{
			border:1px black solid;
			font-size:15px;
			height:160px;
			width:160px;
			padding-top:140px;
			padding-left:140px;
		}
		.over{
			background-color:yellowgreen;
			font-size:30px;
		}
		.out{
			background-color:white;
			font-size:15px;
		}
	</style>
<script type="text/javascript">
		$(function(){ //页面加载
			$("div").mouseover(function(){
				$(this).removeClass("out").addClass("over");
			});
			$("div").mouseout(function(){
				$(this).removeClass("over").addClass("out");
			});
		});
	</script>
  </head>
  <body>
		<div id="mydiv01">点我</div>
		<div id="mydiv02">点我</div>
		<div id="mydiv03">点我</div>
  </body>
</html>

方式二

<script type="text/javascript">
		$(function(){ //页面加载
			$("div").bind("mouseover",function(){
				$(this).removeClass("out").addClass("over");
			});
			$("div").bind("mouseout",function(){
				$(this).removeClass("over").addClass("out");
			});
		});
	</script>

问题:

1.调用事件的方法 2.bind()绑定事件都不能对新添加的元素起作用

live():对新增的元素也起作用

<style>
		div{
			border:1px black solid;
			font-size:15px;
			height:160px;
			width:160px;
			padding-top:140px;
			padding-left:140px;
		}
		.over{
			background-color:yellowgreen;
			font-size:30px;
		}
		.out{
			background-color:white;
			font-size:15px;
		}
	</style>
	<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$(function(){ //页面加载
			$("div").live("mouseover",function(){
				$(this).removeClass("out").addClass("over");
			});
			$("div").live("mouseout",function(){
				$(this).removeClass("over").addClass("out");
			});
			
			$("#btn01").click(function(){
				// 创建一个div
				var newDiv = $("<div>nihao</div>");
				// 新的div要放入页面中
				$("div:last").after(newDiv);
			});
		});
	</script>
  </head>
  <body>
		<div id="mydiv01">点我</div>
		<div id="mydiv02">点我</div>
		<input type="button" id="btn01" value="增加一个div" />
  </body>
</html>