html事件

最新推荐文章于 2024-10-10 06:11:45 发布

原创最新推荐文章于 2024-10-10 06:11:45 发布 · 204 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用jQuery进行元素操作及事件绑定的具体案例，包括页面加载完成后的事件监听、图片的显示与隐藏切换、表格行背景颜色的动态改变等交互效果实现。

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<!--
	页面载入事件
	hover（）方法切换
	鼠标移入和鼠标移出事件
	mouseover/mouseout,mouseleave

	toggle() 切换
	控制显示和隐藏的
	show()/hide()

	页面就绪，页面加载完毕事件 $.ready(callback)
	另外一种形式$(callback);

	绑定事件bind（）
	解绑事件unbind();

	-->
	<script type="text/javascript">
	/*$.ready(function() {

	$("#toggle").click(function() {

	$("#img0").toggle(1000);

	});

	});*/
	$(function(){
	$("#toggle").click(function() {

	$("#img0").toggle(1000);

	});
	});
	</script>
	</head>

	<body>
	<table border="1px">
	<tr>
	<td>Data</td>
	<td>Data</td>
	<td>Data</td>
	<td>Data</td>
	</tr>
	<tr>
	<td>Data</td>
	<td>Data</td>
	<td>Data</td>
	<td>Data</td>
	</tr>
	<tr>
	<td>Data</td>
	<td>Data</td>
	<td>Data</td>
	<td>Data</td>
	</tr>
	<tr>
	<td>Data</td>
	<td>Data</td>
	<td>Data</td>
	<td>Data</td>
	</tr>
	<tr>
	<td>Data</td>
	<td>Data</td>
	<td>Data</td>
	<td>Data</td>
	</tr>
	<tr>
	<td>Data</td>
	<td>Data</td>
	<td>Data</td>
	<td>Data</td>
	</tr>
	</table>
	<img src="img/a1.jpg" style="height: 50px; width: 50px;" id="img0" /><br>
	<input type="button" id="toggle" value="toggle切换" /><br>
	<input type="button" id="bang1" value="给另外一个按钮绑定事件" />
	<input type="button" id="bang3" value="解绑另外一个按钮事件" />
	<input type="button" id="bang2" value="按钮" />
	<script type="text/javascript">
	// $("tr").hover(鼠标移入的回调方法,鼠标移出的回调方法);
	$("tr").hover(function() {
	$(this).css({
	"background": "#666"
	});
	}, function() {
	$(this).css({
	"background": "white"
	});
	});
	/*//点击事件
	$("#toggle").click(function(){

	$("#img0").toggle(1000);

	});*/


	$("#bang1").click(function(){

	$("#bang2").bind("mouseover",function(){

	alert("鼠标移入");

	});

	});

	$("#bang3").click(function(){

	$("#bang2").unbind("mouseover");

	});

	</script>

	</body>

	</html>