Jquery中表单事件
2016-04-30 21:35
435 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .focusin { background-color: green; font-weight: bold; } </style> <script src="js/jquery-1.12.1.js"></script> <script> $(function() { //获得焦点触发 $("input[name='name']").on("focus", function() { $(this).addClass("focusin"); }); //失去焦点触发 $("input[name='name']").on("blur", function() { $(this).removeClass("focusin"); }); //失去焦点并且内容发生变化时触发 $("input[name='name']").on("change", function() { $("#show").text($(this).val()); }); //表单验证 $("form").on("submit", function() { var name=$("input[name='name']").val(); var sex = $("select[name='sex']").val(); if ((name == "") || (sex == "请选择性别")) { alert("检查表单"); return false; } else { return true; } }); }) </script> </head> <body> <div id="show">显示信息</div> <form action="#"> name: <input name="name" type="text"> <br /> sex: <select name="sex"> <option selected="selected"> 请选择性别 </option> <option>男</option> <option>女</option> </select> <input type="submit" value="提交"> </form> </body> </html>
相关文章推荐
- Jquery之键盘输入数字转换大写
- jquery操作DOM元素的复习
- jQuery基础学习(一)—jQuery初识
- jQuery弹出美女大图片
- SweetAlert – 替代 Alert 的漂亮的提示效果
- jQuery的ajax方法小解
- jquery属性操作
- jquery属性操作
- jquery的动画总结
- Jquery中事件的绑定和解除
- jQuery中this与$(this)的区别
- Swiper – 经典的移动触摸滑块插件(免费)
- Jquery学习知识点
- jquery 应用小结
- jquery 时间段
- HTML5中类jQuery选择器querySelector的使用
- jQuery 实现Ajax
- Jquery之访问元素内容
- JQuery EasyUI datagrid 复杂表头处理
- Jquery之获取和设置元素内容