table of Contents
One, bind() method
bind(type,[data],fn): Bind the corresponding event processing function for the specific event of each matched element. The meaning of each parameter is as follows:
1. type represents the event type, and multiple event types are separated by spaces;
2. data Indicates the additional data object passed to the binding function, and the function uses event.data to receive (understand);
3. fn represents the bound function;
example:
Different event types are bound to different event functions, as shown in the following example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script type="text/javascript" src="jquery-1.8.3.js" ></script>
</head>
<body>
<div style="border: 1px solid red;">郑州大学</div>
<script>
var obj ={
name:"",
doHomework:function(){
},
};
obj ={
mouseover:function(){
this.style.backgroundColor="red";
},
mouseout:function(){
this.style.backgroundColor="blue";
}
};
$("div").bind(obj);
</script>
</body>
</html>
The result shows: When the
mouse is not hovering:
When hovering:
Move the mouse away after hovering:
Two, hover() method
hover([over,]out): over represents the function triggered by moving the mouse over the element; out represents the function triggered by moving the mouse out of the element.
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script type="text/javascript" src="jquery-1.8.3.js" ></script>
</head>
<body>
<div style="border: 1px solid red;">郑州大学</div>
<script>
//$("form").trigger("submit");
$("div").hover(function(){
this.style.backgroundColor="red";
},
function(){
this.style.backgroundColor="blue";
});
</script>
</body>
</html>
The result shows: When the
mouse is not hovering:
When hovering:
Move the mouse away after hovering:
Three, change () method
change([[data],fn]): The change event is triggered when the value of the text box, password box and text field changes or when the drop-down list options change;
code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script type="text/javascript" src="jquery-1.8.3.js" ></script>
</head>
<body>
<div style="border: 1px solid red;">郑州大学</div>
<select id="province">
<option value="">---请选择---</option>
<option value="001">北京市</option>
<option value="002">湖南省</option>
<option value="003">河南省</option>
</select>
<script>
$("select").change(function(){
console.log(this);
/*var array = this.options;
for(var i=0;i<array.length;i++){
console.log(array[i]);
if(option.selected){
console.log(option.value);
}
}*/
console.log($(this).val());
});
</script>
</body>
</html>
Choose Beijing
Result display
Four, keydown() method
keydown([[data],fn]): trigger the keydown event when the keyboard or button is pressed.
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.8.3.js" ></script>
</head>
<body>
<form action="https://baidu.com/s">
<input type="button" value="百度" />//此时的按钮不能直接提交，要将button改为submit即可
<input name="wd" />
</form>
<script>
$(window).keydown(function(e){
if(e.keyCode==13){
$("form").trigger("submit");//摁下回车键执行
//$("form").submit();
}
});
</script>
</body>
</html>
Result display:
Press Enter to execute