jQuery 常用事件

最新推荐文章于 2024-07-22 08:55:10 发布

英俊男孩

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量181

点赞数

文章标签： js javascript jquery

本文链接：https://blog.csdn.net/qq_44829011/article/details/106586153

版权

鼠标事件：

click
dblclick
mouseenter 鼠标焦点进入元素范围
mouseleave 鼠标焦点离开元素范围
hover 鼠标焦点进入/离开元素范围有两个回调函数

$('div').click(function(){
				alert('单击');
			})
$('div').dblclick(function(){
				alert('双击');
			})
/*注意 在单击双击 同时设定的情况下 单击触发的是单击事件 双击触发的也是单击事件*/

/*效果是 鼠标焦点进入元素范围p颜色变红*/
			$('p').mouseenter(function(){
				$(this).css('background-color','red');
			})
/*效果是 鼠标焦点离开元素范围p颜色变绿色*/
			$('p').mouseleave(function(){
				$(this).css('background-color','green');
			})
/*效果是 鼠标焦点进入元素范围p颜色变红  鼠标焦点离开元素范围p颜色变绿色*/
/*与上面两个事件效果等效*/
			$('p').hover(function(){
				$(this).css('background-color','red');
			},function(){
				$(this).css('background-color','green');
			});

键盘事件

kegdown 键被按下的过程
keypress 键被按下
keyup 键被松开

 $("input").keypress(function(){
  			console.log('keypress');
  		});
  		  $("input").keyup(function(){
  			console.log('keyleave');
  		});
  		$("input").keydown(function(){
  			console.log('keydown');
  		});

执行结果
在这里插入图片描述
表单事件

submit 表单提交
change 表单文本修改
focus 鼠标获取表单输入框焦点
blur 鼠标失去表单输入框焦点

/*submit 表单提交*/
	$(function(){
	$("form").submit(function(){
    	alert("提交");
  });
})
	<body>
		<form action="">
First name: 
<input type="text" name="FirstName" value="Mickey"><br>
Last name: 
<input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form> 
	</body>

文档/窗口事件

load 数据加载完成
resize 用户改变浏览器窗口大小
scroll 滚动条滚动
unload 加载失败

英俊男孩

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 常用事件

鼠标事件：clickdblclickmouseenter 鼠标焦点进入元素范围mouseleave 鼠标焦点离开元素范围hover 鼠标焦点进入/离开元素范围有两个回调函数$('div').click(function(){ alert('单击'); })$('div').dblclick(function(){ alert('双击'); })/*注意在单击双击同时设定的情况下单击触发的是单击事件双击触发的也是单击事件*//
复制链接

扫一扫