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. 获取下拉框的值

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