jQuery是一套开放原始代码的javascript函数库，它简化了DOM文件的操作，使我们轻松选择对象，更加简洁的完成想要完成的事情。jQuery指定CSS属性值，达到想要的特性与动画效果。jQuery加强了异步传输及事件功能。
jQuery使用
1.引用jQuery函数库
引用方式有两种，一种是直接下载JS文件引用，另一种是使用CDN来加载链接库。
1.1下载jQuery
1.下载网址为：http://jquery.com
2.将JS文件加入网页HTML的<head>标记之间，代码如下；
<script type="text/javascript" src="JS文件路径"></script>
1.2使用CDN加载jQuery
CDN是内容分发服务网络，也就是将要加载的内容通过这个网络系统进行分发。当浏览器你的网页之前可能已经在同一个CDN下载过jQuery，浏览器就已经缓存过这个文件，因此不需要重新下载，浏览速度会快很多。
1.在http://jquery.com网页最下方，找到提供CDN的网址
2.在HTML的<head>标签中加入
例：
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.js"></script>
2.jQuery基本架构
jQuery必须等待浏览器加载HTML的DOM对象之后才能执行，可以通过.read()方法来确认DOM是否已经全部加载。
jQuery(document).ready(function(){
//程序代码
})
jQuery可以使用$来代替
$(document).ready(function(){
//程序代码
})
$()函数内的参数是指定想要选用哪一个对象，接着是想要jQuery执行什么方法或者处理事件，例如ready()方法。ready方法括号内是事件处理的函数程序代码，多数情况下，我们会把事件处理函数定义为匿名函数，也就是上面事例中的function(){}。
由于document ready是常用方法，jQuery提供了更简洁的写法便于我们使用
$(function(){
//程序代码
})
jQuery基本语法
jQuery的使用非常简单，只要指定作用的DOM组件及执行的操作即可：
$(选择器).操作()
例如：
$("p").hide();
表示找出HTML中所有的<p>对象并隐藏
jQuery选择器
jQuery选择器用来选择HTML组件，我们可以通过HTML标记名称、id属性、class属性来取得组件。
1.标记名称选择器
标记名称选择器是直接使用HTML标记，例如想要选择所有的<p>组件，可以写成：
$("p")
2.id选择器
id选择器通过组件的id属性来的取得组件，只要在id属性前面加上"#"号即可，例如，想要选择id属性test的组件，可以写成：
$("#test")
3.class选择器
class选择器通过组件的class属性来取得组件，只要在class属性前加上"."号即可。例如，想要选择class属性为test的组件，可以写成：
$(".test")
综合使用
使用上述3种选择器，例如：要找出<p>标记class属性为test的组件，可以写成：
$("p.test")
常用的选择和搜索法
表示法 说明
$("*") 选择所有组件
$(this) 选择目前作用中的组件
$("p:first") 选择第一个<p>组件
$("[href]") 选择含有href属性的组件
$("tr:even") 选择偶数<tr>组件
$("tr:odd") 选择奇数<tr>组件
$("div p") 选择<div>组件中包含<p>的组件
$("div").find("p") 搜索<div>组件中的<p>组件
$("div").next("p") 搜索<div>组件之后的第一个<p>组件
$("li").eq(2) 搜索第3个<li>组件的eq()中是输入组件的位置，只能输入整数，最小为0
4.设置CSS样式属性
学会选择器用法之后，除了可以操控HTML组件之外，还可以使用css()方法来改变css样式，例如，指定<div>组件背景色为红色，可以写成下面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function (){
$("li").eq(2).css('background-color',"red")
})
</script>
</head>
<body>
<ul>
<li>跑步</li>
<li>游泳</li>
<li>篮球</li>
<li>棒球</li>
<li>台球</li>
</ul>
</body>
</html>
#代码表示，将第3个<li>组件的背景颜色改为红色
顶顶顶
