22.jquery的事件

最新推荐文章于 2025-09-06 08:01:57 发布

weixin_30797027

最新推荐文章于 2025-09-06 08:01:57 发布

阅读量76

点赞数

CC 4.0 BY-SA版权

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/syj1993/p/8463144.html

本文介绍使用JQuery进行事件绑定的方法，包括按钮点击事件及表格行鼠标悬停事件的处理。通过示例展示了如何利用$.bind()方法绑定多个事件，并实现事件解除绑定的功能。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jquery绑定事件</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(function(){
		//比较原始的绑定事件的方式
		/* $("input[type=button]").click(function(){
			alert("aaa");
		}); */
		
		//给按钮绑定事件(可以绑定多个事件)
		$("input[type='button']").bind("click dbclick",function(){
			//接触绑定(第一次还是会执行)
			$(this).unbind("click");
			alert("cccc")
		});
		
		
		$("table tr").mouseover(function(){
			//移入到某一行
			$(this).css("background-color","yellow");
		});
		
		$("table tr").mouseout(function(){
			//移入到某一行
			$(this).css("background-color","white");
		});
	})
	
	function run1(){
		alert("bbbb");
	}
	
</script>
</head>
<body>

<input type="button" value="点击"/>
<hr/>

<select onchange="run1()">
	<option>北京</option>
	<option>上海</option>
	<option>广州</option>
</select>

<hr/>

<table border="1px" cellpadding="10">
	<tr>
		<td>1</td>
		<td>谢霆锋</td>
		<td>爱王菲</td>
	</tr>
	
	<tr>
		<td>2</td>
		<td>王菲</td>
		<td>爱李亚鹏</td>
	</tr>
	
	<tr>
		<td>3</td>
		<td>李亚鹏</td>
		<td>爱瞿颖</td>
	</tr>
</table>
</body>
</html>

转载于:https://www.cnblogs.com/syj1993/p/8463144.html