JQuery5 事件绑定

事件绑定

　　1  jquery标准的绑定方式

　　　　jq对象.事件方法(回调函数);

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    
    $(function(){
        //获取name对象，绑定click事件
        /*$("#name").click(function(){
            alert("我被点击了");
            
        });*/
        
        /*$("#name").mouseover(function(){
            alert("鸡汤来喽");
        });
        
        $("#name").mouseout(function(){
            alert("我不打扰，我走了哈");
        });*/
        
        //简化操作，链式编程
        /*$("#name").mouseover(function(){
            alert("鸡汤来喽");
        }).mouseout(function(){
            alert("我不打扰，我走了哈");
        });/*/
        
        $("#name").focus();//让文本输入框获得焦点
        //表单对象.submit()  让表单提交
    });
    
</script>
</head>
<body>
<input type="text" id="name" value="绑定点击事件">
</body>
</html>

 

 

 

　　2  on绑定事件/off接触绑定

　　　　jq对象.on("事件名称",回调函数)

　　　　jq对象.off("事件名称")

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function(){
        //1  使用on给按钮绑定单击事件
        $("#btn").on("click",function(){
            alert("我被点击了");
            
        });
        
        //2  使用off解除btn的单击事件
        $("#btn2").on("click",function(){
            //解除btn的单击事件
            $("#btn").off("click");
            //如果off不传参数，就解除所有事件
        });
    });
    
    
</script>
</head>
<body>
<input type="button" id="btn" value="绑定点击事件">
<input type="button" id="btn2" value="解绑点击事件">
</body>
</html>

 

　　3  事件切换：toggle

　　　　1  jq对象.toggle(fn1,fn2...)

　　　　　　当单机jq对象对应的组件后，会执行fn1，第二次会执行fn2....

　　　　　　注意：1.9版本  .toggle()方法删除。用Jquery Migrate插件可以恢复此功能

　　　　

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script src="js/jquery-migrate-1.0.0.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function(){
    $("#btn").toggle(function(){
        //改变div的背景色backgroundColor为绿色
        $("#mydiv").css("backgroundColor","green");
    },function(){
        //改变div的背景色backgroundColor为粉色
        $("#mydiv").css("backgroundColor","pink");
    });
    });
    
    
</script>
</head>
<body>
<input type="button" id="btn" value="事件切换">
<div id="mydiv" style="width:300px;height:300px;background:pink">
点击按钮变成绿色，再次点击红色
</div>

</body>
</html>

 

　　　　

posted @ 2022-03-17 15:04  Cuora  阅读(33)  评论(0)    收藏  举报