bind在jquery中的概念是什么

蜗牛互联网技术资讯2022-05-181830

今天小编给大家分享一下bind在jquery中的概念是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

jquery中，bind的意思为“绑定”，用于给指定元素绑定事件，并设置事件发生时运行的处理函数；语法“元素对象.bind(event,data,function)”，参数event规定需要绑定到元素上的事件，可有多个值，但需使用空格分隔。

bind在jquery中的概念是什么 jquery 第1张

本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。

在jquery中，bind的意思为“绑定”，用于给指定元素绑定事件，并设置一个或多个事件处理函数。

bind在jquery中的概念是什么 jquery 第2张

bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

将事件和函数绑定到元素的语法：

$(selector).bind(event,data,function)

参数	描述
event	必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。

参数

描述

event

必需。规定添加到元素的一个或多个事件。

由空格分隔多个事件。必须是有效的事件。

data

可选。规定传递到函数的额外数据。

function

必需。规定当事件发生时运行的函数。

示例1：绑定点击事件，并设置处理函数

实现的效果：当点击鼠标时，隐藏或显示 p 元素

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").bind("click", function() {
					$("p").slideToggle();
				});
			});
		</script>
	</head>

	<body>
		<button>隐藏或显示 p 元素。</button>
		<p>这是一个p段落</p>
		<p>这是一个p段落</p>
	</body>
</html>

bind在jquery中的概念是什么 jquery 第3张

示例2：绑定多个事件

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function(){
		  $("p").bind("mouseover mouseout",function(){
		    $("p").toggleClass("intro");
		  });
		});
		</script>
		<style type="text/css">
			.intro {
				font-size: 150%;
				color: red;
			}
		</style>
	</head>
	<body>

		<p>将鼠标移动到该段落上。</p>

	</body>
</html>

bind在jquery中的概念是什么 jquery 第4张