开发者学堂课程【jQuery 开发教程：jQuery_表单事件】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4290
jQuery_表单事件
一、概要
1、 focus() ：
获得焦点事件，适用于所有元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
// 引入 jQuery
<script src="jquery-2.2.1.min.js"></script>
</head>
<body>
<form>
// 创建两个输入框
<input id="target" type="text" value="field 1">
<input type="text" value="field 2">
</form>
<script>
$(function(){
$("#target").focus(function(){
alert("获得焦点");
})
})
</script>
</body>
</html>
效果截图：
此时第二个获得焦点，点击第一个就会弹出获得焦点窗口。
2、 blur() ：
失去焦点事件，适用于所有元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-2.2.1.min.js"></script>
</head>
<body>
<form>
<input id="target" type="text" value="field 1">
<input type="text" value="field 2">
</form>
<script>
$(function(){
$("#target").blur(function(){
alert("失去焦点");
})
})
</script>
</body>
</html>
效果截图：
选中第一个获得焦点，点击第二个就会弹出失去焦点窗口。
3、 change() ：
改变元素值会触发，仅限于 input 、 textarea 、 select 三个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
// 引用 jQuery
<script src="jquery-2.2.1.min.js"></script>
</head>
<body>
<form>
<input id="target" type="text" value="field 1">
<input type="text" value="field 2">
</form>
<script>
$(function(){
$("#target").change(function(){
alert("内容改变啦");
})
//只适用于 input textarea select
})
</script>
</body>
</html>
效果截图：
改变第一个内容，就会弹出窗口。
4、 select() ：
当用户在一个元素中进行文本选择时则会触发，仅限于 input 、 type=”text” 、 textarea 三个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
// 引用 jQuery
<script src="jquery-2.2.1.min.js"></script>
</head>
<body>
<form>
<input id="target" type="text" value="field 1">
<input type="text" value="field 2">
</form>
<script>
$(function(){
$("#target").select(function(){
alert("xuanzhong");
})
// input type="text" select
})
</script>
</body>
</html>
效果截图：
只要选中里面的内容就会弹出窗口。
5、 submit() ：
当用户试图提交表单时会被触发，只能绑定到 form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-2.2.1.min.js"></script>
</head>
<body>
<form id="target">
<input type="submit" value="go">
</form>
<script>
$(function(){
$("#target").submit(function(){
alert("确定提交吗");
})
})
// form
</script>
</body>
</html>
效果截图：
点击按钮就会弹出窗口。