工作中一些经验总结

第一部分

  1. 绑定事件时避免多次执行

    1
    2
    3
    4
    5
    6
    event.preventDefault();
    if (event && event.stopPropagation) {
      event.stopPropagation();
    } else {//IE浏览器
      event.cancelBubble = true;
    }

  2. 字符串与数字转换最简单方法：-0 和 + ‘ ‘

    1
    2
    3
    4
    var a = '123.45'; 
    var b = a - 0;
    var c = 123 ;
    var d = c + '';

  3. 使checkbox与文字水平对齐：对style加上vertical-align:middle

    1
    2
    <input style="color: red; vertical-align: middle;" type="checkbox" />
    <label style="vertical-align: middle;">我已阅读<label />

    如：

  4. div中设置文字竖直居中方法

  • 单行文字居中使用line-height方法，将文本的line-height设为与容器的height相等

    1
    2
    height:100px; 
    line-height:100px;

  • 多行文字居中使用display:table-cell再设置vertical-align进行居中对齐 

    1
    2
    display:table-cell; 
    vertical-align:middle

第二部分

  1. js处理绝对路径中的反斜杠方法

    1
    2
    path.split(/\\/g)
    path为中文路径：E:\record\movie\2016-05-14\123.mp4

  2. 页面禁止使用鼠标滚动缩放页面

    1
    2
    3
    4
    5
    $(document).on("mousewheel DOMMouseScroll", function (e) {
    　　if(e.ctrlKey){
    　　　　e.preventDefault();
    　　}
    })

  3. 使用（主要是IE9）window.showModalDialog出现 不能执行已释放Script的代码 错误的解决方法

    1
    将window.returnValue的值转化成bool或者字符串，不能为object

  4. jquery鼠标滚轮事件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $(document).on("mousewheel DOMMouseScroll", function (e) {    
    	var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  	// chrome & ie
                (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));            		// firefox
    	if (delta > 0) {
    	    console.log("wheelup");
    	} else if (delta < 0) {
    	    console.log("wheeldown");
    	}
    });
    注意： jquery要使用2.0以下

  5. 使用img做背景图片时，出现无法消除的灰色边框，处理方法

    1
    2
    3
    添加src属性，同时设置空白图片
    <img src="http://www.xcwljy.cn/images/pixel.gif" style="background: url('../images/icon-rounded-hall.png') 
    no-repeat;border: none;" />

未完待续…

赏

本文地址： http://wsdever.github.io/2014/10/09/20161009/