Jquery常用操作汇总，dom操作，ajax请求

这段时间在写一些小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('<div class="newElement">New Element</div>');

2. `prepend()`

将一个或多个元素添加到每个匹配元素的子元素列表的开头。

$('#parent').prepend('<div class="newElement">New Element</div>');

3. `before()`

在每个匹配元素之前插入内容。

$('#target').before('<div class="newElement">Before Target</div>');

4. `after()`

在每个匹配元素之后插入内容。

$('#target').after('<div class="newElement">After Target</div>');

5. `html()`

替换每个匹配元素的HTML内容。

$('#target').html('<div class="newElement">Replace Content</div>');

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() 去获取输入框的值
<input  type="text" id="ipt1"/>
let ipt1V = $("#ipt1").val()

2. input 输入框的双向数据绑定

其实就是change事件触发的同时去修改绑定值啦

<input  type="text" id="ipt2"/>
<p id="ipt2Text"></p>$("ipt2").on("change",function(){// 除了form控件之外的其他元素的内容，基本都可以通过.text()去改变元素内容$("ipt2Text").text($("#ipt2").val())
})

3. 判断单选radio 哪一项被选中

<form>  <input type="radio" name="group1" value="option1"> Option 1<br>  <input type="radio" name="group1" value="option2" checked> Option 2<br>  <input type="radio" name="group1" value="option3"> Option 3  
</form>// 检查是否有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. 获取下拉框的值

通过select元素获取其val即可得到当前被选择的值

$('#selectOption').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); // 处理错误情况}
});