jquery事件
jquery事件方法语法
在jquery当中，大多数DOM事件都有一个等效的jquery方法。
页面当中指定一个点击事件：
$("p").click();
1
下一步是定义什么时间触发事件。可以通过一个事件函数实现：
$("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事件的时候运行的函数:
<!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>
---------------------
作者：天然海绵
来源：CSDN
原文：https://blog.csdn.net/weixin_41748874/article/details/80841769
版权声明：本文为博主原创文章，转载请附上博文链接！
