1.单选按钮必须要有一项被选中,才可以取到值,否则值是undefined,单选按钮必须取相同的name才能有单选效果.编辑模态框时 ``` $('input\[value="'+data.field+'"\]').prop('checked',true); ``` 注意:遇到此问题时极容易被attr()方法坑.prop是attr缺陷的补充,主要适用属性值一更改,就立马生效的.如    2\. 在vue的实力外部获取和赋值实例的data成员,可以通过如下方式获取,假如var app = new Vue(\[\]); 则  app.\_data.field用来对field进行取值和赋值 3.jquery的表单serialize()方法默认对参数进行了encodeURIComponent,会导致中文乱码.还原的话,解码即可 ``` var params = $('#DialogForm').serialize(); params = decodeURIComponent(params,true); var params = parse\_query\_str(params); ``` 4.vedio标签.初始化只显示指定大小宽高,播放开始显示资源本身宽高,结束又恢复指定宽高 您的浏览器不支持html标签video,请更换更先进的浏览器,以提供更好的体验 5.避免表单输入框focus时自动提示历史输入记录,可以在input加属性autocomplete="off" on是开启 6.订单表关联买卖双方以及买卖物的固有属性，可作为冗余字段加入订单表，变化属性经由主键ID关联查询 7.checkbox全选与反选 ```      \* @remark  全选     $('#all\_choose').click(function(){         $('.checkAll').prop('checked', true);         $('.check').prop('checked', true);     })      \* @remark  反选     $('#rev\_choose').click(function(){         $('.checkAll').prop('checked', !$('.checkAll').prop('checked'));         $('.check').each(function(){             $(this).prop('checked', !$(this).prop('checked'));         })     })      \* @remark  一键全选/全不选     $('.checkAll').click(function(){         $('.check').prop('checked', $('.checkAll').prop('checked'));     }) ``` 8.在iframe结构的后台里，子窗口登录超时，只在子窗口显示登陆界面，外部iframe依然显示，不合理。应整个浏览器刷新为登录页面 ``` // 检测登录界面是否有上级窗口,判断窗口地址是否相同.如果不同,刷新顶部窗口为登录         if(window.top.location.href!=location.href)               {                     window.top.location.href=location.href;               } 改代码仅放在登录页面页面刚加载完执行js处  ``` 9.设置iframe的边框与父窗口或浏览器窗口边框进行分离进而设置padding和margin属性。添加iframe样式box-sizing: border-box;否则有边框会与父边框贴合在一起 10.如果导出的数据库备份为.psc文件，恢复备份先打开navicat，连接本地服务器，打开数据库，右击备份选项，点击恢复备份，选择备份文件，确定恢复 11.置顶功能,通常在列表的操作列有置顶按钮,设置该记录排序字段值变为最高,同时所有其他字段减1,在order里令排序字段为第一位,这样可以保证置顶记录排序值最高且唯一.另外行记录里排序字段可以支持直接修改.效果可以是点击切换输入框,或直接显示输入框.使用change事件.声明一个全局旧值默认为0,开始修改时记录旧值,修改后进行合法性等各种规则校验,移出光标进行校验及提交,成功刷新列表,失败还原旧值,并使全局旧值变量重置为0 12.php导出报表,如果数据数字很长,如身份证,银行卡类似的可能会导致导出的数据是科学计数法,不符合期待.如果想让他完整显示.在数据后拼一个换行符使其成为一个字符串就可以了,如下 $var = $var."\\t"; 13.动态生成dom时,jquery绑定事件不生效.绑定事件在页面初始化时会进行注册,如果此时没有dom,则事件失效即使后面动态生成.可以通过给父元素添加监听事件,$(parent\_element).on('event', 'children\_element', function(){响应操作}); 实现省市区三级联动时遇到此问题. 14.表格内容过长而变形的解决方法。 在表格加入如下属性设置： ``` style="TABLE-LAYOUT:fixed;WORD-WRAP:break\_word" ``` 上面显示有超过表格长度的自动截取。 如果要表格长度固定，且超过长度时自动换行，则： ``` style="TABLE-LAYOUT:fixed;WORD-BREAK:break-all" ``` 此处切勿设置tr 或td的高度 15.ajax提交带有文件上传的表单. // 从表单直接获取要提交的数据 ``` var form = new FormData(document.getElementById("act\_form"));             //  自定义补充其他数据             form.append('operation', 'add\_adv');             form.append('type\_id', $("#navActive").val());             $.ajax({                 url: api\_url,                 type: "post",                 data: form,                 processData: false,                 contentType: false,                 success: function(response){                     if (response.code == 1) {                         layer.msg(response.msg, function () {});                         location.href = api\_url;                     } else {                         swal(response.msg, {                             icon: "warning"                         });                     }                 },                 error:function(e){                     swal('请求错误', {                         icon: "warning"                     });                 }             });  ``` PHP服务端文件要用$\_FILE处理 16.input file  获取待上传文件信息 && 上传完文件后把input type为file的文本框的文件信息清除了 JS ``` var test= document.getElementById('test'); var formData = new FormData(); formData.append('version\_file', test.files\[0\]); var ajax = new XMLHttpRequest(); ajax.open("post", "test.php", true); ajax.send(formData ); ``` JQ ``` var formData = new FormData(); var test = $('#test')\[0\].files\[0\];//或者 $('#test').get(0).files\[0\]); formData.append('version\_file', test);  $.Ajax({ type: 'POST', url: 'test.php', data:formData,         cache: false,//上传文件无需缓存        processData: false,//用于对data参数进行序列化处理 这里必须false        contentType: false, //必须 success: function(res){ console.log(res) } }) var test = document.getElementById('test'); test.value = '';//虽然test的value不能设为有字符的值，但是可以设置为空值 或 var test = document.getElementById('test'); test.outerHTML = test.outerHTML;                //重新初始化了test的html ``` 17.获取上传图片宽高 //基于jquery,选的某一个本地文件 ``` $('#file').on('change',function () {         let url = window.URL || window.webkitURL;         console.log(url.createObjectURL(this.files\[0\]));//this.files\[0\]为选中的文件(索引为0因为是单选一个),这里是图片             let img = new Image();              //手动创建一个Image对象             img.src = url.createObjectURL(this.files\[0\]);//创建Image的对象的url             img.onload = function () {                 console.log('height:'+this.height+'----width:'+this.width)             }     });   $('#file').on('change',function () {         let reader = new FileReader();         reader.readAsDataURL(this.files\[0\]);//这里把一个文件用base64编码,具体什么是base64编码,我将稍后在不久的文章中介绍         reader.onload = function(e){             let img = new Image();             img.src = e.target.result;//获取编码后的值,也可以用this.result获取             img.onload = function () {                 console.log('height:'+this.height+'----width:'+this.width)             }         } ``` 18.动态绑定元素事件, $("ele").on("event", "child\_ele", function(e, arg1, arg2...){         //code... }): 注定出发事件,带参数 $("child\_ele").trigger("event", \[arg1, arg2\]); 19.前后端分离界面通常使用modal来进行表单提交.而提交后又会有重置表单的需要.这里可以使用表单form的reset方法. JS: domObj.reset(); JQ: jqObj\[0\].reset(); 这里有坑.  隐藏域 input hidden 并不会被重置  需要手动重置