常用的jQuery事件方法
Posted nanchen_J
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了常用的jQuery事件方法相关的知识，希望对你有一定的参考价值。
在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所有的事件
以上是关于常用的jQuery事件方法的主要内容，如果未能解决你的问题，请参考以下文章