1.如果浏览器不支持svg格式的图片的时候，进行图片的替换

1
<img src = './image.svg' onerror = "this.onerror = null;this.src = './image.png'"/>

2.移动端当点击菜单换背景图片的时候，同时也添加了选中的样式，有时候在使用浏览器自带的回退按钮的时候图片出不来，或者说是选中状态没有进行切换

1
//这个时候需要将点击选中的样式给去除了，通过其他方式去控制选中状态，不要点击的同时即切换图片又切换选中状态

3.当用表格布局的时候，希望在每行的下面都带上两句解释性的话，那么最好是另起一行，然后合并单元格，在合并的单元格里写上需要备注的东西

Aaron Swartz

例如上面的赠品栏的添加，我认为比较好的方式就是合并单元格

4.数据类型的检测

1.typeof

2.这种方式检测的比较精确

1
2
var str = 'songtao'
[].toString.call(str)  //[object string]

5.获取页面中元素距离页面top，left 的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  * {margin:0;padding:0;}
    .box  {
      width:200px;
      height: 200px;
      background-color: pink;
      margin-top:1300px;
      margin-left:200px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
<script>
    function getRec(ele) {
        var _t = document.documentElement.clientTop,
            _l = document.documentElement.clientLeft,
            rect = ele.getBoundingClientRect();
        return {
            top: rect.top - _t, 
            right: rect.right - _l,
            bottom: rect.bottom - _t,  //元素的底部距离页面顶部的距离
            left: rect.left - _l //元素右边距离页面左边的距离
        }
    }
    var obj = document.querySelector('.box')
    console.log(getRec(obj))
</script>
</html>
  • 注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容。

6.数字的固定小数的位数

1
2
3
4
var a=8.88888,
    b=8;
console.log(a.toFixed(2)); // 8.89 或者 8.88
console.log(b.toFixed(2)); // 8.00

7.冒泡排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
解析：1.比较相邻的两个元素，如果前一个比后一个大，则交换位置。

　　　2.第一轮的时候最后一个元素应该是最大的一个。

　　　3.按照步骤一的方法进行相邻两个元素的比较，这个时候由于最后一个元素已经是最大的了，所以最后一个元素不用比较。
// 第一轮是对n-1的位置定位
// 第二轮是 每一个位置的数的 确定
var arr = [1, 4, 5, 6, 99, 111, 112, 113, 133],
    temp = 0,
    flag = false;
for (var i = 0; i < arr.length - 1; i++) {
    document.writeln('come');
    for (var j = 0; j < arr.length - 1 - i; j++) {
        if (arr[j] > arr[j + 1]) {
            temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
            flag = true;
        }
    }
    if (flag) {
        flag = false;
    } else {
        break;
    }
}
for (var i = 0; i < arr.length; i++) {
    document.writeln(arr[i]);
};

8.二分查找

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

解析：二分查找，也为折半查找。首先要找到一个中间值，通过与中间值比较，大的放又，小的放在左边。再在两边中寻找中间值，持续以上操作，直到找到所在位置为止。
var arr = [41, 55, 76, 87, 88, 99, 123, 432, 546, 577, 688, 786];

function twoFind(arr, wantVal, leftIndex, rightIndex) {
    if (leftIndex > rightIndex) {
        document.writeln('SORRY: 找不到 ' + wantVal + ' ！');
        return;
    }
    var minIndex = Math.floor((leftIndex + rightIndex) / 2);
    if (arr[minIndex] > wantVal) {
        twoFind(arr, wantVal, leftIndex, minIndex - 1);
    } else if (arr[minIndex] < wantVal) {
        twoFind(arr, wantVal, minIndex + 1, rightIndex);
    } else {
        document.writeln('找到了 ' + wantVal + ' ,下表为' + minIndex);
    }
}
twoFind(arr, 9, 0, arr.length - 1);

9.JS中delete只能删除对象的属性

1
2
3
4
5
6
function Person () {};
var me = new Person();
me.name='冯杰';
console.log(me.name);
delete me.name;
console.log(me.name);

10.arr.reduce(CALLBACK)

1
2
3
4
5
6
7
8
9
10
//方法接收一个函数作为累加器，数组中每个值(从左到右)开始合并，最终成为一个值(也可以自定义)
var arr = [ 1, 2, 3, 4 ];
var sum = arr.reduce( function( item1, item2 ) {
  	return item1 + item2;
} );
console.log( sum );   //10
var ji = arr.reduce(function( item1, item2 ) {
  	return item1 * item2;
});
console.log( ji );   //24

11.arr.push()的返回值

1
//返回这个新数组的长度

12.样式初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*淘宝的样式初始化代码：*/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

13.清除浮动

1
2
3
4
5
6
7
8
9
10
.clearfix:before, .clearfix:after {
       content: " ";
       display: table;
   }
   .clearfix:after {
       clear: both;
   }
   .clearfix {
       *zoom: 1;
   }

14.isArray（）

1
2
var arr = [ 1, 2, 3, 3 ];
Array.isArray(arr)   //true

15.nodeName

1
2
<div id = 'box'></div>
document.getElementById( 'box' ).nodeName    //DIV

16.array.filter()

1
2
3
4
5
var arr = [ 1, 2, 3, 4, 5, 6 ];
var result = arr.filter(function( item ){
  	return item > 3;
});
console.log( result );   //[ 4, 5, 6 ]