<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单事件</title> <style> .me{ position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -75; 400px; height: 100px; background-color: #ccc; overflow: auto; padding: 10px; } input[type='text'], select{ 200px;} #tips{color: red;} .focusin{ background-color: lightgreen; font-weight: bold; } </style> <script src="js/jquery.js"></script> <script type="text/javascript"> //页面加载完成简写形式 $(function(){ //输入框获得焦点 改变其背景色和字体 $("input[name='name']").on("focus",function(){ $(this).addClass("focusin"); }); //失去焦点时候 还原背景色和字体-删除添加的CSS类 $("input[name='name']").on("blur",function(){ $(this).removeClass("focusin"); }); //文本改变时显示在页面上 $("input[name='name']").on("change",function(){ $("#tips").text("姓名:"+$(this).val()); }); //性别选择改变时显示在页面上 $("select[name='sex']").on("change",function(){ $("#tips").text("性别:"+$(this).val()); }); //表单提交前检查 $("form").on("submit",function(){ var name = $("input[name='name']").val(); var sex = $("select[name='sex']").val(); if(name!=""&&sex!="请选择") { return true; } else { alert("表单验证不通过!"); return false; } }); }) </script> </head> <body> <div class="me"> 表单测试事件 <div id="tips">这里显示提示信息</div> <form action="#" method="post"> 姓名:<input type="text" name="name" /><br> 性别:<select name="sex"> <option selected="selected">请选择</option> <option>男</option> <option>女</option> </select> <input type="submit" value="提交表单" /> </form> </div> </body> </html>