踩坑 · 學習筆記

1.單選按鈕必須要有一項被選中,才可以取到值,否則值是undefined,單選按鈕必須取相同的name才能有單選效果.編輯模態框時 ``` $('input\[value="'+data.field+'"\]').prop('checked',true); ``` 注意:遇到此問題時極容易被attr()方法坑.prop是attr缺陷的補充,主要適用屬性值一更改,就立馬生效的.如 ??![圖片](http://a1.qpic.cn/psb?/42d09672-ed83-4cb0-9a7e-4c28dc8297bb/UhL99sJFsQ0kAZEH1eUlNvAsNvBPkxamOoSG57mnqYM!/b/dDABAAAAAAAA&ek=1&kp=1&pt=0&t=5&tl=3&su=0251809137&tm=1565668800&sce=0-12-12&rf=2-9) 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 并不會被重置? 需要手動重置