jQuery 事件

最新推荐文章于 2023-01-07 11:07:03 发布

原创最新推荐文章于 2023-01-07 11:07:03 发布 · 228 阅读

1 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

5 篇文章

订阅专栏

jQuery 事件

1.常见的DOM事件

鼠标事件	键盘事件	表单事件	窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

2.jQuery事件方法的语法

在 jQuery 中大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件

$("p").click();

下一步定义一个事件函数来触发事件

$("p").click(function(){

//动作触发后执行的代码

});

3.常用事件方法

click()	click() 方法是当按钮点击事件被触发时会调用一个函数
dblclick()	当双击元素时，会发生 dblclick 事件
mouseenter()	当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseleave()	当鼠标指针离开元素时，会发生 mouseenter 事件。
mousedown()	当鼠标指针移动到元素上方并按下鼠标按键时，会发生mousedown事件

focus()	当元素获得焦点时，发生focus事件
blur()	当元素失去焦点时，发生blur事件
hover()	模拟光标悬停事件在元素上时触发mouseenter；离开时触发mouseleave事件。

实例：

<script>
	$(function(){
		$("#p1").click(function(){
			$(this).hide();
		});

		$("#p2").dblclick(function(){
			$(this).hide();
		});
		/*$("#p1").mouseenter(function(){
			alert('您的鼠标移到了 id="p1" 的元素上!')
		});
		$("#p1").mouseleave(function(){
			alert('您的鼠标离开了 id="p1" 的元素上!')
		});
		$("#p1").mousedown(function(){
			alert('您的鼠标按在了 id="p1" 的元素上!')
		});*/
		$("input").focus(function(){
			$(this).css("background-color","#cccccc");
		});
		$("input").blur(function(){
			$(this).css("background-color","#ffffff");
		});
	});
</script>
<body>
	<p id="p1">点击我消失</p>
	<p id="p2">双击我消失</p>