Jquery常用操作汇总，dom操作，ajax请求 |
您所在的位置：网站首页 › 从dom中删除所有匹配的元素的方法 › Jquery常用操作汇总，dom操作，ajax请求 |
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('New Element'); 2. prepend()将一个或多个元素添加到每个匹配元素的子元素列表的开头。 $('#parent').prepend('New Element'); 3. before()在每个匹配元素之前插入内容。 $('#target').before('Before Target'); 4. after()在每个匹配元素之后插入内容。 $('#target').after('After Target'); 5. html()替换每个匹配元素的HTML内容。 $('#target').html('Replace Content'); 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 哪一项被选中 Option 1 Option 2 Option 3 // 检查是否有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); // 处理错误情况 } }); |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |