常用JavaScript代码

一、取URL中的参数

1.     function getParameterByName(name) {
   
2.         var match = RegExp('[?&]' + name + '=([^&]*)')
   
3.                         .exec(window.location.search);
   
4.         return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
   
5.     }

复制代码

二、正则分组

1.     var testStr="<div><img src='/a.jpg' alt='' /><span>test</span><img src='/b.jpg' alt='' /><span>TTest</span><img src='/c.png' alt='' /></div>";
   
2.     var reg=/<img\ssrc='(.*?)'\s+alt=''\s*\/>/g;
   
3.     var match=reg.exec(testStr),results=[];
   
4.     while(match != null){
   
5.         results.push(match[1]);
   
6.         match=reg.exec(testStr);
   
7.     }
   
8.     console.log(results);
   
9.     /*
   
10.     Array ["/a.jpg", "/b.jpg", "/c.png"]
    
11.     */

复制代码

三、为什么parseInt(1/0,19)的结果为18

　　1/0的结果是Infinity，所以parseInt(1/0,19)等同于parseInt("Infinity",19)，而在19进制中：

19进制       10进制
--------------------
   0            0
   1            1
   2            2
   3            3
   4            4
   5            5
   6            6
   7            7
   8            8
   9            9
   a            10
   b            11
   c            12
   d            13
   e            14
   f             15
   g            16
   h            17
   i             18
　　i表示18，所以parseInt(1/0,19)的结果为18。

四、jQuery中获取设置checkbox选中状态

　　由于在jQuery1.6以后.attr("checked")的返回结果是 checked，所以一般用下面两种方法获取选中状态：

1.     $("#checkboxID").is(":checked");
   
2. 
   
3.     //jQuery 1.6 +
   
4.     $("#checkboxID").prop("checked");
   
5.     　　选中checkbox：
   
6. 
   
7.     //jQuery 1.6+
   
8.     $("#checkboxID").prop("checked", true);
   
9.     $("#checkboxID").prop("checked", false);
   
10. 
    
11.     //jQuery 1.5 and below
    
12.     $('#checkboxID').attr('checked','checked')
    
13.     $('#checkboxID').removeAttr('checked')
    

复制代码

五、jQuery中判断一个元素是否存在

1.     if ($(selector).length)

复制代码

六、用JavaScript对URL进行编码

1.     var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
   
2.     var myOtherUrl = "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

复制代码

七、jQuery中event.preventDefault() 与 return false 的区别

1.     //Demo1 event.preventDefault()
   
2.     $('a').click(function (e) {
   
3.         // custom handling here
   
4. 
   
5.         e.preventDefault();
   
6.     });
   
7. 
   
8.     //Demo2 return false
   
9.     $('a').click(function () {
   
10.         // custom handling here
    
11. 
    
12.         return false;
    
13.     };
    
14.     　　jQuery中return false相当于同时调用e.preventDefault 和 e.stopPropagation。

复制代码

　　要注意的是，在原生js中，return false仅仅相当于调用了e.preventDefault。

八、JavaScript检查一个字符串是否为空最简单的方法

1.    if (strValue) {
   
2.         //do something
   
3.     }

复制代码

九、用JavaScript添加和删除class

1.     //Add Class
   
2.     document.getElementById("MyElement").className += " MyClass";
   
3. 
   
4.     //Remove Class
   
5.     document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/,'');

复制代码

十、在jQuery中取消一个ajax请求

1. 
   
2.     var xhr = $.ajax({
   
3.         type: "POST",
   
4.         url: "test.php",
   
5.         data: "name=test",
   
6.         success: function(msg){
   
7.            alert( msg );
   
8.         }
   
9.     });
   
10.     //取消请求
    
11.     xhr.abort()
    

复制代码

　　要注意的是，在ajax请求未响应之前可以用xhr.abort()取消，但如果请求已经到达了服务器端，这样做的结果仅仅是让浏览器不再监听这个请求的响应，但服务器端仍然会进行处理。

十一、JavaScript删除数组中的项 delete vs splice

1. 
   
2.     var myArray=["a","b","c"];
   
3.     delete myArray[0];
   
4.     for(var i=0,j=myArray.length;i<j;i++){
   
5.         console.log(myArray<i>);
   
6.         /*
   
7.         undefined
   
8.         b
   
9.         c
   
10.         */
    
11.     }
    
12. 
    
13.     var myArray2=["a","b","c"];
    
14.     myArray2.splice(0,1);
    
15.     for(var i=0,j=myArray2.length;i<j;i++){
    
16.         console.log(myArray2<i>);
    
17.         /*
    
18.         b
    
19.         c
    
20.         */
    
21.     }</i></i>

复制代码

