1、什么是jQuery
jQuery 是一个快速、小巧、功能丰富的 JavaScript 库，它让 HTML 文档遍历和操作、事件处理、动画以及 Ajax 等操作变得更加 简单。
简单理解 ：jQuery 让用 JavaScript 操作网页（DOM）、处理事件、做动画、发起网络请求等变得更简单、更兼容
2、 为什么要用 jQuery
原生 JavaScript 在不同浏览器中的行为差异较大（比如 IE 和 Chrome 的 DOM 操作方法不同），开发者需要写很多兼容性代码才能让网页正常运行。
而 jQuery 做了一层封装，让你用一套统一的 API，就能在所有主流浏览器中实现相同的操作，不用关心底层兼容性问题。
3、 jQuery 和 原生 JavaScript 的对比
对比项jQuery原生 JavaScript语法简洁性非常简单相对繁琐浏览器兼容性 自动处理兼容问题需要手动处理兼容文件大小 需要引入额外库（虽然很小） 不需要额外库性能 一般足够快 原生通常更快
注意：现在前端开发中，开发者通常不再依赖 jQuery，而是使用框架自带的能力（比如使用 Vue、React、Angular）。但在老项目、简单页面、快速开发中，jQuery 仍然非常实用
4、jQuery 简单语法示例
1、引入jQuery
CDN 在线引入：百度搜素CDN jQuery即可
在某些无法使用 在线依赖时也可以将js文件下载下来，引入项目
补充：
jQuery官方地址：jquery.com
jQuery api中文在线手册： https://www.sunpop.cn/documentation/jq/index.html
2、选择元素
在 jQuery 使用 $() 函数来选择 DOM 元素，类似于 CSS 选择器；CSS中的选择器jQuery都适用
$('#myId') // 选择 id="myId" 的元素
$('.myClass') // 选择所有 class="myClass" 的元素
$('div') // 选择所有
$('ul li') // 选择
- 下的所有
-
对比原生 JS写法：
jQuery原生 JavaScript$('#myId')document.getElementById('myId')$('.myClass')document.getElementsByClassName('myClass')$('div')document.getElementsByTagName('div') 或 document.querySelectorAll('div')
3、操作DOM---内容修改
$('#myDiv').html('
这是新的 HTML 内容
'); // 设置 HTML$('#myDiv').text('这是纯文本内容'); // 设置文本内容
$('#myDiv').html(); // 获取HTML内容
$('#myDiv').text(); //获取文本内容
原生JavaScript写法：
document.getElementById('myDiv').innerHTML = '
这是新的 HTML 内容
';document.getElementById('myDiv').textContent = '这是纯文本内容';
4、操作DOM---元素插入
在某个元素之前插入新元素
- 测试1
- 测试2
结果：
原生JavaScript写法：
// 获取元素
const list = document.getElementById('list');
const items = document.querySelectorAll('.item');
// 创建新元素
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = '新项目';
// 插入元素到指定位置
const referenceItem = items[0]; //第一个元素
list.insertBefore(newItem, referenceItem); // 在referenceItem前插入
5、操作DOM---元素隐藏
本质：display:none
$('.item').hide(); //隐藏
$('.item').show(); //显示
$('.item').toggle(); //切换显示/隐藏
6、绑定点击事件
jQuery写法
$('#myButton').click(function() {
alert('按钮被点击了！');
});
原生JavaScript写法：
document.getElementById('myButton').addEventListener('click', function() {
alert('按钮被点击了！');
});
7、Ajax 请求
$.get('http://localhost:8080/main', function(response) {
console.log('服务器返回：', response);
});
$.post('http://localhost:8080/main', function(response) {
console.log('服务器返回：', response);
});
或者：
$.ajax({
url: 'http://localhost:8080/main',
method: 'GET',
success: function(data) {
console.log(data);
}
});
$.ajax({
url: 'http://localhost:8080/main',
method: 'POST',
success: function(data) {
console.log(data);
}
});
！