在jQuery中，大多数DOM事件都有一个等效的jQuery方法。
如果想在页面中指定一个点击事件,语法格式如下：
$('p').click();
下一步就是点击后所触发的事件。可以通过一个函数实现
$("p").click(function(){ // 触发事件过后所执行的代码 });
下面说一下常用的事件方法
$(document).ready()
$(document).ready()方法允许在文档完全加载完毕后执行函数。
click
click()方法是当用户点击html元素是触发的方法
例如：当用户点击<p>元素时，会隐藏<p>元素;
<body> <p>1点击此处会消失1</p> <p>2点击此处会消失2</p> <p>3点击此处会消失3</p> <script src="../../jquery-3.6.0.js"></script> //引入jQuery库 <script> $(document).ready(function(){ $('p').click(function(){ //获取p标签的点击事件，当点击p元素时，会执行以下代码 $(this).hide(); //（hide：隐藏）将p元素进行隐藏 }) }) </script> </body>
当点击"点击此处p1会消失" 时会隐藏如下图：
dblcick()
顾名思义dblcick():双击元素触发事件,当鼠标双击时会发生事件
<body> <p>1双击此处我会消失</p> <p>2双击此处我会消失</p> <p>3双击此处我会消失</p> <p>4双击此处我会消失</p> <p>5双击此处我会消失</p> <script src="../../jquery-3.6.0.js"></script> <script> $('p').dblclick(function(){ //双击鼠标发生下面的事件 $(this).hide(); //将点击的p标签进行隐藏 }) </script> </body> mouseenter()
当鼠标的指针放在了这个元素时，则会发生mouseenter()事件
<body> <p id="p1">这里是p1</p> <script src="../../jquery-3.6.0.js"></script> <script> $('#p1').mouseenter(function(){ alert('您的鼠标移到了id为p1的元素上面！') }) </script> </body> mouseleave()
则与mouseenter()相反，当鼠标离开这个元素时，则会发生mouseleave()事件
<body> <p id="p1">这里是p1</p> <script src="../../jquery-3.6.0.js"></script> <script> $('#p1').mouseleave(function(){ alert('您的鼠标移已经离开id="p1"的p标签了！') }) </script> </body> mousedown() 和mouseup()
mousedown()当鼠标按下触发事件，mouseup()当鼠标松开时触发事件，可以用console.log打印到控制台查看结果。
<body> <p id="p1">这里是p1</p> <script src="../../jquery-3.6.0.js"></script> <script> $('p').mousedown(function(){ console.log('鼠标已经在该段落上按下') }) $('p').mouseup(function(){ console.log('鼠标在段落上松开'); }) </script> </body> hover()
hover()和css中的hover一致，当鼠标放在该元素上时触发第一个（mouseenter）事件，离开时会触发第二个（mouseleave）事件
此方法用于模拟光标悬停事件
<body> <p>此处是p1</p> <script src="../../jquery-3.6.0.js"></script> <script> $('p').hover(function(){ //此处触发进入事件 console.log('你已经进入了p1'); }, function(){ //此处触发离开事件 console.log('你可已经离开了p1'); }) </script> </body> focus() 与 blur()
这两个事件通常用于表单元素
focus():当元素获得焦点时则触发的事件
blur():当元素失去焦点时会触发的事件
<body> <!--focus（）事件--> <input type="text">文本框 <script src="../../jquery-3.6.0.js"></script> <script> $('input').focus(function(){ //当获得焦点时 $(this).css('background-color','yellow'); //背景颜色会变成黄色 $(this).css('outline','none'); //取消边框 }) /*blur()事件*/ $('input').blur(function(){ //失去焦点时 $(this).css('background-color','red'); input背景颜色会变成红色 }) </script> </body>
以上就是jQuery所有的事件
