jQuery学习-事件绑定 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件</title>
            <script src="js/jquery.js"></script>
        <style>
        .me{ 
            
            border: 1px solid red;
            margin-top: 75px;
            width: 400px;
            height: 150px;
            background-color: #ccc;
            overflow: auto;
            
            
        }
        input{
            border: 1px solid black;
            font-size: 40px;
            width: 397px;
            height: 50px;
        }
        button{
            width: 100px;
            height: 50px;
        }
        </style>
        
        <script type="text/javascript">    
            //页面加载完成简写形式
            $(function(){
                
                //on是用于为选中元素绑定事件的函数，它有两个参数，一个事件，第二个执行的方法
                $("div").on("mouseover",function(){
                    
                    $("div").css("background-color","lightgreen")
                });
                
                    $("div").on("mouseout",function(){
                    
                    $(this).css("background-color","#ccc")
                });
                
                $("input[type='text']").on("keydown",function(){
                    
                    $(this).css("background-color","blue");
                    
                });
                $("input[type='text']").on("keyup",function(){
                    
                    $(this).css("background-color","white");
                    var v = $(this).val();
                    if(v.length==6){
                        //trigger 触发button的点击事件
                        $("button").trigger("click");
                    }
                    
                });
                
                //利用one函数 为对象绑定一次性事件 ,一次性事件：只触发一次
                $("button").one("click",function(){
                    
                    alert("数据已提交");
                    
                });
                
                //利用off()函数解除事件绑定
                $("*").off();//解绑全部事件
                $("*").off("click");//解绑单击事件
            })
        
        </script>
    </head>
    <body>
        <div class="me"  >
            事件测试案例
            <input type="text" /><br>
            <button>提交</button>
            
        </div>
    </body>
</html>

 

posted @ 2016-11-16 16:38  whzym111  阅读(187)  评论(0)    收藏  举报