这段时间在写一些小Demo，用的都是很远古的Jquery,哈哈哈，但是呢也挺好玩儿的。想着记录一下。
题外话：补充一些自己欠缺的前端知识，（我的前端学的比较乱，哈哈哈，原生的js不是很熟，）
题外话—dom操作导致事件绑定失效？
场景复现：循环遍历了一个table表格，及其操作按钮，当我们重新渲染表格时，表格中的操作按钮会失效，无法点击。大家的写法可能如下（一个经典错误）：
$('#editBn').on('click',function(){
// 业务逻辑
})
使用事件委托，将对应的事件委托给父级元素即可。
$('.container').on('click','.btn',function(){
// 业务逻辑
})
题外话—JS 操纵 JSON
JSON.parse() 将JSON字符串转换JavaScript对象
JSON.stringify() 将JavaScript值转换为JSON字符串
一、jQuery常用操作
（一）元素选择
这里的话，最常用的就是类选择器和id选择器，和CSS选择器基本一致，不做过多赘述
let Mybtn = $(".my-button")
let MyBox = $("#mybox")
（二）添加元素
1. append()
将一个或多个元素添加到每个匹配元素的子元素列表的末尾。
$('#parent').append('
2. prepend()
将一个或多个元素添加到每个匹配元素的子元素列表的开头。
$('#parent').prepend('
3. before()
在每个匹配元素之前插入内容。
$('#target').before('
4. after()
在每个匹配元素之后插入内容。
$('#target').after('
5. html()
替换每个匹配元素的HTML内容。
$('#target').html('
6. clone()
克隆一个或一组元素，并可选择包含其事件处理程序。
var clonedElement = $('#elementToClone').clone(true).appendTo('#parent');
（三）移除元素
1. remove()
从DOM中删除每个匹配的元素。
$('#elementToRemove').remove();
2. empty()
删除所有子节点，但保留匹配的元素本身。
$('#parent').empty();
3. detach()
从DOM中删除每个匹配的元素，同时保持所有jQuery数据和事件处理程序。
$('#elementToDetach').detach();
（四）form表单
1. input 输入框的内容获取
// 很简单，凡是input控件，基本都可以通过.val() 去获取输入框的值
let ipt1V = $("#ipt1").val()
2. input 输入框的双向数据绑定
其实就是change事件触发的同时去修改绑定值啦
$("ipt2").on("change",function(){
// 除了form控件之外的其他元素的内容，基本都可以通过.text()去改变元素内容
$("ipt2Text").text($("#ipt2").val())
})
3. 判断 单选radio 哪一项被选中
// 检查是否有radio被选中
if($('input[name="group1"]:checked').length > 0) {
// 获取被选中的radio的值
var selectedValue = $('input[name="group1"]:checked').val();
// 显示被选中的值
alert("Selected Value: " + selectedValue);
} else {
// 如果没有radio被选中
alert("没有radio被选中.");
}
4. 获取下拉框的值
$('#test option:selected').val();
5. input 控件动态添加readonly，disabled,checked 等属性
两种方法,更推荐.prop：
.attr()：$('element').attr(key,value)
.prop()：$('element').prop('xxxx',true|false)
在大多数情况下，使用prop()方法而不是attr()方法来设置或获取布尔属性（如readonly、disabled、checked等），因为prop()方法能更准确地反映DOM属性的实际状态。
// 设置复选框或单选按钮为选中状态
$('#myCheckbox').attr('checked', 'checked');
// 或者使用 prop() 方法
$('#myCheckbox').prop('checked', true);
// 移除 checked 属性，即取消选中状态
$('#myCheckbox').removeAttr('checked');
// 或者使用 prop() 方法
$('#myCheckbox').prop('checked', false);
6. input file 文件上传，获取上传的文件内容，多文件上传
$("#formFile").on("change", function () {
var files = $(this).prop('files');
var data = new FormData();
data.append('file', files[0]);
}
7. input file 改用按钮点击触发文件上传
将input file 隐藏掉 display:none ，然后点击按钮时，触发file的点击事件
文件上传在file input的click中实现
二、Jquery 操控 Ajax
（一）GET请求
$.ajax({
url: 'http://example.com/data',
type: 'GET',
success: function(response) {
console.log(response);
},
error: function(error) {
console.error(error);
}
});
（二）POST请求
$.ajax({
url: 'http://example.com/submit',
type: 'POST',
data: {
key: 'value' }, // 或者使用 $('#formId').serialize()
success: function(response) {
console.log(response);
},
error: function(error) {
console.error(error);
}
});
（三）文件上传
文件上传通常需要使用FormData对象，并且通常涉及到POST请求。
var form = $('#fileUploadForm')[0];
var formData = new FormData(form);
$.ajax({
url: 'http://example.com/upload',
type: 'POST',
data: formData,
processData: false, // 不要处理数据
contentType: false, // 不要设置内容类型
success: function(response) {
console.log(response);
},
error: function(error) {
console.error(error);
}
});
（四）发送一个json请求
var data = {
key: "value" }; // 这是你的 JSON 数据
$.ajax({
url: 'http://example.com/api/endpoint',
type: 'POST',
data: JSON.stringify(data), // 将 JavaScript 对象转换为 JSON 字符串
contentType: 'application/json; charset=utf-8', // 告诉服务器你发送的是 JSON 数据
dataType: 'json', // 告诉 jQuery 期望从服务器接收 JSON 数据
success: function(response) {
console.log(response); // 处理服务器返回的 JSON 数据
},
error: function(error) {
console.error(error); // 处理错误情况
}
});