jQuery
目录
1. JavaScript和jQuery的关系
jQuery是一个库，里面存在大量的JavaScript函数
2. 获取jQuery
搜索cdn jQuery，复制过来即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn引入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
</body>
</html>
3. jQuery基本公式介绍
公式：$(selector).action()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn引入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<!--lib导入-->
<script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
<!--
公式：$(selector).action()
-->
<a href="" id="test-jquery">点我</a>
<script>
//选择器就是CSS的选择器
$('#test-jquery').click(function () {
alert('Hello jQuery!')
})
</script>
</body>
</html>
4. 选择器
//原生的JS，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css中的选择器它全部都能用
$('p').click(); //标签选择器
$('#id1').click(); //id选择器
$('.class1').click(); //类选择器
文档工具站：https://css.cuishifeng.cn/index.html
3. 事件
鼠标事件，键盘事件，其他事件
mousedown() 鼠标按下
mousemove() 鼠标移动
mouseover() 点击结束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.5.1.js"></script>
<style>
#divMove{
500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
点这里移动
</div>
<script>
//当网页元素加载完毕之后，响应事件
//这个是全称 $(document).ready(function (){}) 我们一般用下面的简写
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY);
});
});
</script>
</body>
</html>
4. 操作DOM
1. 节点文本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
//纯文本
//获得值
$('#test-ul li[name=python]').text();
//设置值
$('#test-ul li[name=python]').text('some values');
//HTML
//获得值
$('#test-ul').html();
//设置值
$('#test-ul').html('<strong> 123 </strong>');
</script>
</body>
</html>
2. CSS的操作
$('#test-ul li[name=python]').css({'color': 'red', 'background': 'blue', 'width': '60px'});
3. 元素的显示和隐藏
本质：display : none;(CSS)
$('#test-ul[name=python]').show();
$('#test-ul[name=python]').hide();
4. 娱乐（测试用）
$(window).width();
$(window).height()
更多函数见上面提到的文档