jQuery是js的工具库，使用该工具库需要网上下载，版本分为生产版本（压缩过，体积小，读取源码困难）min.js，开发版（未压缩，体积大，可以读懂源码）。使用jQuery需要引入，在head中使用script的src
获取元素
$('选择器')：返回jquery对象
目录
获取元素
绑定事件
修改与获取
内容：test()，识别标签，如果没有实参就是获取，又是实参就是修改
属性：
样式：
其他：
与服务器交互：
jquery转js-get（jquery对象）
js转jquery-$(js对象)
遍历：each方法
function(index,item){index,$(item)}
绑定事件
具体绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="./jquery-3.7.1.js"></script>
<body>
<div class="target">
<p><span>span1</span><span>span2</span></p>
<p><span>span3</span><span>span4</span></p>
<p><span>span5</span><span>span6</span></p>
</div>
<script>
let spans = $('span')
console.log(spans);
$('spans').mouseenter(function(e){
console.log('鼠标划入');
})
$('.target').on('click',function(){
console.log('鼠标点击了');
})
$('.target').on('click',function(){
console.log('鼠标点击完了');
})
$('.target').off('click');
</script>
</body>
</html>修改与获取
内容：test()，识别标签，如果没有实参就是获取，又是实参就是修改
属性：
普通属性：attr('属性名')-获取 attr('属性名'，'属性值')-设置
类名属性：
hasClass()
addClass()
removeClass()
toggleClass()
样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./jquery-3.7.1.js"></script>
<style>
.target{
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border-radius: 50%;
background-color: aquamarine;
}
span{
width: inherit;
height: inherit;
}
botton{
border: 1 solid lightcoral;
background-color: aqua;
}
</style>
<div class="target">
<span>哈</span>
</div>
<botton>隐藏</botton>
<botton>显示</botton>
<botton>转变</botton>
<botton>移动</botton>
<script>
$('botton:nth-of-type(1)').click(function(){
$('.target').animate({
width:0,
height:0
})
})
$('botton:nth-of-type(2)').click(function(){
$('.target').animate({
width:100,
height:100
})
})
$('botton:nth-of-type(3)').click(function(){
$('.target').toggle
})
</script>
</body>
</html>
其他：
相关元素 ：
父：parent()
子：children()
上一个：prev()
下一个：next()
同一级：sibling()
创建与删除：
append： A.append(B)---返回A，A是创建内容
appendTo：A.append(B)--返回A，B是创建内容
remove()：移除--目标元素.remove()
empty()：删除目标元素的所有内容--目标元素.empty()
与服务器交互：
form表单：将用户数据提交到服务器，缺点必须刷新整个网页
ajax异步刷新：页面局部刷新
$.ajax({}) 具体操作：
$.ajax({
url:' '
mrthod:'get/post'
success:
其他参数
})
