jquery基础解析之事件

瑟瑟发抖的萌新学徒

于 2023-03-29 21:03:50 发布

阅读量139

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_56420338/article/details/129845358

版权

文章详细介绍了jQuery和JavaScript中处理DOM事件的方法，包括鼠标事件如click、mouseenter和mouseleave，键盘事件如keypress、keydown和keyup，表单事件如submit、change、focus和blur，以及文档窗口事件如load、resize和scroll。通过案例演示了如何监听和响应这些事件，以实现特定的交互效果。

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

事件

1.鼠标

click单击

dbclick双击

mouseenter移入

mouseleave移出

hover悬停

案例演示：

$(function(){
			$("#div-1").mouseenter(function(){
				$(this).css("background","aqua")
			})
					$("#div-1").mouseleave(function(){
				$(this).css("background","rgba(0,0,0,0)")
			})
			//移入时执行方法一，移出时执行方法2
			$("#div-2").hover(function(){
				
				$(this).css("background","red")
				
			},function(){
				$(this).css("background","rgba(0,0,0,0)")
			})
			
			
		})

2.键盘

keypress按下

keydown按下

keyup松开

案例演示：

	<script src="js/jquery-3.6.4.js"></script>
	<script type="text/javascript">
		/*keypress键按下的过程 
		 * 但alt ctrl shift esc等无效，可以使用keydown实现*/
		
		/*keydown执行时与keypress一致，但是可以借助参数在的which
		 属性来获取按下的按键编号，这个按键中包含所以按键例如esc，shift等等*/
		
		/*keyup当键盘按键被松开时触发效果，为了避免按键按下后不松开，相当于连续输入，
		 可能会导致按下的事件一直触发，此时可以选取松开作为触发条件*/
		var i=0;
		$(function(){
			$("input").keypress(function(){
				$("span").text(i+=1);
			})
			/*event是事件参数，包含了有关触发时间的一些属性
			 其实which就是按下键的编号*/
			$("input").keydown(function(event){
				$("#span-2").text(event.which)
			})
		})
	</script>

3.表单

submit提交

change内容改变

focus获取焦点

blur失去焦点

案例演示：

<script type="text/javascript">
		$(function(){
			/*submit会在表单提交时触发*/
		/*	$("#form-1").submit(function(){
				alert("提交了")
			})*/
			$("#form-1").submit(function(event){
				
				if(true){}else{
				//event.preventDefault()阻止表单提交
				event.preventDefault();
				alert("阻止表单提交")
				}
				
			})
			//change（）内容改变时间，当表单控件的值发生变化是触发
			//一般用于单行，多行文本框文字变化，select改变选项时
			$("#s01").change(function(){
				//val()获取表单控件的value属性
				$("#span1").text($("#s01").val())
			})
			$("#all").click(function(){
				//获取当前元素的认（prop）状态(checked)
//				var flag=$(this).prop("checked");
//				console.log(flag);
				//：checkbox选取所有的checkbox元素：gt（0）选取一组中元素大于该下标的元素
				//prop（“设置的属性”，设置的值）
//				$(":checkbox:gt(0)").prop("checked",flag)
				$(":checkbox:gt(0)").prop("checked",$(this).prop("checked"));
			})
			//实现反选									
			$("#btn-1").click(function(){
				//each()遍历，遍历中的$(this)表示循环的当前元素
			$(":checkbox:gt(0)").each(function(){
				$(this).prop("checked",!$(this).prop("checked"))
			})
			})
			//焦点：当前中的元素会获取焦点，外观上会出现黑色轮廓
			//focus获取焦点时，blur失去焦点时
			$("#text-1").focus(function(){
				$(this).css("background","pink")
			})
			$("#text-1").blur(function(){
				$(this).css("background","rgba(0,0,0,0)")
				$("#span2").text($(this).val());
			})
		})
	</script>

4.文档、窗口

load文档就绪

resize改变窗口大小

scroll窗口滚动

unload离开页面时--已废除

案例演示：

<script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		x=0
		$(function(){
			//resize浏览器窗口调整大小时
			$(window).resize(function(){
				$("span").text(x+=1)
			})
			//scroll元素滚动时
			$("div").scroll(function(){
				//滚动一像素算一次
				$("span").text(x+=1)
			})
		})
	</script>