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:
其他参数
})