　　上面的代码已经说明区别了，一个是设置为undefined，一个是真正的删除了。

十二、JavaScript中16进制与10进制相互转换

1.     var sHex=(255).toString(16);//ff
   
2.     var iNum=parseInt("ff",16);//255
   

复制代码

十三、JavaScript多行字符串

　　如何在JavaScript中方便地写一个多行字符串呢，有三种方案，你自己选吧：

1.     //one
   
2.     var testHtml="a"+
   
3.     "b"+
   
4.     "c";
   
5. 
   
6.     //two
   
7.     var testHtml2="a\
   
8.     b\
   
9.     c";
   
10. 
    
11.     //three
    
12.     var testHtml3=["a",
    
13.     "b",
    
14.     "c"].join("");

复制代码

十四、JavaScript中!!操作符是什么

1.     console.log(!!10);//true
   
2.     console.log(!!0);//false
   
3.     console.log(!!"abc");//true
   
4.     console.log(!!"");//false

复制代码

　　简单地说就是把右侧的值转为bool值

十五、JavaScript实现endsWith

1.     String.prototype.endsWith = function(suffix) {
   
2.         return this.indexOf(suffix, this.length - suffix.length) !== -1;
   
3.     };
   
4. 
   
5.     //or
   
6.     function endsWith(str, suffix) {
   
7.         return str.indexOf(suffix, str.length - suffix.length) !== -1;
   
8.     }

复制代码

十六、JavaScript中克隆对象

1.     function clone(obj) {
   
2.         // Handle the 3 simple types, and null or undefined
   
3.         if (null == obj || "object" != typeof obj) return obj;
   
4. 
   
5.         // Handle Date
   
6.         if (obj instanceof Date) {
   
7.             var copy = new Date();
   
8.             copy.setTime(obj.getTime());
   
9.             return copy;
   
10.         }
    
11. 
    
12.         // Handle Array
    
13.         if (obj instanceof Array) {
    
14.             var copy = [];
    
15.             for (var i = 0, var len = obj.length; i < len; ++i) {
    
16.                 copy<i> = clone(obj<i>);
    
17.             }
    
18.             return copy;
    
19.         }
    
20. 
    
21.         // Handle Object
    
22.         if (obj instanceof Object) {
    
23.             var copy = {};
    
24.             for (var attr in obj) {
    
25.                 if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
    
26.             }
    
27.             return copy;
    
28.         }
    
29. 
    
30.         throw new Error("Unable to copy obj! Its type isn't supported.");
    
31.     }
    
32. </i></i>

复制代码

十七、JavaScript字符与ASCII码间的转换

1.     console.log("\n".charCodeAt(0));//10
   
2.     console.log(String.fromCharCode(65));//A

复制代码

十八、JavaScript中浮点数的相等判断不能用 ==

1.     console.log(0.1+0.2 == 0.3);//false
   
2.     console.log(Math.abs(0.1+0.2 - 0.3) < 0.000001);//true

复制代码

　　如上所示，浮点数相等判断要用差的绝对值小于某一个数来判断。至于原因可以参考这里： http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html

十九、JavaScript中base64编码

1. 
   
