jQuery学习- 表单事件 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单事件</title>
        <style>
        .me{ 
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -75;
            width: 400px;
            height: 100px;
            background-color: #ccc;
            overflow: auto;
            padding: 10px;
            
        }
        input[type='text'], select{width: 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>

 

posted @ 2016-11-17 10:14  whzym111  阅读(199)  评论(0)    收藏  举报