JS、JQ相關小技巧積攢，以備不時之需，
1.js 獲取時間差：時間戳相減，new Date().getTime() 獲得毫秒數，除以(1000*60*60*24) 獲得天數，
2.重定向操作：頁面重定向：window.location.href="http://..."即可（本頁頁面跳轉），
3.js立即執行函式，window.onload = function, $(document).ready({})區別 以及 執行時機 以及 先后順序，
4.前臺form表單的提交方式有很多種，例如：
1. form表單submit直接提交的方法
2. Ajax提交的方法 $("form").serialize() 不能提交file檔案，如果要表單元素的值包含到序列字串中，元素必須使用 name 屬性
3. jquery提交的方法
4. 原生js提交的方法 document.forms["importFileForm"].submit();
5. 提交附件
前端用 FormData
var formdata = https://www.cnblogs.com/chenboaixuexi/p/new FormData();
formdata.append("key","value");
如果提交form則 var formdata = https://www.cnblogs.com/chenboaixuexi/p/new FormData($("#form1")[0]); // 注意構造器引數是Dom物件不是jq物件
后端用 FormCollection
public ActionResult xxaction(FormCollection form)
{
var xx = form["xx"] + "";
//獲取客戶端上傳的檔案集合,即使沒有附件上傳files.Count也大于0，只要表單存在<input type='file' />
HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
}
Ajax使用FormData向后臺傳引數時，在ajax引數中加上：
contentType:false,
processData:false
6. js通配符選擇器：
^= 以什么開頭
$= 以什么結尾
*= 包含什么
7. js陣列與字串相互轉換
陣列轉字串：var arr = new Array(a,b,c,d); arr.join(",");
字串轉陣列：var str = "abcd"; str.split("");
8. 陣列添加元素
var arr = [];
arr.push()：// 元素插入陣列尾部，回傳陣列新長度
arr.unshift()： //元素插入陣列頭部，回傳陣列新長度
arr.splice(index,item)：//元素插入陣列指定索引處
9.
$.get("/QM_Price/CheckAtcost",{ "vrid": $("#bjmb").attr("vrid") },function (data) { if (data =https://www.cnblogs.com/chenboaixuexi/p/="Y") { noAtcost = false; }});
$.post()
都是異步提交,所以要立即用回傳值的情況不能使用此種方法，需要用ajax的同步提交async:false;
10. 陣列與物件深拷貝 產生副本的是深拷貝，傳遞本身的是淺拷貝
陣列：
淺拷貝：
var arr1 = [1,2,3,4];
var arr2 = arr1;
console.log(arr2) // [1,2,3.4];
arr1[1] = 5;
console.log(arr2) // [1,5,3,4];
深拷貝：
var arr2 = arr1.slice(0); // 選擇一個陣列并回傳一個副本
slice(start,end) start必填，end不填默認是陣列結尾 上式表示將陣列元素都選了，
var arr2 = [].concat(arr1);// 連接一個空陣列并回傳一個副本
concat引數可以是任意多個陣列或者值 arr1.concat(4,5)的值為 [1,2,3,4,4,5];
物件：
淺拷貝：
var obj1 = {"name":"a","age":10};
var obj2 = obj1;
obj1["name"] = "b";
console.log(obj2.name) // "b"
深拷貝：
obj2 = JSON.parse(JSON.stringify(obj1)) ;// 格式化輸出物件
JSON.stringify():格式化json字串，有三個引數：
value：值，需要格式化的json串
raplace：可選，可以是方法，也可以是陣列，一般寫null，作用：可以對json串進行操作，比如大小寫轉換
space：分隔符,數字0-10表示縮進幾個字符，轉義字符：\t表示回車，字串，表示用什么分割
JSON.parse()：將json字串轉換成物件
11. 篩選器問題
$("input[name='xx'][id='yy']") 兩個[]連一起，表示的是求交集——a且b
$("input[name='xx'],input[name='yy']") 逗號表示并集——a或b（a和b）
12. iE瀏覽器兼容性問題：
不支持 => 運算式，所以不能用forEach()方法來遍歷陣列，拉姆達運算式是ES6的東西
不支持 ` 符號（模板字串），js字串多行問題，這個是ES6的特性
字串多行問題解決：\ 使用反斜杠，如果寫html片段，注意里面的屬性值用單引號 ' ，用到雙引號的地方使用 \" 來轉義，
13. hasOwnProperty(key):判斷一個物件里是否包含該key值，
14. jQuery.extend(true, {}, data[i]):物件深拷貝
15.查看專案種jq 的版本：alert('jQuery版本：' + $.fn.jquery); 是否引入了jq：typeof jQuery == undefined
16. jq.html() 方法，回傳元素的html，不包括本身，第一個子元素的html，
17. $.fn.load = function(params...){}，重寫jquery的load函式，
fn是函式的原型成員，在js中，每個函式都有兩個物件，一個是函式物件，即函式本身，一個是原型物件，函式的prototype方法指向這個原型物件，
18. var start = new Date($("#BeginDate").datebox("getValue").replace(/-/g, "/"));// ‘-’在ie瀏覽器中不能被識別成日期格式在chrome中可以， ‘/’瀏覽器通用，
19. js中浮點型的0 等于 ""，等于false
var a = 0;
console.log(a == "") // true
console.log(a == false) // true
20. jq offset():只能得到display不為none的元素的值，為none則offset():{top:0,left:0}
21. ajax提交后臺的時候，陣列無法直接提交，提交后后臺得不到陣列或者字串，得到一個null，用JSON.stringify(); 或者：traditional: true，
22. ie瀏覽器快取問題：ajax每次請求后臺時請求引數相同時，瀏覽器快取機制會不再次請求后臺，直接讀取上一次的資料，所以每次改一下請求引數即可：
data: {
param: Math.random()// ie瀏覽器快取，每次請求引數不一致即可
}
23. form表單里面的button 點擊不重繪頁面 type='button'
24. NaN 、"" 、 0 、false 、null 、undefined 這6個值是js的6個假值，取反都是true，除了這幾個，其它都是false，
25. history.back();--點擊瀏覽器的回退按鈕
history.go(-1);--等同于history.back()，
如果想要回退的同時再刷新以下頁面，則以上方法不可取，可用以下方法：
window.location.href=https://www.cnblogs.com/chenboaixuexi/p/document.referrer
26.判斷ie版本：
"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Tablet PC 2.0)"
var useragent = navigator.userAgent;//瀏覽器自帶字串
var re = new RegExp("MSIE (\\d+\\.\\d+)");
re.test(useragent);
RegExp.$1;
RegExp 是javascript中的一個內置物件，為正則運算式,RegExp.$1(RegExp["$1"])是RegExp的一個屬性,指的是與正則運算式匹配的第一個子匹配(以括號為標志)字串：
var r= /^(\d{4})-(\d{1,2})-(\d{1,2})$/; //正則運算式 匹配出生日期(簡單匹配)
r.exec('1985-10-15');
s1=RegExp.$1;
s2=RegExp.$2;
s3=RegExp.$3;
alert(s1+" "+s2+" "+s3)//結果為1985 10 15
正則里有一個 lastIndex 的屬性，是下一次匹配的開始位置，test()匹配之后，lastIndex的值是下一次匹配開始的位置
27.判斷是否ie
if ("ActiveXObject" in window) {
console.log("你是ie..");
} else {
console.log("你不是");
}
28.判斷是否ie，并且回傳版本資訊
function IEVersion() {
// 取得瀏覽器的userAgent字串
var userAgent = navigator.userAgent;
// 判斷是否為小于IE11的瀏覽器
var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;
// 判斷是否為IE的Edge瀏覽器
var isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11;
// 判斷是否為IE11瀏覽器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
if (isLessIE11) {
var IEReg = new RegExp('MSIE (\\d+\\.\\d+);');
// 正則運算式匹配瀏覽器的userAgent字串中MSIE后的數字部分，，這一步不可省略！！！
IEReg.test(userAgent);
// 取正則運算式中第一個小括號里匹配到的值
var IEVersionNum = parseFloat(RegExp['$1']);
if (IEVersionNum === 7) {
// IE7
return 7
} else if (IEVersionNum === 8) {
// IE8
return 8
} else if (IEVersionNum === 9) {
// IE9
return 9
} else if (IEVersionNum === 10) {
// IE10
return 10
} else {
// IE版本<7
return 6
}
} else if (isEdge) {
// edge
return 'edge'
} else if (isIE11) {
// IE11
return 11
} else {
// 不是ie瀏覽器
return -1
}
}
29. 是否宣告DTD：
控制臺輸入：document.compatMode
顯示 CSS1Compat：已宣告
30.http跨域+cookie跨域名
http跨域：
什么是跨域請求？
瀏覽器同源策略的限制(訪問同源的資源是被瀏覽器允許的，但是如果訪問不同源的資源，瀏覽器默認不允許，訪問不同源的資源就叫做跨域)
什么是同源策略（Same Origin Policy)?
同源策略，是瀏覽器的一種核心最基本的安全策略，它對來之不同遠的檔案或腳本對當前檔案的讀寫操作做了限制，
同源，即協議相同，域名相同，埠相同
為什么會有跨域問題？
跨域問題只出現在瀏覽器訪問的頁面，因為這是瀏覽器為了保戶用戶安全而制造的策略，假如沒有這層保護，網站就很容易受到跨站偽造請求（CSRF）的攻擊
瀏覽器cookie 不能跨域名，而不是不能跨域，即同一個IP地址，不同埠（跨域）共享一個cookie，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/170818.html
標籤：JavaScript
上一篇：前端基礎之BOM和DOM操作