jQuery事件绑定方式

最新推荐文章于 2022-08-08 15:43:14 发布

酒话�

最新推荐文章于 2022-08-08 15:43:14 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/x_j_k_jysg/article/details/107448022

版权

bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数，各参数含义如下：

type表示事件类型，多个事件类型使用空格分隔；

data表示传递给绑定函数的额外数据对象，函数中使用event.data接收；

fn表示绑定的函数；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>bind(type,[data],fn)</title>
		<script src="js/jquery-3.3.1.js"></script>
		<script>
			$(function() {
				$(window).bind('keydown', function(event) {
					var key = event.which;
					if(key == 13) {
						console.log("Enter键");
					}
				});
			});
		</script>
	</head>
	<body>
	</body>
</html>

不同事件类型绑定不同事件函数，如下例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>bind(type,[data],fn)</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<span>白日依山尽，黄河入海流。</span>
		<script>
			$("span").bind({
				mouseover: function() {
					$("span").css("color", "red");
				},
				mouseout: function() {
					$("span").css("color", "blue");
				}
			});
		</script>
	</body>
</html>

unbind(type,[data|fn]])：删除每个匹配的元素上已绑定的事件，如果没有参数，则删除该元素上绑定的所有事件，例子如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>unbind(type,[data|fn]])</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<span>白日依山尽，黄河入海流。</span>
		<script>
			$("span").bind({
				mouseover: function() {
					$("span").css("color", "red");
				},
				mouseout: function() {
					$("span").css("color", "blue");
				}
			});
			
			$("span").unbind("mouseover mouseout");
		</script>
	</body>
</html>

one(type,[data],fn)：该方法可以为元素绑定处理函数，当处理函数触发一次后, 立即被删除，即在每个对象上, 事件处理函数只会被执行一次：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>one(type,[data],fn)</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<input type="button" value="按钮"/>
		<script>
			$("[value='按钮']").one("click", function(){
			  	console.log("仅执行一次");
			});
		</script>
	</body>
</html>

trigger(type,[data])：触发每一个匹配元素上某类事件，type表示一个或多个事件类型， data表示传入函数的数据，例子如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>trigger(type,[data])</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<form id="search" action="https://www.baidu.com/s">
			<input type="hidden" name="wd" value="中国"/>
		</form>
		<script>
			$("#search").trigger("submit");
		</script>
	</body>
</html>

事件切换hover([over,]out)：over表示鼠标移到元素上触发的函数；out表示鼠标移出元素触发的函数，如下例子：

代码1：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>hover([over,]out)</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<span>白日依山尽，黄河入海流。</span>
		<script>
			$("span").hover(function() {
				$(this).css("color", "red");
			}, function() {
				$(this).css("color", "blue");
			});
		</script>
	</body>
</html>

代码2：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>表格</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<style type="text/css">
			body{
				font-size: 12px;
			}

			table {
				margin: 0 auto;
				width:90%;
				border-collapse: collapse;
			}

			td,th {
				padding:10px;
				border: 1px solid #c0de98;
			}
			
			thead tr{
				background-color: #8EB4E3;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>出生日期</th>
					<th>身份证号</th>
					<th>地址</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>宋涛</td>
					<td>1990.04.23</td>
					<td>411081199004235955</td>
					<td>河南省郑州市高新区金色家园1栋2单元512号</td>
				</tr>
				<tr>
					<td>2</td>
					<td>李倩倩</td>
					<td>1994.09.29</td>
					<td>450423199409290420</td>
					<td>广西壮族自治区梧州市长洲区梧桐新苑6栋1单元112号</td>
				</tr>
			</tbody>
		</table>
		
		<script>
			$("tbody tr:even").css("background-color","#ffffff");//设置表格偶数行背景色,注意：从0开始
			$("tbody tr:odd").css("background-color","#f7f7f7");//设置表格奇数行背景色
			$("tbody>tr").hover(function(){
				$(this).css("background-color","#eafcd5");
			},function(){
				$("tbody tr:even").css("background-color","#ffffff");
				$("tbody tr:odd").css("background-color","#f7f7f7");
			})
		</script>
	</body>
</html>

jQuery中定义了很多事件，其常用事件如下：

1、change([[data],fn]) ：文本框、密码框和文本域的值发生改变时或下拉列表选项发生变化时触发change 事件；

2、click([[data],fn]) ：鼠标点击匹配元素时触发click事件，例子如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>click([[data],fn])</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<form id="search" action="https://www.baidu.com/s">
			<input type="hidden" name="wd" value="中国"/>
			<input type="button" id="search_btn" value="百度一下" />
		</form>
		<script>
			$("#search_btn").click(function(){
				$("#search").submit();
			})
		</script>
	</body>
</html>

3、keydown([[data],fn]) ：当键盘或按钮被按下时触发keydown事件，例子如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>click([[data],fn])</title>
		<script src="js/jquery-3.3.1.js"></script>
		<script>
			$(window).keydown(function(event) {
				if(event.keyCode == 13) {
					console.log("Enter键");
				}
			});
		</script>
	</head>
	<body>
	</body>
</html>

4、mouseout([[data],fn]) ：鼠标从元素上移开时触发mouseout 事件；

5、mouseover([[data],fn])：鼠标位于元素上方时触发mouseover 事件；

6、submit([[data],fn])：提交表单时触发submit 事件，该事件只适用于表单元素：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>submit([[data],fn])</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<form id="search" action="https://www.baidu.com/s">
			<input type="hidden" name="wd" value="中国"/>
		</form>
		<script>
			$("#search").submit();
		</script>
	</body>
</html>

酒话�

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件绑定方式

bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数，各参数含义如下：type表示事件类型，多个事件类型使用空格分隔；data表示传递给绑定函数的额外数据对象，函数中使用event.data接收；fn表示绑定的函数；<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>bind(type,[data],fn)<
复制链接

扫一扫