2.     var Base64 = {
   
3. 
   
4.     // private property
   
5.     _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
   
6. 
   
7.     // public method for encoding
   
8.     encode : function (input) {
   
9.         var output = "";
   
10.         var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    
11.         var i = 0;
    
12. 
    
13.         input = Base64._utf8_encode(input);
    
14. 
    
15.         while (i < input.length) {
    
16. 
    
17.             chr1 = input.charCodeAt(i++);
    
18.             chr2 = input.charCodeAt(i++);
    
19.             chr3 = input.charCodeAt(i++);
    
20. 
    
21.             enc1 = chr1 >> 2;
    
22.             enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
    
23.             enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
    
24.             enc4 = chr3 & 63;
    
25. 
    
26.             if (isNaN(chr2)) {
    
27.                 enc3 = enc4 = 64;
    
28.             } else if (isNaN(chr3)) {
    
29.                 enc4 = 64;
    
30.             }
    
31. 
    
32.             output = output +
    
33.             this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
    
34.             this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
    
35. 
    
36.         }
    
37. 
    
38.         return output;
    
39.     },
    
40. 
    
41.     // public method for decoding
    
42.     decode : function (input) {
    
43.         var output = "";
    
44.         var chr1, chr2, chr3;
    
45.         var enc1, enc2, enc3, enc4;
    
46.         var i = 0;
    
47. 
    
48.         input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
    
49. 
    
50.         while (i < input.length) {
    
51. 
    
52.             enc1 = this._keyStr.indexOf(input.charAt(i++));
    
53.             enc2 = this._keyStr.indexOf(input.charAt(i++));
    
54.             enc3 = this._keyStr.indexOf(input.charAt(i++));
    
55.             enc4 = this._keyStr.indexOf(input.charAt(i++));
    
56. 
    
57.             chr1 = (enc1 << 2) | (enc2 >> 4);
    
58.             chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
    
59.             chr3 = ((enc3 & 3) << 6) | enc4;
    
60. 
    
61.             output = output + String.fromCharCode(chr1);
    
62. 
    
63.             if (enc3 != 64) {
    
64.                 output = output + String.fromCharCode(chr2);
    
65.             }
    
66.             if (enc4 != 64) {
    
67.                 output = output + String.fromCharCode(chr3);
    
68.             }
    
69. 
    
70.         }
    
71. 
    
72.         output = Base64._utf8_decode(output);
    
73. 
    
74.         return output;
    
75. 
    
76.     },
    
77. 
    
78.     // private method for UTF-8 encoding
    
79.     _utf8_encode : function (string) {
    
80.         string = string.replace(/\r\n/g,"\n");
    
81.         var utftext = "";
    
82. 
    
83.         for (var n = 0; n < string.length; n++) {
    
84. 
    
85.             var c = string.charCodeAt(n);
    
86. 
    
87.             if (c < 128) {
    
88.                 utftext += String.fromCharCode(c);
    
89.             }
    
90.             else if((c > 127) && (c < 2048)) {
    
91.                 utftext += String.fromCharCode((c >> 6) | 192);
    
92.                 utftext += String.fromCharCode((c & 63) | 128);
    
93.             }
    
94.             else {
    
95.                 utftext += String.fromCharCode((c >> 12) | 224);
    
96.                 utftext += String.fromCharCode(((c >> 6) & 63) | 128);
    
97.                 utftext += String.fromCharCode((c & 63) | 128);
    
98.             }
    
99. 
    
100.         }
     
101. 
     
102.         return utftext;
     
103.     },
     
104. 
     
105.     // private method for UTF-8 decoding
     
106.     _utf8_decode : function (utftext) {
     
107.         var string = "";
     
108.         var i = 0;
     
109.         var c = c1 = c2 = 0;
     
110. 
     
111.         while ( i < utftext.length ) {
     
112. 
     
113.             c = utftext.charCodeAt(i);
     
114. 
     
115.             if (c < 128) {
     
116.                 string += String.fromCharCode(c);
     
117.                 i++;
     
118.             }
     
119.             else if((c > 191) && (c < 224)) {
     
120.                 c2 = utftext.charCodeAt(i+1);
     
121.                 string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
     
122.                 i += 2;
     
123.             }
     
124.             else {
     
125.                 c2 = utftext.charCodeAt(i+1);
     
126.                 c3 = utftext.charCodeAt(i+2);
     
127.                 string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
     
128.                 i += 3;
     
129.             }
     
130. 
     
131.         }
     
132. 
     
133.         return string;
     
134.     }
     
135.     }
     
136. 
     
137.     //encode
     
138.     Base64.encode("Test"); //VGVzdA==
     
139. 
     
140.     //decode
     
141.     Base64.decode("VGVzdA=="); // Test

复制代码

二十、jQuery中each跟map的区别
　　each跟map都可以用来遍历Array或Object，区别是each不改变原来的Array或Object，map是操作给定的Array或Object返回一个新Array或Object。Demo:

1. 
   
2.     var items = [1,2,3,4];
   
3. 
   
4.     $.each(items, function() {
   
5.       alert('this is ' + this);//alert 1,2,3,4
   
6.     });
   
7. 
   
8.     var newItems = $.map(items, function(i) {
   
9.       return i + 1;
   
10.     });
    
11.     // newItems is [2,3,4,5]

复制代码

　　map会占用更多的内存，所以如果只是遍历建议用each。

二十一、判断一个对象是否为数组

1.     function isArray(obj){
   
2.         return Object.prototype.toString.call(obj) == "[object Array]";
   
3.     }

复制代码

　　不能用instanceof 和 constructor来判断，原因参考： http://perfectionkills.com/instanceof-considered-harmful-or-how-to-write-a-robust-isarray/

二十二、通过原型继承创建一个新对象

1.     function inherit(p){
   
2.         if(!p){
   
3.             throw TypeError("p is not an object or null");
   
4.         }
   
5.         if(Object.create){
   
6.             return Object.create(p);
   
7.         }
   
8.         var t=typeof p;
   
9.         if(t !== "object" && t !== "function"){
   
10.             throw TypeError("p is not an object or null");
    
11.         }
    
12.         function f(){};
    
13.         f.prototype=p;
    
14.         return new f();
    
15.     }

复制代码

非原创
原文见： http://www.w3cfuns.com/blog-5455438-5406240.html