jQuery库中封装了大量JavaScript方法，有两种引入jQuery的方法：
- 到官网下载jQuery.js文件，在html中以引入本地文件的方式引入
- CDN：通过链接，直接引用其他服务器上的js库
在html的head中用以下代码引入jQuery：
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>初识jQuery
<a href="" id="test-jquery">点我</a>
<script>
let test = document.getElementById('test-jquery')
// jQuery选择器就是css的选择器 需要用'#id'
$('#test-jquery').click(function (){ // 注意此处不是onclick
alert(true)
})
</script>由以上代码可知，jQuery基本命令的模式为：
$(selector).action()selector为选择器，不同类型用# .区分，action()为操作名，指的是针对被选择节点的不同操作。
对于document实现的原生选择器，一般需要先获取节点再进行相关操作，而jQuery选择器，可以把节点的获取和设置操作用一行代码实现，更加方便直观。
- jQuery选择器就是css的选择器，在填写
id时候，前面需要加#
选择器
<p></p>
<span id="id_01"></span>
<span class="class_01"></span>
<script>
// 原生JS中的几种选择器类型
// 选择器类型少，使用麻烦，不便记忆
let variable_p =document.getElementsByTagName('p') // 标签选择器
let variable_id01 = document.getElementById('id_01') // id选择器
let variable_class01 = document.getElementsByClassName('class_01') // 类选择器
// jQuery选择器
$('p').click() // 标签选择器 ： 选择p标签
$('#id_01').click() // id选择器 ： 选择id为id_01的节点
$('.class_01').click() // 类选择器 ： 选择类名为class_01的类
</script>事件
鼠标事件、键盘事件、其他事件
鼠标事件
在IDEA中输入mouse可以看到与mouse相关的代码提示。
网页中的鼠标事件主要是：鼠标移上、鼠标按下、鼠标按住、鼠标点击、鼠标离开
1. mousedown()
当鼠标指针移动到元素上方，并按下鼠标左键时，会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件，或添加当发生 mousedown 事件时运行的函数。
mousedown() 可以检测鼠标哪个按键被按下，以下三个数字表示鼠标的三个按键：
- 1：表示鼠标点击了左键（默认的）
- 2：表示鼠标点击了中键（滚轮）
- 3：表示鼠标点击了右键
$(selector).mousedown(function(e){ if(e.which == 3){ alert("鼠标点击了右键"); }else if(e.which == 2){ alert("鼠标点击了中键"); }else if(e.which == 1){ alert("鼠标点击了左键"); } })
2. mouseup()
当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或添加当发生 mouseup 事件时运行的函数。
3. 实例
在<div>元素上按住/松开鼠标左键，插入文本：
<script>
$(document).ready(function(){
$("div").mouseup(function(){
$(this).after("<p style='color:green;'>释放鼠标按钮。</p>");
});
$("div").mousedown(function(){
$(this).after("<p style='color:purple;'>按下鼠标按钮。</p>");
});
});
</script>
<body>
<div>在这个 div 元素中按下和释放鼠标按钮。</div>
</body>4. mouseenter()
当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或添加当发生 mouseenter 事件时运行的函数。
**注意：**与 mouseover 事件不同，mouseenter 事件只有在鼠标指针进入被选元素时被触发，mouseover 事件在鼠标指针进入任意子元素时也会被触发。
5. mouseleave()
当鼠标指针离开被选元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或添加当发生 mouseleave 事件时运行的函数。
**注意：**与 mouseout 事件不同，mouseleave 事件只有在鼠标指针离开被选元素时被触发，mouseout 事件在鼠标指针离开任意子元素时也会被触发。
6.实例
鼠标移动到p上，背景颜色变为黄色，移开后变为浅灰色
<p id="para">鼠标移动到此段落</p>
<script>
$(function (){
$('#para').mouseenter(function (){
$('#para').css("background-color","yellow")
})
$('#para').mouseleave(function (){
$('#para').css("background-color",'lightgrey')
})
})
</script>7. mouseover()与 mouseout()
- mouseover 事件在鼠标指针进入任意子元素时也会被触发。
- mouseout 事件在鼠标指针离开任意子元素时也会被触发。
案例：实时显示鼠标在div框内坐标
<head>
<meta charset="UTF-8">
<title>事件</title>
<script src="lib/jQuery-v3.6.0.js"></script>
<style>
#divmove{
width:500px;
height: 1500px;
border: 1px solid red;
}
</style>
</head>
<!--获取鼠标当前坐标-->
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>操作DOM
节点文本操作
<ul id="testul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
$('#testul li[name=python]').text()
$('#testul li[class=js]' ).html()
</script>CSS操作
<script>
$('#testul li[name=python]').css('background-color','red')
$('#testul li[class=js]' ).css('color','red')
</script>元素的显示与隐藏
<script>
$('#testul li[name=python]').show()
$('#testul li[class=js]' ).hidden()
</script>备忘：layui Element ui docsify Ant Design Vue express
