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>