jQuery 概述及常用事件

最新推荐文章于 2021-10-11 17:01:31 发布

Marvellous丶

最新推荐文章于 2021-10-11 17:01:31 发布

阅读量243

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/baolingye/article/details/93384867

版权

前端专栏收录该内容

12 篇文章 5 订阅

订阅专栏

一、jQuery概述

jQuery 是一个 JavaScript 库，极大地简化了JavaScript
使用格式
- 使用时先导入jQuery包
- 公式：jQuery(选择器).事件

二、事件

页面对不同访问者的响应叫做事件，事件处理程序指的是当 HTML 中发生某些事件时所调用的方法

三、click事件

当单击元素时，发生 click 事件。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<p>点击这个段落</p>
<script>
    $("p").click(function () {
        alert("这个段落被点击了");
    });
</script>
</body>
</html>

运行结果：
在这里插入图片描述

四、双击事件

当双击元素时，会发生 dblclick 事件。dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<p>双击鼠标左键的，我就消失。</p>
<p>双击我消失！</p>
<p>双击我也消失！</p>

<script>
	//ready()可以极大地提高web应用程序的响应速度
    $(document).ready(function () {
        $("p").dblclick(function () {
            $(this).hide();
        });
    });
</script>
</body>
</html>

五、mousedown事件

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<p id="p1">这是一个段落</p>

<script>
    $("#p1").mousedown(function () {
        alert("鼠标在该段落下");
    });
</script>
</body>
</html>

运行结果：
在这里插入图片描述

六、hover()事件

hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/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>