jQuery
jQuery是一个库，里面存在大量的Javascript函数。
文档站：
方式一
官网下载：
下载完成后，将下载的js文件直接引入文档即可使用。
方式二
百度搜索cdn jQuery：
直接将链接复制引入文档即可使用。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//在线jQuery
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
//本地jQuery
<script src="../lib/jquery-3.6.0.js"></script>
</head>
<body>
</body>
</html>
语法
jQuery公式：
$(selector).action();即选择器+事件。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/jquery-3.6.0.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>
<script>
$('#test-jquery').click(function (){
alert('hello')
});
</script>
</body>
</html>
事件
事件就是当选择器的条件被满足时干什么。
示例代码：
当鼠标在块内移动时，获取鼠标的坐标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/jquery-3.6.0.js"></script>
<style>
/*
css代码
css选择器：通过#+id选择元素，在大括号中写css属性。
*/
#divMove {
/*宽度*/
width: 500px;
/*高度*/
height: 500px;
/*边框*/
/*coral（颜色），1px（粗细），solid（实线）*/
border: coral 1px solid;
}
</style>
</head>
<body>
mouse : <span id="mouseMove"></span>
<div id="divMove">
<p>请在这里移动鼠标</p>
</div>
</body>
<script>
//初始化选择器，当所有元素加载完成后执行事件
$(function () {
//通过选择器选择块元素，事件为：当鼠标在这个块内移动时。
$('#divMove').mousemove(function (e) {
//通过选择器选择行内元素，改变行内元素的内容为鼠标的x坐标和y坐标。
$('#mouseMove').text('x=' + e.pageX + 'y=' + e.pageY)
})
})
</script>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· winform 绘制太阳，地球，月球 运作规律
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人