📅 最后修改于: 2023-12-03 14:43:14.985000 🧑 作者: Mango
jQuery中的change()方法用于监测并响应HTML元素的值的变化。当HTML元素的值发生改变时，会触发此事件。该方法通常用于表单数据的验证和提交前的处理。本文将为您介绍change()的语法、用法以及示例。
$(selector).change(function)
此处，selector是HTML元素的选择器，function是当元素值发生变化时执行的代码。
下面是一个示范change()函数的HTML代码段：
<html>
<head>
<title>change()函数示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("input").change(function(){
alert("文本框被修改了。");
});
});
</script>
</head>
<body>
<form>
<label for="name">名字：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"><br><br>
<label for="phone">电话：</label>
<input type="text" id="phone" name="phone"><br><br>
</form>
</body>
</html>
在上面的代码中，当文本框的值发生变化时，会弹出一个提示框。
下面是一个进一步的例子，用于展示change()的用法：
<html>
<head>
<title>change()函数示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("input").change(function(){
var name = $('#name').val();
var email = $('#email').val();
var phone = $('#phone').val();
if(name == "" || email == "" || phone == ""){
alert("所有字段都必须填写！");
}
});
});
</script>
</head>
<body>
<form>
<label for="name">名字：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"><br><br>
<label for="phone">电话：</label>
<input type="text" id="phone" name="phone"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
在上面的代码中，会检查表单的输入是否为空。如果任何一个字段为空，就会弹出一个提示框指出所有字段都必须填写。
以上就是jQuery中change()方法的介绍和示例。