bind()是jQuery中的内置方法, 用于为所选元素附加一个或多个事件处理程序, 并且此方法指定事件发生时要运行的函数。
语法如下:
$(selector).bind(event, data, function);
参数:它接受下面指定的三个参数-
- 事件:这是事件类型, 将传递给所选元素。
- 数据:这是可以在所选元素上显示的数据。
- 功能:这是由所选元素执行的功能。
jQuery代码显示bind()方法的工作方式:
代码1:
在下面的代码中, 使用此方法将" click"事件附加到给定的段落中。
<
html >
<
head >
<
script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js">
<
/ script >
<
script >
$(document).ready(function() {
$("p").bind("click", function() {
alert("Given paragraph was clicked.");
});
});
<
/ script >
<
style >
p {
display: block;
padding: 50px;
width: 280px;
border: 2px solid green;
}
<
/ style >
<
/ head >
<
body >
<
p >
Click me!<
/ p >
<
/ body >
<
/ html >
输出如下:
在点击"点击我"框之前,
文章图片
点击"点击我"框后,
文章图片
代码2:
在下面的代码中, 添加了相同的" click"事件, 但是这次数据也传递给了该方法。
<
html >
<
head >
<
script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js">
<
/ script >
<
script >
function handlerName(e) {
alert(e.data.msg);
}
<
!--Here data is passing along with a function in
bind method-->
$(document).ready(function() {
$("p").bind("click", {
msg: "You just clicked the paragraph!"
}, handlerName)
});
<
/ script >
<
style >
p {
display: block;
padding: 50px;
width: 280px;
border: 2px solid green;
}
<
/ style >
<
/ head >
<
body >
<
!--A pop will appear after clicking on this paragraph-->
<
p >
Click me!<
/ p >
<
/ body >
<
/ html >
输出如下:
在点击"点击我"框之前,
文章图片
【jQuery如何使用bind()方法(代码示例)】点击"点击我"框后,
文章图片
推荐阅读
- C/C++中的函数如何使用(通俗解释和代码示例)
- 移除最小数量的元素,使两个数组中不存在公共元素
- 苏格兰皇家银行面试经验(校园)
- win10正式版安装最新推荐
- 本图文详细教程教你如何安装windows10的镜像
- win10官网安装最新推荐
- 本图文详细教程教你win10安装win7
- 本图文详细教程教你win10激活
- 本图文详细教程教你win10 iso