Home > Article > Web Front-end > What does bind mean in jquery
What does bind mean in jquery
- 青灯夜游Original
- 2022-05-17 17:32:012148browse
In jquery, bind means "binding", which is used to bind events to specified elements and set the processing function to run when the event occurs; syntax "element object.bind(event,data,function)" ", the parameter event specifies the event that needs to be bound to the element. It can have multiple values, but they need to be separated by spaces.
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
In jquery, bind means "binding" , which is used to bind events to specified elements and set one or more event handling functions.
The bind() method adds one or more event handlers to the selected element, as well as a function that runs when the event occurs.
Syntax for binding events and functions to elements:
$(selector).bind(event,data,function)
| Parameters | Description |
|---|---|
| event |
Required. Specifies one or more events to be added to the element. Separate multiple events by spaces. Must be a valid event. |
| data | Optional. Specifies additional data to be passed to the function. |
| function | Required. Specifies a function to run when an event occurs. |
Example 1: Bind the click event and set the handler function
The effect achieved: When the mouse is clicked, hide or Display p element
<!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>
##Example 2: Bind multiple events
<!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>
jQuery video tutorial, web front-end video]
The above is the detailed content of What does bind mean in jquery. For more information, please follow other related articles on the PHP Chinese website!