开发者学堂课程【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>
效果截图：
点击按钮就会弹出窗口。
