什么是事件?
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
常见 DOM 事件
click() // 鼠标单击
dblclick() //当双击元素时,会发生 dblclick 事件。
change() // 元素改变
mouseover() // 鼠标进入(进入子元素也触发)
mouseout() // 鼠标离开(离开子元素也触发)
mouseenter() // 鼠标进入(进入子元素不触发)
mouseleave() // 鼠标离开(离开子元素不触发)
hover() // hover()方法用于模拟光标悬停事件。
ready() // DOM加载完成
resize() // 浏览器窗口的大小发生改变
scroll() // 滚动条的位置发生变化
submit() // 用户递交表单
focus() //当元素获得焦点时,发生 focus 事件。
blur() //当元素失去焦点时,发生 blur 事件。
jQuery 事件方法语法
举例点击事件触发:
$("p").click(function(){
// 动作触发后执行的代码!!
});
举例:
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中,当点击事件在某个 <p>
元素上触发时,隐藏当前的 <p>
元素:
$("p").click(function(){
// 内部的this指的是原生对象
// 使用jquery对象用 $(this)
$(this).hide();
});
jquery链式调用:
jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写
$(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp();
hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
);
举例说明:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</div>
</form>
<script type="text/javascript">
$("li").click(function(){
$(this).siblings().css("color","red");
})
</script>
</body>
</html>