JQuery时间绑定和切换（五）

最新推荐文章于 2020-09-08 09:38:10 发布

pziwang

最新推荐文章于 2020-09-08 09:38:10 发布

阅读量628

点赞数

CC 4.0 BY-SA版权

分类专栏： # 1.jquery

本文链接：https://blog.youkuaiyun.com/u014736082/article/details/91358253

1.jquery 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了JQuery中的事件绑定方法，包括标准绑定、on/off事件绑定及解除，以及事件切换toggle方法的使用。从基本的click、mouseover、mouseout事件到更高级的事件切换，提供了丰富的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery事件绑定和切换（五）

一、jquery标准的绑定方法

jq对象.事件方法（回调函数）

<script>
	$(function(){
		$("#name").click(function(){
			//点击回调函数逻辑。
		});
		
		$("#name").mouseover(function(){
			//鼠标经过回调函数逻辑。
		}).mouseout(function(){//可以使用链式编程
			//鼠标离开回调函数逻辑。
		});
	});
	
	$("#name").focus();//让文本框获得焦点，不指定回调函数
	$("#myform").submit();//提交表单
</script>

二、on绑定事件/off解除绑定

jq对象.on(“事件名称”，回调函数)

jq对象.off(“事件名称”)

<script>
	$(function(){
		$("#btn").on("click",function(){
            //绑定事件
        }）;	
        
        $("#btn").off("click"）;	//解除事件，如果不传递任何参数，则意味着解绑所有事件
	}
</script>

三、事件切换：toggle

jq对象.toggle(fn1,fn2…),当单击jq对象对应的组件后，会执行fn1，第二次执行fn2…,依次循环执行

1.9版本之后，此方法被移除，如果在高版本中使用的话，可以使用插件jquery-migrate-1.0.0.js实现

<script>
	$(function(){
		$("#btn").toggle(function(){
            $("mydiv").css("backgroudColor","green");
        },function(){
            $("mydiv").css("backgroudColor","pink");
        }）;	
        
        $("#btn").off("click"）;	//解除事件，如果不传递任何参数，则意味着解绑所有事件
	}
</script>