jQuery事件--change([[data],fn])、on(events,[selector],[data],fn)和hover([over,]out)

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

change([[data],fn])

概述

当元素的值发生改变时，会发生 change 事件。

该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生

参数

fn 在每一个匹配元素的change事件中绑定的处理函数

[data],fn data:change([Data], fn) 可传入data供函数fn处理；fn:在每一个匹配元素的change事件中绑定的处理函数

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input").change(function() {
var reg = /^[a-zA-Z]+$/;
var textValue = $(this).val();
if(!reg.test(textValue)) {
$("#error").html("<h5 style='color:red'>只能输入字母！<h5>");
}
}); $("#select").change(function() {
$("#error").html($("#select option:selected").text());
});
})
</script>
</head> <body>
<div>
<span>字母：</span> <input id="input" type="text" style="width: 150px;" />
<br />
<span>语言：</span>
<select id="select" style="width: 150px;">
<option>Java</option>
<option>C#</option>
</select>
</div>
<div id="error"></div>
</body></html>

on(events,[selector],[data],fn)

概述

在选择元素上绑定一个或多个事件的事件处理函数。on()方法绑定事件处理程序到当前选定的jQuery对象中的元素

参数

events,[selector],[data],fn

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin"；
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发；
data:当一个事件被触发时要传递event.data给事件处理函数；
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false

<!DOCTYPE html>
<html> <head>
<meta charset=" utf-8">
<title></title>
<style type="text/css">
div {
width: 60px;
height: 60px;
border: 1px solid green;
font-size: 12px;
}
</style>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var newtext = "这是新文本"
$("div").on("click", {
"mytext": newtext
}, function(e) {
$(this).text(e.data.mytext);
})
})
</script>
</head> <body>
<div>原来内容</div>
</body></html>

events-map,[selector],[data]

events-map:个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数；
selector:一个选择器字符串过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发；
data:当一个事件被触发时要传递event.data给事件处理函数

<!DOCTYPE html>
<html> <head>
<meta charset=" utf-8">
<title></title>
<style type="text/css">
div {
width: 160px;
height: 160px;
border: 1px solid green;
font-size: 12px;
}
</style>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var newtext = "这是新文本"
$("div").on({
click: function(e) {
$(this).text(e.data.mytext);
}
}, {
"mytext": newtext
})
})
</script>
</head> <body>
<div>原来内容</div>
</body></html>

hover([over,]out)

概述

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数

参数

over,out over:鼠标移到元素上要触发的函数；out:鼠标移出元素要触发的函数

out 当鼠标移到元素上或移出元素时触发执行的事件函数

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#button").hover(function() {
$("div").css("background", "red");
}, function() {
$("div").css("background", "green");
})
})
</script>
</head> <body>
<div style="background-color: red;width: 120px;height: 120px;">
<button id='button'>点我测试</button>
</div>
</body></html>