jquery的event

王飞英
2023-12-01
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery3.6.0.js"></script>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<script>
			// // mouseover
			// // jquery支持链式操作
			// $('li').on('mouseover',function(){
			// 	$(this).css('background',"red");
			// }).on('mouseout',function(){
			// 	$(this).css('background',"green");
			// })
			// // 事件解绑
			// // 第一个参数是事件名称
			// // 第二个参数是callback name
			// $("li:eq(3)").off("mouseout");
			
			// // 添加新元素给ul
			// $("<li>newLi</li>").appendTo("ul")
			
			// 使用事件代理
			$("ul").on('mouseover',"li:event",function(){
				$(this).css('background',"red");
			}).on('mouseout',"li:event",function(){
				$(this).css('background',"green");
			})
			$("<li>newLi</li>").appendTo("ul")
		</script>
	</body>
</html>

 类似资料: