JS、JQ相關小技巧積攢

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 = new FormData();

formdata.append("key","value");

若是提交form則  var formdata = 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 == "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=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。