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>
浙公网安备 33010602011771号