jQuery事件
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。
jQuery事件格式
jQuery事件的触发方式千篇一律,可总结为以下:
$("选择器").要触发的事件名称(function(){
$("某元素").对当前元素实现效果所用的方法(); //触发的事件所要表现的效果
...
...
});
完整示例代码:(示例代码为 在单击按钮时段落“hello jQuery!”隐藏,再次点击,则显示;)
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").mousedown(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>hello jQuery!</p>
<button>切换</button>
</body>
</html>
常用的事件方法
1.ready() 方法
当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。
由于该事件在文档就绪后发生,因此常常把把所有其他的 jQuery 事件和函数置于该事件中。
2.focus() 方法和 blur() 方法
前者为 当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
后者为 当元素失去焦点时发生 blur 事件。
3.click()方法和dblclick()方法
当点击元素时,会发生 click 事件。
当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click;
当双击元素时,会发生 dblclick 事件。
4.mouseenter()方法和mouseleave()方法
前者为 当鼠标指针穿过元素时,会发生 mouseenter 事件。
后者为 当鼠标指针离开元素时,会发生 mouseleave 事件。
5.mouseover()方法和mouseout()方法
当鼠标指针位于元素上方时,发生 mouseover 事件。
当鼠标指针从元素上移开时,发生 mouseout 事件。
注:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
6.submit() 方法
当提交表单时,会发生 submit 事件。
该事件只适用于表单元素。