jquery事件
jquery是为事件处理特别设计的。
什么是事件
页面对于不同访问者的响应叫做事件。
事件处理程序指的是当HTML当中发生某些事件时候所调用的方法。
实例:
在元素上面移动鼠标
选取单选按钮
点击元素
在事件当中经常使用术语”触发”或者”激发”,例如: “当您按下按键的时候触发keypress事件”
常见的DOM事件:
鼠标事件: click、dbclick、mouseenter、mouseleave
键盘事件:keypress、keydown、keyup
表单事件:sublit、change、focus、blur
文档/窗口事件: load、resize、scroll、unload
jquery事件方法语法
在jquery当中,大多数逇DOM事件都有一个等效的jquery方法。
页面当中指定一个点击事件:
$("p").click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现:
$("p").click(function(){
//动作触发后执行的代码
})
常见的jquery事件方法
$(document).ready()
$(document).ready()方法允许我们在文档完全加载后执行函数,该事件方法在jquery语法章节当中已经提到过了。
click()
click()方法是当按钮点击事件被触发的时候会调用的一个函数。
该函数在用户点击HTML元素的时候执行。
在下面的实例当中,当点击事件在某个<p>
元素上触发的时候,隐藏当前的<p>
元素:
$("p").click(function(){
$(this).hide();
});
dblclick()
当双击元素的时候,会发生dblclick事件。
dblclick()方法触发dblclick事件,或规定当发生dblclick事件时候运行的函数:
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
当鼠标指针穿过元素的时候,会发生mouseenter事件。
mouseenter()方法触发mouseenter事件,或者规定当发生mouseenter事件的时候运行的函数:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
});
</script>
</head>
<body>
<p id="p1">鼠标指针进入此处,会看到弹窗。</p>
</body>
</html>
mouseleave()
当鼠标指针离开元素的时候,会发生mouseleave事件。
mouseleave()方法触发mouseleave事件,或者规定当发生mouseleave事件时候运行的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("再见,您的鼠标离开了该段落。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>
mousedown()
当鼠标指针移动到元素上方的时候,并按下鼠标按键的时候,会发生mousedown事件。
mousedown()方法触发mousedown事件,或规定当发生mousedown事件的时候运行的函数:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下!");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落</p>
</body>
</html>
mouseup()
当在元素上松开鼠标按钮的时候,会发生mouseup事件。
mouseup()方法触发了mouseup事件。或者规定当发生mouseup事件的时候运行的函数:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("鼠标在段落上松开。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>
hover()
hover()方法用于模拟光标悬停的事件。
当鼠标移动到元素上的时候,会触发指定的第一个函数(mouseenter);
当鼠标移出这个元素的时候,会触发指定的第二个函数(mouseleave);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
)
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>
focus()
当元素获得焦点的时候,发生focus事件
当通过鼠标点击选中元素或者通过tab键定位到一个元素的时候,该元素就会获得焦点。
focus()方法触发了focus事件,或规定当发生focus事件时候运行的函数:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
blur()
当元素失去焦点的时候,发生blur事件。
blur()方法触发了blur事件,或者规定当发生blur事件的时候运行的函数:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>